CODEWITHSUNDEEP
jqueryajaxhtml-tablerowupdating
Freeloader
Freeloader

Reputation: 23

Dynamically updating a table row using AJAX

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:

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?

Upvotes: 2

Views: 13345

Answers (4)

Paul Burilichev
Paul Burilichev

Reputation: 444

If you have in you update.php:

  1. an UPDATE sql statement
  2. query it with ajax and you DB is MySQL
  3. 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.

Upvotes: 0

paulslater19
paulslater19

Reputation: 5917

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

Upvotes: 2

Ahamed Mustafa M
Ahamed Mustafa M

Reputation: 3139

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

Upvotes: 0

Bernat
Bernat

Reputation: 1556

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

Upvotes: 2

Related Questions