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?

Technically, (for working's sake) you are free to put the script code anywhere in the page that you want when you are using `$(document).ready()`; if you _don't_ use that, then you will probably be surprised by what is available if the script remains in the head. — veeTrain, Apr 24 '12 at 11:37

score 2 · Answer 1 · answered Apr 24 '12 at 11:33

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

paulslater19 · Accepted Answer · 2012-04-24T12:13:51.077

2

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

edited Apr 24 '12 at 12:13

answered Apr 24 '12 at 11:34

paulslater19

5,869
1
28
25

`$.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. – Anthony Grist Apr 24 '12 at 11:42
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? – Freeloader Apr 24 '12 at 11:55
@Freeloader It could be because of your html - You should haven s and s inside a
. The markup should be:
Blah..
Row 2
– paulslater19 Apr 24 '12 at 12:10
@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 – paulslater19 Apr 24 '12 at 12:15
The html goes as follows:
Value 1
– Freeloader Apr 24 '12 at 12:40
@Freeloader Remove the
and put the id on e.g. the 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
– paulslater19 Apr 24 '12 at 12:49
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? – Freeloader Apr 24 '12 at 13:04
@Freeloader are you sure that when you remove the
and from update.php, it doesn't work? Another suggestion is to use `$("#" + popID).replaceWith(data);` instead of `$("#" + popID).html(data);`
– paulslater19 Apr 24 '12 at 14:44

score 0 · Answer 3 · answered Apr 24 '12 at 11:34

0

Should the $(popID).html(data); be $(popID).html(returnData); ? Or is it a typo ?

answered Apr 24 '12 at 11:34

Ahamed Mustafa M

3,069
1
24
34

It was a typo, but you're absolutely right :) Thanks for pointing out. – Freeloader Apr 24 '12 at 12:44

score 0 · Answer 4 · answered Oct 30 '16 at 11:28

If you have in you update.php:

an UPDATE sql statement
query it with ajax and you DB is MySQL
you try to update the record without changes, (I mean simple updating a row with the same data)

then... you must get nothing to be updated because it is superultrastrange bug in ajax query with specially UPDATE statement in your server-side script. But it will work if you before any saving (updating) data make some changes to it.

Use `REPLACE` statement instead.

I looked for this solution a lot of time, really too much. And I can't understand why it happens, because when I debug entire script with own params all works fine.

Dynamically updating a table row using AJAX

4 Answers4