Инициализируйте JQuery Multiselect, используя AJAX

У меня проблема с AJAX и JQUERY.

У меня есть форма, которая содержит тег. После выбора параметра я использую AJAX для создания формул, заполняю их некоторыми данными из базы данных и показываю их.

Я хотел бы использовать jQuery UI MultiSelect Widget

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

<script type="text/javascript">
$(function(){

$("#ExampleSelect").multiselect({
selectedList: 4
});

});

</script>

Структура следующая:

  • PHP-файл с главной формой, содержащей нормаль и a, который будет содержать элементы, сгенерированные после вызова AJAX. (событие onChange в <select>).
  • Ajax-файл

function LoadDiv()
{

var xmlhttp;

var serie_id = document.getElementById('serie_id').value;if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divForm").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","divDataManagement.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("serie_id="+serie_id);

}

$.ajax({

success: function(){
$("#ExampleSelect").multiselect("destroy").multiselect({
selectedList: 4
});

}
});
  • PHP-файл, содержащий JQuery UI MultiSelect, который будет отображаться в основной форме PHP (внутри <div> тег).

<select id = "ExampleSelect"  multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>

</select>

Спасибо за вашу помощь.

1

Решение

Инициализируйте его в методе успеха AJAX.

$.ajax({
...
success: function(){
$("#ExampleSelect").multiselect({
selectedList: 4
});
}
...

Если вы вносите изменения в выбранный экземпляр множественного выбора, уничтожьте его и повторно инициализируйте после изменения.

$.ajax({
...
success: function(){
$("#ExampleSelect").multiselect("destroy").multiselect({
selectedList: 4
});
}
...

Если вы используете XMLHttpRequest вместо jQuery ajax, вы должны инициировать множественный выбор в методе onreadystatechange.

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divForm").innerHTML=xmlhttp.responseText;
$("#ExampleSelect").multiselect({
selectedList: 4
});
}
}
4

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]