准备好选择ajax

Question

I try to use jquery chosen with ajax call : https://harvesthq.github.io/chosen/

My html is :

<div class="form-group m-b logiciel">
    <label>Logiciel concerné</label>
    <select id="logiciel" name="logiciel" class="chosen">
    </select>
</div>

My first script is :

$(document).ready(function () {
    $("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + $('#client').val());
    $("#logiciel").trigger('chosen:updated');
    $("#logiciel").chosen();
});

And my second one is (#ticket_type is another chosen) :

$(function () {
    $('#client').on('change', function () {
        var id = this.value;
        $("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + id);
        $("#logiciel").trigger('chosen:updated');
    });
});

Everything works fine when i select something on my first select, but on the first load, the second select is empty. Ajax is ok, i can see the result on log.

Is someone achieve to do something like that ?

Answer 1

I'm guessing that you want to run these:

$("#logiciel").trigger('chosen:updated');
$("#logiciel").chosen();

After this completes:

$("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + $('#client').val());

Because .load() is asynchronous, you have to use the completion handler for the .load() call in order to know when it is done:

$(document).ready(function () {
    $("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + $('#client').val(), function() {
        $("#logiciel").trigger('chosen:updated').chosen();
    });
});

$(document).ready(function () {
    $('#client').on('change', function () {
        var id = this.value;
        $("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + id, function() {
            $("#logiciel").trigger('chosen:updated');
        });
    });
});