jGrowl: with a id inside function, won't work, only if no id?

Question

inside a normal JS function:

$('#friendsPop').jGrowl("testtmee");

Wont work, but:

$.jGrowl("testmeee");

Works just fine.. I have tested everything, and if i make a link outside a function, a normal a: link like this:

<a href="javascript:void(0);" onclick="$('#friendsPop').jGrowl('testme');">link</a>

It works fine too. But i wish to activate

$('#friendsPop').jGrowl("testtmee");

After an ajax successcall, and i need to have an ID.

What can i do about this?

Answer 1

I've used jGrowl from time to time, and I don't recall ever invoking it on a selected set of jQuery objects. The whole point of jGrowl is that it produces "unattached" messages at the window level -- a single global stream of messages, regardless of how they're invoked (or from where). Just like the Mac OS X Growl concept on which it's based.

Checking the jGrowl documentation, I also don't see any example where it's called like this:

$('.something').jGrowl('message'); 
// what would this even mean in jGrowl terms?

It's always like this:

$.jGrowl('message');

If it's working for you this way on occasion, it's fortuitous happenstance (I haven't looked at the jGrowl source code to figure out why, but I'm sure the answer's there).

Just call it $.jGrowl('Like This') and you're all set.

Answer 2

You've got to add this to your ajax request:

var mesScripts = document.getElementById("mapleft").getElementsByTagName("script");
for (var i=0; i<mesScripts.length; i++) {
    eval(mesScripts[i].innerHTML);

It reform the <script> after ajax loading.

Answer 3

This is my suggestion. Since there is no way to put a jGrowl with respect to a DIV whether float left or right we will transfer it after render instead. Here's my code below taken from the original example.

(function($){
    $.jGrowl.defaults.pool = 5;
    $.jGrowl.defaults.sticky = true;
    $.jGrowl.defaults.life = 2500;
    $.jGrowl.defaults.closer = true;
    $.jGrowl.defaults.open = function(e,m,o) {$("#jGrowl").css('right', $('#header').offset().left + 17);};

    /**
     * @todo Add the twitter avatars to tweets, via tweet.user["profile_image_url"]
     * @todo Find a way to calculate the dates relatively
     * @todo Test is a cookie plugin is available so that some of this data can be 'cached'
     */
    $.jTweet = function( username , total ) {
        $.getJSON("http://twitter.com/status/user_timeline/" + username + ".json?count=" + total + "&callback=?", function(response) { 
            $.each(response, function(i, tweet) {
                $.jGrowl( (tweet.text.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
                    return m.link(m);
                })) + ' [' + tweet.source + ']' , { 
                    header: tweet.created_at , 
                    } );
            });
        });
    };

    $.jTweet('jquery', 5);
})(jQuery);

The important part here is the line:

$.jGrowl.defaults.open = function(e,m,o) {$("#jGrowl").css('right', $('#header').offset().left + 17);};

Which aligns the right property of the jGrowl object to the left property of my header. This basically transfers its location to make it look like as if it is under the header's div.