Ajax request only works one time

Question

I have a select option which is working perfectly but only one time, the request does not executes again.

I think it's because of the 'onchange' event.

This is my ajax code :

jQuery(document).ready(function($) {
$('#referenceProduit').change(function(){
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
    var req=$('#referenceProduit').val();
    //requête ajax, appel du fichier function.php
    $.ajax({
        type: "POST",
        url: "include/php.php",
        data: "referenceProduit="+req,
        dataType : "json",
        //affichage de l'erreur en cas de problème
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
        },
        //function s'il n'y a pas de probleme
        success:function(data){
            //On affiche la réponse du serveur
            $('.produit').empty();
            $('.produit').prepend(data.produit);
            $('input[name="designation"]').val(data.resDisplayForm.designation);
            $('input[name="prix"]').val(data.resDisplayForm.prix);
        }
    });
});
});

HTML code :

    <div class="form-group">
  <label for="referenceProduit" class="col-sm-1 control-label">Reference</label>
  <div class="col-sm-2">
    <select class="form-control" name="referenceProduit" id="referenceProduit">
      <option selected="selected" disabled="disabled">Choisir</option>
      <?php foreach($lesProduits as $unProduit){?>
      <option name="<?php echo $unProduit['id'];?>" value="<?php echo $unProduit['id'];?>"><?php echo $unProduit['reference']?></option>
      <?php } ?>
    </select>
  </div>
</div>
<div class="form-group">
  <div class="produit"></div>
</div><br/><br/>

Is the `#referenceProduit` element inside the `.produit` element? (In which case it would be deleted and recreated by your success function, after which it wouldn't have a `change` handler.) — nnnnnn, Sep 13 '16 at 07:49
.produit is the div where the result appears and #referenceProduit the name of my select so it can be inside. (edited) — Lucas Frugier, Sep 13 '16 at 07:54
Did you try adding a random str at the end of your request ? — passion, Sep 13 '16 at 07:55

score 1 · Answer 1 · answered Sep 13 '16 at 07:55

1

You should map to

.on(eventType, selector, function)

example

$('#parentElement').on('change', '#referenceProduit', function)

answered Sep 13 '16 at 07:55

Dhara

1,431
4
29
47

I guess the problem is not here , all options loaded already . – passion Sep 13 '16 at 08:01

Ajax request only works one time

1 Answers1