0

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

3
  • 1
    Could you post the relevant parts of the AJAX routine and HTML? Commented Feb 15, 2012 at 1:21
  • Extra code has been added. Thanks! Commented Feb 15, 2012 at 1:48
  • A button with an OnClick Commented Feb 15, 2012 at 11:17

4 Answers 4

2

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

Sign up to request clarification or add additional context in comments.

3 Comments

What does this have to do with the question? There are no click handlers or any other handlers in the code.
Thanks for your reply. When I researched before I posted I saw a lot of people linking to using on(). But as Jacob said, I couldn't see were I was using the click handler. So it just left me confused! Thanks
@Jacob agreed, it would be good to see more code. but often this is the case so i though it useful to point it out. should i remove my answer? i am not quite sure of the etiquette.
2

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.

Comments

0

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);
    });
});

2 Comments

Hi, this isn't working but is exactly what I was after? It's not coming up with any errors in the error console, and it doesn't seem to do anything! I've tried putting it in document.ready and all that to no avail. Is there something wrong with this line : $('#resultstable').on('click', 'tbody tr', function() { . Just to confirm, the idea is there is a table which when clicked the row will turn red and then when another line is clicked that line will turn red and the other line will become normal again. That is what I am after. Thanks soo much!
That's what it will do. That line you mentioned assumes that the structure of your table has a tbody. I made that assumption when I saw that your code made use of a thead. If there is no tbody, try adding that in.
0

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

2 Comments

Sorry I dont understand how or what to do for this? Could you please explain?
when you load some html elements by ajax your function wont fire events for that newly added items. For solve this situation you have to initliaze your events again and for that my choice is past your event to newly loaded page in document.ready

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.