jQuery AJAX 调用后选择的插件更新问题
jQuery Chosen plugin update issue after AJAX call
我的 jquery-chosenplugin not applying to a control that is rebuilt by an ajax 通话有问题。我查看了其他建议,但似乎没有找到可行的答案。
我正在使用 jquery3.2.1 and jquery-chosen1.8.2
我的htmlpage is built in php第一次输出时一切正常
例如:
<div id="leveldiv">
<p>
<label for="fk_level">Level</label>
<select name="fk_level" class="chosen-select" id="fk_level" title="Level"><option value="0" selected = "selected">None</option>
</select>
</p>
</div>
<script type="text/javascript">
$(".chosen-select").chosen({
width: "200px"
});
</script>
在运行时,fk_level
select 控件使用最初绘制控件的 ajaxcall which calls the same php 函数重建。但是 chosen 功能丢失了,它只是呈现为标准 select 框。
在替换包含 div
innerHTML
之后,我已经调用了 select 控件的 .trigger("liszt:updated")
方法 nd.trigger("chosen:updated")
但这并没有好像有什么作用。
AJAX控制码:
function buildLevel() {
exID = window.document.forms[0].fk_examtype.value;
sID = window.document.forms[0].fk_subject.value;
str = "?action=1&exID=" + exID + "&sID=" + sID
xmlhttp = getHTTPObject();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("leveldiv").innerHTML = this.responseText;
$("#fk_level").trigger("liszt:updated");
$("#fk_level").trigger("chosen:updated");
}
};
xmlhttp.open("GET", "ajax.php" + str, true);
xmlhttp.send();
}
为了完整起见,ajax调用的示例输出是:
<p>
<label for="fk_level">Level</label>
<select name="fk_level" id="fk_level" class="chosen-select" title="Level">
<option value="0">None</option>
</select>
</p>
几天来我一直在摆弄这个问题,但就是无法在 ajax 调用后将所选插件应用于控件。我已经在 Firefox Developer Edition 中对此进行了调试,它没有抛出 javascript 错误。
如有任何帮助,我们将不胜感激。
马克.
$("#fk_level").trigger("chosen:updated");
在 select 框未被破坏且值已更改的情况下有效。如果 select 盒子被销毁并重新创建,您需要为新的 select 盒子重新激活插件。
因此,在您的 AJAX 控制代码中,替换
$("#fk_level").trigger("liszt:updated");
$("#fk_level").trigger("chosen:updated");
和
$("#fk_level").chosen({
width: "200px"
});
我遇到了同样的问题,我使用了下面的示例示例并且与我一起工作得很好
$.ajax(
type: 'POST',
url: 'ApiUrl',
dataType: 'json',
async :false,
success: function(resultList) {
for (var item in resultList) {
if (resultList.hasOwnProperty(item)) {
$("#selectId").append("<option value=" +
resultList[item].value +
" id=" +
resultList[item].value +
">" +
resultList[item].text +
"</option>");
}
}
$("#selectId").trigger("liszt:updated");
$("#selectId").trigger("chosen:updated");
}
});
我的 jquery-chosenplugin not applying to a control that is rebuilt by an ajax 通话有问题。我查看了其他建议,但似乎没有找到可行的答案。
我正在使用 jquery3.2.1 and jquery-chosen1.8.2
我的htmlpage is built in php第一次输出时一切正常 例如:
<div id="leveldiv">
<p>
<label for="fk_level">Level</label>
<select name="fk_level" class="chosen-select" id="fk_level" title="Level"><option value="0" selected = "selected">None</option>
</select>
</p>
</div>
<script type="text/javascript">
$(".chosen-select").chosen({
width: "200px"
});
</script>
在运行时,fk_level
select 控件使用最初绘制控件的 ajaxcall which calls the same php 函数重建。但是 chosen 功能丢失了,它只是呈现为标准 select 框。
在替换包含 div
innerHTML
之后,我已经调用了 select 控件的 .trigger("liszt:updated")
方法 nd.trigger("chosen:updated")
但这并没有好像有什么作用。
AJAX控制码:
function buildLevel() {
exID = window.document.forms[0].fk_examtype.value;
sID = window.document.forms[0].fk_subject.value;
str = "?action=1&exID=" + exID + "&sID=" + sID
xmlhttp = getHTTPObject();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("leveldiv").innerHTML = this.responseText;
$("#fk_level").trigger("liszt:updated");
$("#fk_level").trigger("chosen:updated");
}
};
xmlhttp.open("GET", "ajax.php" + str, true);
xmlhttp.send();
}
为了完整起见,ajax调用的示例输出是:
<p>
<label for="fk_level">Level</label>
<select name="fk_level" id="fk_level" class="chosen-select" title="Level">
<option value="0">None</option>
</select>
</p>
几天来我一直在摆弄这个问题,但就是无法在 ajax 调用后将所选插件应用于控件。我已经在 Firefox Developer Edition 中对此进行了调试,它没有抛出 javascript 错误。
如有任何帮助,我们将不胜感激。
马克.
$("#fk_level").trigger("chosen:updated");
在 select 框未被破坏且值已更改的情况下有效。如果 select 盒子被销毁并重新创建,您需要为新的 select 盒子重新激活插件。
因此,在您的 AJAX 控制代码中,替换
$("#fk_level").trigger("liszt:updated");
$("#fk_level").trigger("chosen:updated");
和
$("#fk_level").chosen({
width: "200px"
});
我遇到了同样的问题,我使用了下面的示例示例并且与我一起工作得很好
$.ajax(
type: 'POST',
url: 'ApiUrl',
dataType: 'json',
async :false,
success: function(resultList) {
for (var item in resultList) {
if (resultList.hasOwnProperty(item)) {
$("#selectId").append("<option value=" +
resultList[item].value +
" id=" +
resultList[item].value +
">" +
resultList[item].text +
"</option>");
}
}
$("#selectId").trigger("liszt:updated");
$("#selectId").trigger("chosen:updated");
}
});