jQuery, update the right field
I am building an invoice system, where I will use jQuery, to update fields.
I was thinking to pull the price, and description for the number (if available), and put them into the textfields, thus making it easy to change, if there should be some 'at-the-counter' adjustments to the invoice.
The html code looks like this:
<table>
<tr class="item-row">
<td class="partNumber"><input type="text" name="partNo"></input></td>
<td class="description"><input type="text" name="description"></input></td>
<td class="price"><input type="text" name="price"></input></td>
</tr>
</table>
The jQuery code, which is the part I am not so familiar with, looks like this:
$(document).ready(function() {
$(".partNo").keyup(getInfo);
});
function getInfo(){
var row = $(this).parents('.item-row');
var partNo = row.find(".partNo").val();
row.find(".description input")
.load("script.php", {vorunr: $(".partNo").val(), type: "desc"});
row.find(".price input")
.load("script.php", {vorunr: $(".partNo").val(), type: "price"});
}
This code works fin开发者_高级运维e, the file script.php returns the values from the database.
My problem is that, all my table rows are updated, when I edit the first partNumber input field.
Can someone help me out?
you are using the selector ".partNo" many times but I see no html dom element with a class of "partNo". I see a input field with the name "partNo".
so bind the keyup event to
$('input[name="partNo"]').keyup(getInfo);
Also, here is my suggested solution for your getInfo function...
function getInfo(){
var row = $(this).parents('.item-row');
var partNo = $(this).val();
row.find(".description input")
.load("script.php", {vorunr: partNo, type: "desc"});
row.find(".price input")
.load("script.php", {vorunr: partNo, type: "price"});
}
Try using .closest() instead of .parents(). Also, you don't have a class named "partNo", just an input under the td with class "partNumber" (maybe try $('.partNumber input').keyup(...);
Also, you may want to look into json_encode and populate the fields with a single query to script.php instead of a couple of loads. You could do:
script.php
<?php
$partNo = $_GET['vorunr'];
// perform query to gather the data and populate $dbrow
header('Content-Type: application/json'); // make sure browser knows what it is
echo json_encode(Array(
'desc' => $dbrow['description'],
'price' => $dbrow['price']
));
?>
then use something like
$('.partNumber input').keyup(function(){
var row = $(this).closest('.item-row');
var partNumber = $(this).val();
$.getJSON('<?php echo $_SERVER['PHP_SELF']; ?>',{vorunr:partNumber},function(data,textStatus,xhr){
$('.description input',row).val(data.desc);
$('.price input',row).val(data.price);
});
});
EDITv2
Here's a sample (Self-sufficient) file you can run and see what I mean.
<?php
// handle the ajax query
if (isset($_GET['vorunr'])) // make sure you validate this variable; I'm not doing so for the sake of demo.
{
header('Content-Type: application/json');
echo json_encode(Array(
'desc' => $_GET['vorunr'],
'price' => sprintf('%0.2f',rand(100,99999)/100)
));
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax Sample</title>
<!-- MAKE SURE YOU DON'T USE THIS REFERENCE IN PRODUCTION -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="Text/javascript">
$(document).ready(function(){
$('.partNumber input').keyup(function(){
var row = $(this).closest('.item-row');
var partNumber = $(this).val();
$.getJSON('<?php echo $_SERVER['PHP_SELF']; ?>',{vorunr:partNumber},function(data,textStatus,xhr){
$('.description input',row).val(data.desc);
$('.price input',row).val(data.price);
});
});
});
</script>
</head>
<body>
<table>
<tr class="item-row">
<td class="partNumber"><input type="text" name="partNo"></input></td>
<td class="description"><input type="text" name="description"></input></td>
<td class="price"><input type="text" name="price"></input></td>
</tr>
<tr class="item-row">
<td class="partNumber"><input type="text" name="partNo"></input></td>
<td class="description"><input type="text" name="description"></input></td>
<td class="price"><input type="text" name="price"></input></td>
</tr>
<tr class="item-row">
<td class="partNumber"><input type="text" name="partNo"></input></td>
<td class="description"><input type="text" name="description"></input></td>
<td class="price"><input type="text" name="price"></input></td>
</tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论