Избранный Аякса на готовые

Question

Я пытаюсь использовать JQuery, выбранный с помощью AJAX вызова: https://harvesthq.github.io/chosen/

Мой HTML является:

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

Мой первый сценарий:

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

И мой второй один (#ticket_type - другой выбор):

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

Все работает отлично, когда я выбираю что-то в своем первом выборе, но при первом загрузке второй выбор пуст. Ajax в порядке, я вижу результат в журнале.

Кто-то может сделать что-то подобное?

Answer 1

Я предполагаю, что вы хотите запустить эти:

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

После этого завершает:

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

Поскольку .load() асинхронный, вы должны использовать обработчик завершения для .load() вызова в чтобы узнать, когда это будет сделано:

$(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'); 
     }); 
    }); 
});