WordPress : remplir les champs de formulaire dans une boucle avec ajax
La première rangée ne fonctionne que dans ma rangée.
<?PHP for ($i = 1; $i <= 20; $i++){ ?>
<div id="lines" class="row">
<div class="col-sm-1" style="text-align:left;border:1px solid #808080"><span id="row_number"><?PHP if ( $i < 10 ){ echo "0".$i;}else{echo $i;} ?></span></div>
<div class="col-sm-2" style="text-align:left;border:1px solid #808080">
<select id="part_number" style="border:0px;">
<option value="None Selected"></option>
<?PHP
$partNumbers = $wpdb->get_results("SELECT * FROM _cif_inventory_table;");
foreach ($partNumbers as $partNumber) {
echo '<option value="'.$partNumber->part_number.'">'.$partNumber->part_number.'</option>';
}
?>
</select>
</div>
<div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input size="5" maxlength="5" id="quantity" value="" /></div>
<div class="col-sm-6" style="text-align:left;border:1px solid #808080"><input size="75" id="description-<?PHP echo $i; ?>" value="" /></div>
<div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input id="unitPrice-<?PHP echo $i; ?>" /></div>
<div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input id="amount" value="" /></div>
</div><!-- end .row -->
<?PHP } ?>
Je suis à peu près sûr que ce sont les identifiants qui ne fonctionnent pas comme prévu car ils sont tous identiques, j’ai donc décidé d’ajouter mon compteur de boucle à mon identifiant <input size="75" id="description-<?PHP echo $i; ?>" value="" />
et <input id="unitPrice-<?PHP echo $i; ?>" />
mais je ne sais pas comment obtenir cela du côté ajax que j’ai essayé de faire c’est comme
METTRE À JOUR
$.ajax({
url: '<?PHP echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'description', part_number: part_number },
success: function(data) {
for ( var i = 1; i <= 20; i++ ) {
$('#description-' + i).val( data );
}
}
});
mais cela remplit chaque champ de description sur la sélection de la liste déroulante sur la ligne 1.
Solution n°1 trouvée
Tout d’abord, changez votre boucle en javascript au lieu de php.
for (var i = 1; i <= 20; i++) {
}
Ensuite, ajoutez une concaténation de chaînes pour l’ID.
for (var i = 1; i <= 20; i++) {
$('#description-' + i).val( data );
}
Voilà comment sélectionner correctement l’élément HTML, cependant, avec votre code actuel, toutes leurs valeurs seront définies sur la même valeur.
Solution n°2 trouvée
Vous devez éviter de générer du javascript pour chaque ligne. Imaginez ce qui se passe si vous avez 100 lignes par page. Vous pouvez utiliser data-value en HTML, puis obtenir la valeur en js. Ceci est votre html :
<input type="text" data-name="test" data-value="123" data-id="123" class="myinput"/>
Et cela peut être votre js :
$(".myinput").click(function(){
var name=$(this).data("name");
var value=$(this).data("value");
var id=$(this).data("id");
});
0 commentaire