Page 1 of 1

jQuery not firing after ajax

Posted: Sun Jan 25, 2009 8:14 am
by jaoudestudios
My jQuery does not work on content that I have injected into the Dom with ajax.

Here is my injection...

Code: Select all

$('div#chatroom').load('php/chatroom.php', '', $.chatroom());
Here is the function chatroom...(chatData works, but my click code below does not)

Code: Select all

jQuery.chatroom = function () {
        // load messages on page entry
        $.chatData(); // THIS WORKS
        
        // save & load on submit
        $('input#submit').click( function(event) { // THIS DOES NOT WORK
            event.preventDefault();
            var name = $('input#name').val(); // get name
            var message = $('textarea#message').val(); // get message
            if (name != '' && message != '') {
                $.post("php/save.php", { name: name, message: message } ); // save message
                $.chatData();
                $('textarea#message').val(''); // reset type area
            }
            else {
                $('div#response').empty();
                $('div#response').append('<img src=\'images/close.png\' alt=\'Close\'><p class=\'whiteText\'>You must fill your name and message</p>');
                $('div#response').fadeTo('fast', 0.7).slideDown(500);
                // close response/feedback box
                $('div#response img').click( function(event) {
                    $('div#response').slideUp(400);
 
                });
            }
        });
    }
Any ideas? Thanks

Re: jQuery not firing after ajax

Posted: Sun Jan 25, 2009 12:21 pm
by kaszu
jaoudestudios wrote:

Code: Select all

$('div#chatroom').load('php/chatroom.php', '', $.chatroom());
This will execute chatroom function not when ajax is finished, but when .load function is called. It should without parentheses if input with id "submit" (and other) is available only after ajax.

Code: Select all

$('div#chatroom').load('php/chatroom.php', '', $.chatroom);

Re: jQuery not firing after ajax

Posted: Mon Jan 26, 2009 7:12 am
by jaoudestudios
I think I understand :?

How can I get $.chatroom() to fire after the ajax call has completed?

Also if I want to use the $.post ajax in a conditional statement how can I get it to return a result?

Cheers.

Re: jQuery not firing after ajax

Posted: Mon Jan 26, 2009 12:12 pm
by kaszu
Sorry for confusion, what I meant was that in your code chatroom was called before ajax.
To call chatroom after ajax call (when it finished) leave out the parentheses after "$.chatroom" and you can also leave out second argument, since it doesn't do anything.
Code which should work:

Code: Select all

$('div#chatroom').load('php/chatroom.php', $.chatroom);

Re: jQuery not firing after ajax

Posted: Mon Jan 26, 2009 12:19 pm
by jaoudestudios
kaszu wrote:Sorry for confusion, what I meant was that in your code chatroom was called before ajax.
To call chatroom after ajax call (when it finished) leave out the parentheses after "$.chatroom" and you can also leave out second argument, since it doesn't do anything.
Code which should work:

Code: Select all

$('div#chatroom').load('php/chatroom.php', $.chatroom);
Oh I see, cool thanks, I will give it a try when I get home - am leaving the office now :wink:

Re: jQuery not firing after ajax

Posted: Mon Jan 26, 2009 2:32 pm
by jaoudestudios
That worked! THANKS! :)

why use $.chatroom, instead of $.chatroom()?

Also how can I save a value returned from an AJAX call?

Cheers

Re: jQuery not firing after ajax

Posted: Mon Jan 26, 2009 4:05 pm
by VladSun
jaoudestudios wrote:why use $.chatroom, instead of $.chatroom()?
The first one is a function pointer (or address) - so you tell jQuery load() how to call your function when the ajax request is completed.
The second one is the trivial function call (i.e. an execution is performed at this line).
jaoudestudios wrote:Also how can I save a value returned from an AJAX call
It's returned as the innerHTML value of div#chatroom element.

Re: jQuery not firing after ajax

Posted: Tue Jan 27, 2009 1:01 am
by jaoudestudios
Thanks :)
VladSun wrote:
jaoudestudios wrote:
jaoudestudios wrote:Also how can I save a value returned from an AJAX call
It's returned as the innerHTML value of div#chatroom element.
Sorry I meant if I use...

Code: Select all

var status = $.post('php/userCheck.php', { name: name });

Re: jQuery not firing after ajax

Posted: Tue Jan 27, 2009 5:06 am
by VladSun
;)
Have you read the manual:
http://docs.jquery.com/Ajax/jQuery.post

It's a very good manual :)

Re: jQuery not firing after ajax

Posted: Tue Jan 27, 2009 7:46 am
by jaoudestudios
VladSun wrote:;)
Have you read the manual:
http://docs.jquery.com/Ajax/jQuery.post

It's a very good manual :)
Yep, and it is good, but sometimes it is a bit thin in some areas.