gpt4 book ai didi

javascript - editableSelect() 在 ajax 方法后不会触发

转载 作者:行者123 更新时间:2023-12-03 01:02:37 25 4
gpt4 key购买 nike

我有一个 ajax 方法,该方法在页面加载后立即运行,而不监听任何事件。 ajax 从数据库中获取学生 ID 并在选择框中显示学生 ID。我希望选择框可编辑( http://indrimuska.github.io/jquery-editable-select/ )。当选项被硬编码在 select 标记中时,函数 $('#studentID').editableSelect(); 运行完全正常。但是,当调用 $('#studentID').editableSelect(); 并从数据库中获取数据时,选择框中不会显示任何数据。

这是在 JavaScript 文件中编写的代码

$('#studentID').editableSelect();

$.ajax({
type:'POST',
url:'./public/api/studentID.php',
success:function(html){
$('#studentID').html(html);

}
});

#studentID 定义

<label for="studentID">ID</label>
<select id = "studentID" class="form-control">

</select>

php代码

<?php

$connection = new mysqli ("127.0.0.1", "root", "", "test");
if ($connection->connect_error) {
die("Connection failed: " . $connection->connect_error);
}

$query = "SELECT `SID` FROM `student` ORDER BY `SID` ";

$result1= mysqli_query($connection, $query);

while($row1 = mysqli_fetch_array($result1)):;?>
<option value="<?php echo $row1[0];?>"><?php echo $row1[0];?></option>
<?php endwhile;

$connection->close();
?>

任何帮助将不胜感激。

最佳答案

editableSelect 移至 ajax.success 方法中。问题是您正在初始化一个空的 select 元素,然后使用异步 ajax 方法将选项插入其中。数据成功加载后,成功将永远发生,然后您可以使用任何框架/库初始化选择,包括您想要的 editableSelect

$.ajax({
type:'POST',
url:'./public/api/studentID.php',
success:function(html){
let student_el = $('#studentID');
student_el.html(html);
student_el.editableSelect();
}
});

编辑:

您可能没有以正确的方式包含该库,因此无论如何,以下是包含它的两种方法:

在 head 标签内

<head>
<!--Include jQuery + you libraries...-->
<script src="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet" />
</head>

ajax 调用内部

$.ajax({
type: 'POST',
url: './public/api/studentID.php',
success: function(html){
let student_el = $('#studentID');
student_el.html(html);
$.getScript("https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js")
.then(() => {
student_el.editableSelect(); // Call this function after the script have been successfully loaded.
});
//student_el.editableSelect();
}
});

关于javascript - editableSelect() 在 ajax 方法后不会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52562889/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com