jCommandes jQuery: Problèmes avec l'utilisation des bons sélecteurs pour insérer des données dans la ligne droite du tableau et le champ de saisie

Question

Dans mon programme, un utilisateur peut ajouter des clients et afficher des informations à leur sujet. Pour cet exemple, la table se compose de 3 lignes avec un champ de saisie. Ajout de ces lignes de table, fonctionne. Dans un premier temps, il doit indiquer le nom du client et recevoir des suggestions de la part de jQuery UI Autocomplete. Fonctionne bien aussi.

Maintenant le problème: Lorsque le nom est rempli, un appel Ajax obtient des données sur le client à partir d'un contrôleur, les données fournies sont correctes. Maintenant, ces données doivent être affichées dans les champs de saisie pour ce client et c'est là que le problème commence. Je pourrais seulement le faire fonctionner pour la ligne de table suivante qui suit directement, donc dans ce cas l'ID est mis dans le bon champ de saisie, mais je n'ai aucune idée comment le faire pour le champ de saisie d'adresse ou plus tard lignes de table.

Voici un exemple comment il devrait fonctionner: Le premier client est John (ID: 1, Adresse: Rue 1) la table devrait ressembler à ceci et de travailler de la manière suivante:

Client: John (via Autocomplete)

ID: 1 (données d'Ajax-appel et mis en dans ce domaine d'entrée)

Adresse: rue 1 (données d'Ajax-appel et mis en dans ce domaine d'entrée)

Voici mon HTML-Markup de la vue:

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     @Html.ValidationSummary(true, "") 

     <table id="customers"> 
      <tr> 
       <td>Name of Customer:</td> 
       <td><input type="text" class="customername" id="customername-0" name="customername[0]" placeholder=""></td> 
      </tr> 

      <tr> 
       <td>ID of Customer:</td> 
       <td><input type="text" class="customerid" id="customerid-0" name="customerid[0]" placeholder=""></td> 
      </tr> 

      <tr> 
       <td>Adresss of Customer:</td> 
       <td><input type="text" class="customeradress" id="customeradress-0" name="customeradress[0]" placeholder=""></td> 
      </tr> 
     </table> 
     <button class="" type="button" id="add-customer" name="add-customer" onclick="add_customer()">Add another Customer</button> 
    </div> 
} 

JavaScript pour ajouter des lignes de table (pas la façon la plus élégante, je sais):

