CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
balteo
balteo

Reputation: 24659

Javascript issue with JQuery chosen and my calling code

The following code is exhibiting a very strange behavior...

I have two html selects: one for regions and another one for departments bearing in mind that for one selected region I am trying to load the corresponding departments.

The first html select (region) is populated upon normal page load and the second html select (departments) by an ajax call retrieving JSON from the server.

I use jquery chosen.

The strange behavior I am referring to is as follows:

Javascript:

$(document).ready(function() {
    $(".chzn-select").chosen({no_results_text: "No results matched"});
    var geolocationRegionSelect = $("#geolocationRegionSelect");
    var geolocationDepartmentSelect = $("#geolocationDepartmentSelect");
    geolocationRegionSelect.bind('change', function(event) {
        $.get("/kadjoukor/geolocations/findDepartmentsByRegion?regionId="+$(this).val(), function(result){
            geolocationDepartmentSelect.empty();
            $.each(result, function() {
                geolocationDepartmentSelect.append($("<option />").val(this.id).text(this.department));
            });
        }, 'json');
        $(".chzn-select").trigger("liszt:updated");
    });
});

Here is the corresponding html:

<div class="control-group">
        <label class="control-label" for="geolocationRegionSelect">geolocation region</label>
        <div class="controls">
            <select id="geolocationRegionSelect">
                <option th:value="''" th:text="'Non renseigne'"></option>
                <option th:each="geolocationRegion: ${geolocationRegions}" th:value="${geolocationRegion.id}" th:text="${geolocationRegion.region}"></option>
            </select>
        </div>
        <div class="controls">
            <select id="geolocationDepartmentSelect" th:field="*{geolocationDepartments}" data-placeholder="Choose a department" multiple="multiple" class="chzn-select">
            </select>
        </div>
    </div>

Can anyone please advise?

EDIT: Generated HTML:

<label class="control-label" for="geolocationRegionSelect">geolocation region</label>
        <div class="controls">
            <select id="geolocationRegionSelect">
                <option value="">Non renseigne</option>
                <option value="1">Alsace</option><option value="2">Aquitaine</option><option value="3">Auvergne</option><option value="4">Basse-Normandie</option><option value="5">Bourgogne</option><option value="6">Bretagne</option><option value="7">Centre</option><option value="8">Champagne-Ardenne</option><option value="9">Corse</option><option value="10">DOM-TOM</option><option value="11">Franche-Comté</option><option value="12">Haute-Normandie</option><option value="13">Ile-de-France</option><option value="14">Languedoc-Roussillon</option><option value="15">Limousin</option><option value="16">Lorraine</option><option value="17">Midi-Pyrénées</option><option value="18">Nord-Pas-de-Calais</option><option value="19">Pays de la Loire</option><option value="20">Picardie</option><option value="21">Poitou-Charentes</option><option value="22">Provence-Alpes-Côte d&#39;Azur</option><option value="23">Rhône-Alpes</option>
            </select>
        </div>
        <div class="controls">
            <select id="geolocationDepartmentSelect" data-placeholder="Choose a department" multiple="multiple" class="chzn-select">
            </select>
        </div>

Upvotes: 1

Views: 880

Answers (1)

zb&#39;
zb&#39;

Reputation: 8049

You should trigger update after element updated, inside handler...

$(document).ready(function() {
    $(".chzn-select").chosen({no_results_text: "No results matched"});
    var geolocationRegionSelect = $("#geolocationRegionSelect");
    var geolocationDepartmentSelect = $("#geolocationDepartmentSelect");
    geolocationRegionSelect.bind('change', function(event) {
        $.get("/kadjoukor/geolocations/findDepartmentsByRegion?regionId="+$(this).val(), function(result){
            geolocationDepartmentSelect.empty();
            $.each(result, function() {
                geolocationDepartmentSelect.append($("<option />").val(this.id).text(this.department));
             geolocationDepartmentSelect.trigger("liszt:updated");  // <--TO HERE
            });
        }, 'json');
        //<-FROM HERE
    });
});

http://jsfiddle.net/oceog/rQJeX/

You not get epected results because $.get() here is asynchronous, get the analogy:

  • You ask your wife to go to the post office and ask them how much you should pay for your father's annual magazine subscription, you tell her - "when you back leave note on that table, and remove old note from here" (on table already the note for 100$, subscription is 50$).
  • After she leaves you ask your mother to check a note on the table and give it to your father to make him pay...
  • your question is equal to that - "why my father payed 100$" ?
  • the answer is equal to that - you had to ask your wife to tell your mother to bring note to your father, when note on the table will be refreshed by your wife.

sorry for english, feel free to edit that if needed.

Upvotes: 1

Related Questions