1

I have a problem updating MySQL rows using Jquery.

This is my current code.

<script type="text/javascript">
$(document).ready(function(){
$(".insert").click(function(){

var id=$("#id").val();
var ip=$("#ip").val();
var permissions=$("#permissions").val();
var password=$("#password").val();
var key=$("#key").val();

$.post('myscript.php?action=updateAPIuser', {id: id, ip: ip, permissions: permissions,     password: password, key:key },
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); 
});
return false;
});
});   
</script>

This is the html:

<table width="100%" border="0" cellspacing="1" cellpadding="3">
<tr>
<th>Customer</th>
<th>Permission</th>
<th>IP</th>
<th>Key</th>
<th>Password</th>
<th>Date added</th>
<th>Action</th>
</tr>
<tr class="record" id="record-1"><td>John Doe</td>
<td><select id="permissions" name="permissions" />
<option value="ro" selected>Read Only</option>
<option value="rw">Read Write</option>
</select></td>
<td><input type="text" id="ip" name="ip" value="1.1.1.13">
<input type="hidden" id="id" name="id" value="1"></td>
<td><input type="text" id="key" name="key" value="mijnkey"></td>
<td><input type="text" id="password" name="password" value="password000"></td>
<td>2012-10-24 20:48:25</td><td><a class="insert" title="Update data" href="#"><img src="images/icons/save.png" title="Save" alt="Save"></a> 
</td></tr>

<tr class="record" id="record-2"><td>Jane Doe</td>
<td><select id="permissions" name="permissions" />
<option value="ro" selected>Read Only</option>
<option value="rw">Read Write</option>
</select></td>
<td><input type="text" id="ip" name="ip" value="2.2.1.13">
<input type="hidden" id="id" name="id" value="1"></td>
<td><input type="text" id="key" name="key" value="janeskey"></td>
<td><input type="text" id="password" name="password" value="pass000"></td>
<td>2012-10-24 20:48:25</td><td><a class="insert" title="Update data" href="#"><img src="images/icons/save.png" title="Save" alt="Save"></a> 
</td></tr>
</table>

And ofcourse I have php for updating the MySQL row.

The problem is this: When I click on Save (aka Update) the Jquery always updates the row with ID 1. No matter what row I click.

So my question is: how can I change the code, so that the correct row gets updates?

Cheers, Hub

PS This is my PHP-code for updating the row:

function updateAPIuser($req){
global $db_whmcs, $_LANG;    

$id = $req['id'];
$ip = $req['ip'];
$permissions = $req['permissions'];
$password = $req['password'];
$key = $req['key'];
$updated = date("Y-m-d H:i:s");

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0



  $query = "UPDATE `mod_powerdns_api` SET 
`ip` = '".$ip."',
`key` = '".$key."',
`permissions` = '".$permissions."',
`updated` = '".$updated."', 
`password` = '".$password."' 
WHERE `id` = ".$id;

mysql_query($quer) or pdns_die('Can not update user'.mysql_error());

} // end

2
  • can you share your sql/php code? Oct 25, 2012 at 20:10
  • Most likely a missing or incorrect WHERE clause. Show your PHP code please. Oct 25, 2012 at 20:11

2 Answers 2

0

First of all you shouldn't use duplicate id's.

From http://www.w3schools.com/tags/att_global_id.asp

Definition and Usage

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

You can get the correct id by using the following code:

var id = $(this).find('[name="id"]').val();

The other elements can also be found the same way:

$(".insert").bind('click', function(){
    var tr = $(this).parents('tr');

    var id = tr.find('[name="id"]').val();
    var ip = tr.find('[name="ip"]').val();
    var permissions = tr.find('[name="permissions"] option:selected').val();
    var password = tr.find('[name="password"]').val();
    var key = tr.find('[name="key"]').val();
});
1
  • Ah, that's because $(this) is the "a" element in this case, because that element was clicked. I updated the code, it should work now. Oct 25, 2012 at 20:55
0

The problem in your code is because of Duplicated ' id's in your HTML

In such cases you can use classes .. Try removing the id attribute completely..

Try this method..

$(".insert").click(function(clickmychick){

    var $tr = $(this).closest('tr') ;  // Cache the closest tr

    var id= $tr.find('[name="id"]')val();
    var ip= $tr.find('[name="ip"]')val();
    var permissions=$tr.find('[name="permissions"] option:selected').attr('value');
    var password= $tr.find('[name="password"]')val();
    var key= $tr.find('[name="key"]')val();
}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.