<script> 
    // An array to store the ids of the customers 
    var customerIDArray = new Array(); 
    customerIDArray.push(""); 
    // An array to store the names of the customers 
    var customerNameArray = new Array(); 
    customerNameArray.push(""); 

    // An array to store the adresses of the customers 
    var customerAdressArray = new Array(); 
    customerAdressArray.push(""); 

    AutoCompleteCustomerName(); 
    AutoCompleteCustomerID(); 

    function add_customer() { 
     refresh_customerNameArray(); 
     refresh_customerIDArray(); 
     customerNameArray.push(""); 
     customerIDArray.push(""); 

     refresh_table(); 
    } 


    function refresh_customerNameArray() { 
     for (i = 0; i < customerNameArray.length; ++i) { 
      customerNameArray[i] = $("#customername-" + i).val(); 
     } 
    } 

    function refresh_customerIDArray() { 
     for (i = 0; i < customerIDArray.length; ++i) { 
      customerIDArray[i] = $("#customerid-" + i).val(); 
     } 
    } 

    function refresh_customerAdressArray() { 
     for (i = 0; i < customerAdressArray.length; ++i) { 
      customerIDArray[i] = $("#customeradress-" + i).val(); 
     } 
    } 

    function refresh_table() { 
     var htmlMarkup = '<table id="customers">' 

     if (customerNameArray.length == 1) { 
      htmlMarkup += 
       '<tr>'+ 
       '<td>Name of Customer:</td>'+ 
       '<td><input type="text" class="customername" id="customername-0" name="customername[0]" placeholder="" value="' + customerNameArray[0] + '"></td>' + 
       '</tr>'+ 

       '<tr>'+ 
       '<td>ID of Customer:</td>'+ 
       '<td><input type="text" class="customerid" id="customerid-0" name="customerid[0]" placeholder="" value="'+ customerIDArray[0] +'"></td>'+ 
       '</tr>'+ 

       '<tr>' + 
       '<td>Adresss of Customer:</td>' + 
       '<td><input type="text" class="customeradress" id="customeradress-0" name="customeradress[0]" placeholder=""></td>' + 
       '</tr>' 
     } 

     else { 
      for (var i = 0; i < customerNameArray.length; i++) { 
       htmlMarkup += 
       '<tr>' + 
       '<td>Name of Customer:</td>' + 
       '<td><input type="text" class="customername" id="customername-' + i + '" name="customername['+ i +']" placeholder="" value="' + customerNameArray[i] + '"></td>' + 
       '</tr>'+ 

       '<tr>' + 
       '<td>ID of Customer:</td>' + 
       '<td><input type="text" class="customerid" id="customerid-' + i +'" name="customerid['+ i +']" placeholder="" value="' + customerIDArray[i] + '"></td>' + 
       '</tr>'+ 

       '<tr>'+ 
       '<td>Adresss of Customer:</td>'+ 
       '<td><input type="text" class="customeradress" id="customeradress-' + i + '" name="customeradress['+ i +']" placeholder=""></td>'+ 
       '</tr>' 
      } 
     } 
     htmlMarkup += 
     '</table>' 
     $("#customers").html(htmlMarkup); 
     AutoCompleteCustomerName(); 
     AutoCompleteCustomerID(); 
    } 
</script> 

Mon autocomplete-fonction:

<script> 
    function AutoCompleteCustomerName() { 
     $(".customername").autocomplete({ 
      source: "/Home/AutoCompleteCustomerName", 
      select: function(event, ui) { 
      } 
     }); 
    } 
</script> 

L'Ajax-Call et la solution actuelle pour la ligne de table suivante:

<script> 
    function AutoCompleteCustomerID() 
    { 
     $('.customername').on('focusout', function() { 
      var $id = $(this).closest("tr").next().find(".customerid"); 
      var self = $(this); 
      $.ajax({ 
       type: "GET", 
       url: "/Home/AutoCompleteCustomerID", 
       data: { name: $(self).closest("tr").find(".customername").val()}, 
       contentType: "application/json", 
       dataType: "json", 
       success: function (result) { 
        $id.val(result.id); 
       } 
      }) 
     }); 
    } 
</script> 

Donc je serais Si vous pouviez me donner un conseil ou un indice sur la façon dont cela pourrait être résolu, je suis assez nouveau pour JavaScript et jQuery et j'ai encore beaucoup à apprendre.

Answer 1

Je ne suis pas sûr que c'est ce que vous avez besoin, vous pouvez essayer cette

var $street = $($id).closest("tr").next().find(".customeradress"); 

Et ainsi de suite avec d'autres domaines qui vont dans les lignes suivantes. NB: Je suppose que les lignes de table liées sont déjà dans la page lorsque vous appelez la saisie semi-automatique, il semble que cela.

Ainsi, votre saisie semi-automatique peut devenir

<script> 
    function AutoCompleteCustomerID() 
    { 
     $('.customername').on('focusout', function() { 
      var $id = $(this).closest("tr").next().find(".customerid"); 
      var $street = $($id).closest("tr").next().find(".customeradress"); 
      var self = $(this); 
      $.ajax({ 
       type: "GET", 
       url: "/Home/AutoCompleteCustomerID", 
       data: { name: $(self).closest("tr").find(".customername").val()}, 
       contentType: "application/json", 
       dataType: "json", 
       success: function (result) { 
        $id.val(result.id); 
        $street.val(result.street); 
       } 
      }) 
     }); 
    } 
</script> 

Une autre approche serait de travailler avec des attributs de données et id en fonction de ceux mais cela peut changer beaucoup de vos scripts.