CODEWITHSUNDEEP
phpjavascriptjqueryajax
user1096685
user1096685

Reputation: 121

Jquery not working after AJAX

Using this code : 

    $("table > :not(thead) > tr.Selected").removeClass('Selected')

To find all table rows which have the class Selected and remove that class.

Plus, using this code :

    var ReqID = $("table > :not(thead) > tr.Selected").attr('id')

Which is trying to find the ID off the row which has the class selected.

This code works perfectly until the table is reloaded using AJAX and then it all stops working and that line does not work.

Any ideas?

Thankss!

EDIT

More Code :

Here is the AJAX call :

function EditRequest()
{var ReqID = $("table > :not(thead) > tr.Selected").attr('id')
alert(ReqID);
$.post("a/outputresults2.php", {editdynamic: ReqID} ,      function(data){
$('#resultstable').html(data);
});

}

function Selected(x)
{
$("table > :not(thead) > tr.Selected").removeClass('Selected')
$('#'+x).toggleClass('Selected');
}

Here is the php that outputs the original and the table updated when its been AJAX'ed :

    if($RequestID == $ID){
                $requestrows.="
    <tr id=\"$RequestID\" onClick=\"Selected($RequestID)\" class=\"Selected\" >
        <td><input type=\"text\"  id=\"MCode\" value=\"$ModCode\"></td>
        <td><input type=\"text\"  id=\"RName\" value=\"$RoomName\"></td>
  ..etc etc etc

    </tr>"; 
    }
    }
    if($RequestID != $ID){
$requestrows .=
"       <tr id= \"$RequestID\" onClick=\"Selected($RequestID)\" > 
        <td>$ModCode</td>
        <td>$RoomName</td>
        ... etc etc etc

    </tr>"; 
    }
}



echo($requestrows);

Also table being dynamically changed is called resultstable

Thanks

Upvotes: 0

Views: 1440

Answers (4)

Yorgo
Yorgo

Reputation: 2678

you can solve this by copying your js to reloading view outputresults2.php. On that way $(function(){}) triggered again.

Upvotes: 0

rkw
rkw

Reputation: 7297

If you are trying to have a clicked row identified, you can do this:

$('#resultstable').on('click', 'tbody tr', function() {
    $('#resultstable tr.Selected').removeClass('Selected');
    $(this).addClass('Selected');
});

You no longer need to render that onClick event and you can get rid of function Selected(x)

edit: are you rendering the entire table just to get one row to be in edit mode? it's not very efficient, but if you are doing that, then your jquery script can be simplified to this:

$('#resultstable').on('click', 'tbody tr', function() {
    $.post('a/outputresults2.php', {editdynamic: this.id}, function(data) {
        $('#resultstable').html(data);
    });
});

Upvotes: 0

tereško
tereško

Reputation: 58444

I suspect that this might be because jQuery abuses the innerHTML property. Your "ajax" response essentially destroys the existing DOM structure, when you are trying to replace the table.

To check if this is the reason, you should look at javascript console. Try using console.log() to check if elements you are selecting are actually there.

Upvotes: 2

nodrog
nodrog

Reputation: 3532

You probably need to call you event with a live click event that binds newly loaded object correctly:

$('#my_trigger').live('click', function() {
  .. some code
})

would help to have more information from you on the exact way you are using this.

have a look at the jquery live docs

Upvotes: 2

Related Questions