Dynamically updating a table row using AJAX

Question

Normally, I'm a big stickler for jfGit, but I've been looking all over the web and can't get this code to work.

My setup:

• index.php - a page containing a table populated by data from a mysql database.
• update.php - a php script able to output a table row in html

Intention

What I want to do: by clicking on a link or button, a specific table row is updated.

Current solution

This is the code as I tried it so far.

Ajax/jQuery code, right under the body tag (is that the right location?):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a.pop').click(function() { 
var popID = $(this).attr('rel');
$.ajax({
        url: 'update.php',
        method: 'GET',
        data: 'userID=' + popID,
        success: function(returnData){
             $(popID).html(data);
              $(popID).dialog();
              alert('Load was performed.');
        }
    });
});
});
</script>

And the table code (printed using php):

echo "<div id=\"$ID\">";
// all tr + td from table
echo "<td><a href=\"#\" id=\"clickingEvent\" class=\"pop\" rel=\"$ID\">Update</a></td>\n";
echo "</tr>\n";
echo "</div>";

Result

Currently, I don't get any result at all, AJAX isn't even loading the php page. After I click the update button, nothing happens.

Any help would be greatly appreciated, thank you in advance :)

EDIT:

The partial solution

The Ajax part of the code now properly works, thanks to all for your input!

What happens now though is that it adds a NEW row in front of the table tag, and the old row remains. When I take a look at the generated source it says that there's a new row with the div id of 'popID' that I specified. Scrolling down, it appears that the div tag of the old row was removed.

Any way I could solve that?

Solution 1

Try replacing the ajax function with this:

$.get('update.php',{userID: popID}, function(data) {
       $("#" + popID).html(data);
       $("#" + popID).dialog();
       alert('Load was performed.');
});

In addition, instead of $("a.pop").click(...), use: $(document).on('click', 'a.pop', function () { ...});

This will give the new button you're returning the same jQuery event

Solution 2

Note that you should add the retrieved data into popID. The correct way is modifying your function to:

$.ajax({
        url: 'update.php',
        method: 'GET',
        data: 'userID=' + popID,
        success: function(new_data){
             $(popID).html(new_data);
              $(popID).dialog();
              alert('Load was performed.');
        }
    });

Note that returnData now is new_data, and you append it with the same name

Comments

[Anthony Grist]

$.get() just calls $.ajax() in the jQuery code, so if you pass it arguments that match the properties given to $.ajax(), you're doing the same thing. Also, .live() is deprecated (and has been for quite some time now), don't use it yourself and don't suggest other people use it in your answers.

[Freeloader]

Thanks to everyone for answering, it's been a great help so far! Thanks to paulslater19's code, I got the Ajax part to work, it now loads the page and gets the proper table stuff. Problem is, instead of updating my current row, it adds a row in FRONT of the table tag. Is there any way I could fix that?

[paulslater19]

@Freeloader It could be because of your html - You should haven <td>s and <tr>s inside a <div>. The markup should be: <table><tr><td>Blah..</td></tr><tr><td>Row 2</td></tr></table>

[paulslater19]

@AnthonyGrist Thanks, I know $.get uses $.ajax, but thought it might simplify things. I've updated the code to use 'on' instead of 'live'. I knew that it was still being mapped to 'on', so didn't feel there was a big issue. Nevertheless, like you said it's depreciated, so I've updated the code

[Freeloader]

The html goes as follows: <tabe><div id="1"><tr><td>Value 1</td></tr></div></table>

[Freeloader]

It was a typo, but you're absolutely right :) Thanks for pointing out.

[paulslater19]

@Freeloader Remove the <div> and put the id on e.g. the <tr> instead. It's worth noting that ids shouldn't really start with a number, so you could make the id something like id=row1, id=row2 etc

[Freeloader]

I've made the id tag alphanumerical, removed the div and put it in the tr instead. Now it doesn't put the extra row in front of the table anymore, but it puts it all in one cell. I looked at the generated source and apparently it's now creating two tr tags, well, actually, it's creating a new tr tag within the old one, which is what the update.php page is outputting anyway, so that's right. When I removed the tr tag from the update.php and had it output like that, it didn't display anything though. Any suggestions?

[paulslater19]

@Freeloader are you sure that when you remove the <div> and <tr> from update.php, it doesn't work? Another suggestion is to use $("#" + popID).replaceWith(data); instead of $("#" + popID).html(data);