1
votes

Comment déclencher un changement de méthode () dans jQuery qui lance une requête ajax

J'ai un élément html sélectionné avec une liste de département. Quand j'en sélectionne une (méthode «change»), elle lance une requête ajax dans jquery, qui affichera dans une autre entrée de sélection, une liste de villes extraites d'une base de données.

Tout fonctionne bien, mais j'ai un cas où je Je veux pouvoir récupérer les valeurs stockées pour les éléments de sélection de département et de ville, et en même temps je veux pouvoir les modifier.

J'ai essayé d'utiliser jQuery .trigger ("change" ), mais cela n'entre pas dans ma fonction de modification.

J'ai essayé de faire ce qui est écrit ici, mais il n'y avait aucune différence. jquery déclenche un changement avec une sélection ajax chaînée

Mon fichier html:

$(document).ready(function(){
        var departement = ${spot.departement.code};
        var ville = ${spot.ville.id};
        $("#departement option[value="+departement+"]").prop('selected', true);
        $('#departement').trigger("change");
        $("#ville option[value="+ville+"]").prop('selected', true);

        $('#departement').change(function() {
            var choixDep = $('#departement').val();
            $.getJSON("choixDepartement.do",{codeDep: choixDep},
                function (data) {
                    $("#ville").empty();
                    var option = "<option value=''>Choisissez une ville</option>";
                    $("#ville").append(option);
                    $.each( data, function(key, val) {
                        .....
                       ajax callback treatment
                       ........
                    });
                }
            );
        });
    });

Mes méthodes Jquery:

<div class="inscriptionForm">
    <label for="departement">DÃ©partement :</label>
    <select name="departement" id="departement" required="required">
        <option value="">Choisissez un dÃ©partement</option>
        <c:forEach items="${departements}" var="departement">
            <option value="${departement.code}">${departement.code} - <c:out value="${departement.nom}"/></option>
        </c:forEach>
    </select>
</div>

<div class="inscriptionForm">
    <label for="ville">Ville :</label>
    <select name="ville" id="ville" required="required">
        <option value="">Choisissez une ville</option>
        <c:forEach items="${villes}" var="ville">
            <option value="${ville.id}"><c:out value="${ville.nom}"/></option>
        </c:forEach>
    </select>
</div>

Je ne comprends pas pourquoi il n'entre pas dans la méthode .change();.

javascript jquery ajax jquery-events

1 commentaires

Vous appelez trigger ('change') avant de définir le gestionnaire d'événements. Changez l'ordre.

4 Réponses :

1
votes

Votre code devrait quelque chose comme ceci

$(document).ready(function(){
    var departement = ${spot.departement.code};
    var ville = ${spot.ville.id};
    $("#departement option[value="+departement+"]").prop('selected', true);

    $("#ville option[value="+ville+"]").prop('selected', true);

    $('#departement').change(function() {
        var choixDep = $('#departement').val();
        $.getJSON("choixDepartement.do",{codeDep: choixDep},
            function (data) {
                $("#ville").empty();
                var option = "<option value=''>Choisissez une ville</option>";
                $("#ville").append(option);
                $.each( data, function(key, val) {
                    .....
                   ajax callback treatment
                   ........
                });
            }
        );
    });
    $('#departement').trigger("change");
});

Dans Jquery, nous devons d'abord définir l'événement, puis nous devons le déclencher

2 commentaires

Merci beaucoup ! Je ne savais pas ça. Cela fonctionne maintenant, mais je rencontre un autre problème. Une fois mon élément departement chargé, la requête ajax est envoyée et charge l'élément ville. Si j'essaye de faire $ ("# ville option [value =" + ville + "]"). Prop ('selected', true); après mon $ ('# departement') .trigger ("change"); , il est exécuté avant. Je ne peux donc pas sélectionner mon option ville, car elle est vide à ce moment-là *

d'accord dans ce cas, ajoutez votre code de déclenchement dans la méthode setTimeout dans votre cas, la dernière ligne ressemblera à quelque chose comme ceci setTimeout (function () {$ ('# departement'). trigger ("change");}, 0) ;

1
votes

Pour être exécuté, un eventListener doit être déclaré avant le déclencheur.

0 commentaires

0
votes

Encore une fois merci. Cela fonctionne après avoir déclaré la fonction change () avant, mais je ne comprends toujours pas comment sélectionner une valeur dans ma liste d'options "ville", même avec vos conseils avec le setTimeout à 0. L'ordre d'exécution me semble assez étrange. Je ne connais probablement pas assez jQuery. Jusqu'à présent, mon code ressemble à ça, et la liste ville reste sans valeur sélectionnée.

    var departement =${spot.departement.code};
    var ville =${spot.ville.id};

    $("#departement option[value="+departement+"]").prop('selected', true);

    alert(departement);
    alert(ville);

        $('#departement').change(function() {
            var choixDep = $('#departement').val();
            $.getJSON("choixDepartement.do",{codeDep: choixDep},
                function (data) {
                    $("#ville").empty();
                    var option = "<option value=''>Choisissez une ville</option>";
                    $("#ville").append(option);
                    $.each( data, function(key, val) {
                        var valToString = val.toString();
                        var valToArray = valToString.split(",");
                        var option = "<option value=" + valToArray[0] + ">" + valToArray[1] + "</option>";
                        $("#ville").append(option);
                    });
                }
            );
        });

        setTimeout(function(){$('#departement').trigger("change");},0);

        $("#ville option[value="+ville+"]").prop('selected', true);

Ma valeur ville, et la liste est là, mais la valeur n'est pas sélectionnée p >

0 commentaires

0
votes

D'accord, j'ai trouvé la réponse complète à mon problème. C'était évidemment d'abord le problème de l'ordre de déclaration. La fonction .change () aurait dû être déclarée avant d'être appelée. Mais alors cela ne fonctionnait pas car la requête Ajax prenait un certain temps, et le $ ("# ville option [value =" + ville + "]"). Prop ('selected', true); a été exécuté avant que la requête ne transmette le résultat. Donc, je viens de mettre cette ligne après la requête ajax et maintenant cela fonctionne correctement. Voici donc le code final:

       var departement =${spot.departement.code};

       $('#departement').change(function() {
            var choixDep = $('#departement').val();
            $.getJSON("choixDepartement.do",{codeDep: choixDep},
                function (data) {
                    $("#ville").empty();
                    var option = "<option value=''>Choisissez une ville</option>";
                    $("#ville").append(option);
                    $.each( data, function(key, val) {
                        var valToString = val.toString();
                        var valToArray = valToString.split(",");
                        var option = "<option value=" + valToArray[0] + ">" + valToArray[1] + "</option>";
                        $("#ville").append(option);
                    });
                    $("#ville option[value="+ville+"]").prop('selected', true);
                }
            );
        });

        $("#departement option[value="+departement+"]").prop('selected', true);

        $('#departement').trigger("change");

0 commentaires