jQuery not firing after ajax

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

jQuery not firing after ajax

Post 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
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: jQuery not firing after ajax

Post 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);
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: jQuery not firing after ajax

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: jQuery not firing after ajax

Post 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);
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: jQuery not firing after ajax

Post 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:
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: jQuery not firing after ajax

Post by jaoudestudios »

That worked! THANKS! :)

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

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

Cheers
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: jQuery not firing after ajax

Post 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.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: jQuery not firing after ajax

Post 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 });
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: jQuery not firing after ajax

Post by VladSun »

;)
Have you read the manual:
http://docs.jquery.com/Ajax/jQuery.post

It's a very good manual :)
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: jQuery not firing after ajax

Post 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.
Post Reply