jQuery, mettre à jour le champ de droite

Je construis un système de facturation, où j'utiliserai jQuery, pour mettre à jour les champs. Je pensais tirer le prix, et la description du nombre (si disponible), et les mettre dans les champs de texte, le rendant ainsi facile à changer, s'il devrait y avoir des ajustements «au comptoir» pour la facture.jQuery, mettre à jour le champ de droite

Le code HTML ressemble à ceci:

<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>

Le code jQuery, qui est la partie que je ne suis pas au courant, ressemble à ceci:

$(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"}); 
}

Ce code fonctionne très bien, la Le fichier script.php renvoie les valeurs de la base de données.

Mon problème est que toutes mes lignes de table sont mises à jour, lorsque je modifie le premier champ de saisie partNumber.

Quelqu'un peut-il m'aider?

Source

2010-12-29 Ragnar123

vous utilisez le sélecteur ".partNo" plusieurs fois mais je ne vois pas d'élément html dom avec une classe de "partNo". Je vois un champ de saisie avec le nom "partNo".

donc lier l'événement à keyup

$('input[name="partNo"]').keyup(getInfo);

De plus, voici ma solution proposée pour votre fonction getInfo ...

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"}); 
}

Source

2010-12-29 23:27:56 jondavidjohn

Merci, vous avez fait ma journée! – Ragnar123

Comprenez-vous pourquoi cela fonctionne? d'autres questions sur pourquoi cela fonctionne? – jondavidjohn

Essayez d'utiliser .closest() au lieu de .parents(). En outre, vous ne disposez pas d'une classe nommée « partNo », juste une entrée sous la td avec classe « partNumber » (peut-être essayer $('.partNumber input').keyup(...);

, vous pouvez également regarder dans json_encode et remplir les champs avec une seule requête . à script.php au lieu d'un couple de charges Vous pourriez faire:

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'] 
)); 

?>

alors utiliser quelque chose comme

$('.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

Voici un exemple de fichier (autonome) que vous pouvez exécuter et voir ce que je veux dire.

<?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>

Source

2010-12-29 23:31:53

Merci d'avoir mentionné json_encode. Je vais regarder maintenant :-) – Ragnar123

@ Ragnar123: Jetez un oeil à ma mise à jour, il y a un morceau de code que vous pouvez exécuter tel quel et le voir fonctionner en direct. Il suffit d'insérer votre requête dans la base de données pour sauvegarder le résultat et cela devrait fonctionner correctement. ;-) –

jQuery, mettre à jour le champ de droite

Répondre

Questions connexes