J'essaie de boucler la méthode OnChange via un appel AJAX mais, étonnamment, cela ne fonctionnera pas.
for (let index = 0; index < 300; index++) {
$('#txtLini'+[index]).on('change', function() {
var lini=this.value;
$.ajax({
url:'<?=base_url()?>index.php/fin/controller/M_index/getKode',
method: 'post',
data: {lini: lini},
dataType: 'json',
success: function(response){
$.each(response,function(index,data){
console.log(index);
document.getElementById("txt_sumberdaya"+[index]).value = data['TEXT'];
});
}
});
});
}
Dans mon javascript ci-dessus, j'essaye de boucler ma zone de texte id à traiter dans un appel ajax. J'ai de nombreux identifiants (txtLini0, txtLini1, txtLini2, etc.) et de nombreuses possibilités également dans chaque identifiant que l'utilisateur souhaite choisir. Par conséquent, j'utilise id pour être une variable particulière dans la méthode OnChange . Quel type d'utilisateur dans chaque identifiant peut affecter dans un autre id (txt_sumberdaya0, txt_sumberdaya1, txt_sumberdaya2, etc.) avec une sortie dans Onchange Ajax.
I ' J'ai essayé de boucler comme ça mais ça ne fonctionnera pas comme je le veux. Par exemple:
Si l'utilisateur saisit l'id txtLini0 , la sortie d'ajax doit être remplie dans txt_sumberdaya0 . et ainsi de suite.
Mais ici, mon erreur s'est produite lorsque j'ai essayé de remplir id txtLini1 ou txtLini2 la sortie d'ajax était toujours remplie txt_sumberdaya0 . Il semble que ma boucle d'index continue à fonctionner à 0 à chaque processus de réussite ajax.
Y a-t-il quelqu'un qui peut corriger mon code ou d'autres idées pour le clarifier? Merci.
3 Réponses :
après avoir examiné à nouveau votre code, la raison pour laquelle vous obtenez le 0 est que l'index passé dans votre each $ .each (res, function (index, data) la valeur de l'index dépendra de la longueur des données dans votre réponse de tableau, donc si elle est à 1, l ' index de la boucle foreach sera toujours par défaut à 0 pour corriger cela est un simple changement le nom de index à pour ex i $ .each (res, function (i, data)
ou si vous ne l'utilisez pas, supprimez-le et passez directement l'index de la boucle externe
votre code final devrait ressembler à ceci
for (let index = 0; index < 300; index++) {
$('#txtLini'+[index]).on('change', function() {
var lini=this.value;
$.ajax({
url:'<?=base_url()?>index.php/fin/controller/M_index/getKode',
method: 'post',
data: {lini: lini},
dataType: 'json',
success: function(response){
$.each(response,function(data){
console.log(index); // the index you will get here is the index of the outer loop
document.getElementById("txt_sumberdaya"+[index]).value = data['TEXT'];
});
}
});
});
}
Utilisez la délégation d'événements. Lorsqu'un événement se produit en Javascript, il "bouillonne" vers les éléments parents. Cela signifie que si vous avez:
$('#foo').on('change', 'input', (e) => // ...
Vous pouvez utiliser un seul écouteur d’événement pour tous:
<div id="foo"><!-- lots of inputs --></div>
Mais comment le savez-vous quelle entrée a déclenché l'événement? Cet argument e aura à la fois les propriétés target et currentTarget , qui vous donnent à la fois l'élément auquel vous avez attaché le gestionnaire d'événements et l'élément qui a déclenché l'événement.
En utilisant ces propriétés d'événement, vous devriez obtenir l'index correct pour l'entrée qui a déclenché l'événement. Sinon, vous pouvez également éviter d'utiliser les fonctions => , et dans ce cas, vous pouvez simplement utiliser this pour faire référence à input . P >
Pour plus d'informations, consultez: https://learn.jquery.com/events/ délégation-événement /
Merci à @machineghost pour les conseils mais je ne comprends toujours pas comment implémenter un seul écouteur d'événement comme vous l'avez mentionné pour mon cas ci-dessus.
Pour le moment, vous avez $ ('# txtLini' + [index]). On ('change' . Remplacez-le par `$ ('# parentElement'). On ('change', 'input' `. Ce dernier dit" écoutez tous les événements de changement qui se produisent sur les événements d'entrée à l'intérieur de #parentElement ".
Vous pouvez utiliser l'approche ci-dessous en utilisant des classes pour lier un événement onChange . Ce que vous faites dans la réponse AJAX est faux. là, vous n'avez besoin d'aucune boucle.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> INput : <input type="text" id="txtLini1" class="txtLini" /> Copy input : <input type="text" id="txt_sumberdaya1" class="txt_sumberdaya" /> </div> <div> INput : <input type="text" id="txtLini2" class="txtLini" /> Copy input : <input type="text" id="txt_sumberdaya2" class="txt_sumberdaya" /> </div> <div> INput : <input type="text" id="txtLini3" class="txtLini" /> Copy input : <input type="text" id="txt_sumberdaya3" class="txt_sumberdaya" /> </div> <div> INput : <input type="text" id="txtLini4" class="txtLini" /> Copy input : <input type="text" id="txt_sumberdaya4" class="txt_sumberdaya" /> </div>
$('.txtLini', document).each(function(index, item) {
$(item).on('change', function() {
var lini = this.value;
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/' + (index + 1),
method: 'get',
// data: {
// lini: lini
// },
// dataType: 'json',
success: function(response) {
// console.log($('#txt_sumberdaya' + (index + 1)));
$('#txt_sumberdaya' + (index + 1)).val(JSON.stringify(response));
}
});
});
})
merci pour le conseil @ shyammakwana.me mais comment passer la variable que l'utilisateur saisit à l'URL? Je viens d'envoyer 1,2,3 dans cette URL.
qu'y a-t-il dans votre variable? un texte d'une entrée? si oui, vous pouvez obtenir une saisie de texte par $ (this) .val ()