物化CSS选择更新错误
物化CSS选择更新错误
提问于 2018-04-09 15:53:30
嗨，StackOverflow和其他开发人员...所以。我真的很喜欢Materialize CSS，但它有时会让我头昏脑胀。我在我的网站上有一些选择元素，这是非常好的，初始化工作很好，他们被显示。然后，我有另一个函数来填充selects，根据Materialize文档，我应该再次运行$('select').material_select();。不幸的是，当我第二次尝试调用这个函数时，我得到了错误Uncaught TypeError: $(...).material_select is not a function。
我不明白为什么我不能调用这个函数，而我刚刚在文档就绪函数中这样做了？
页面的JS包：
区块引用
$(document).ready(function () {
// This works fine and as expected my Selects are rendered perfect
$('select').material_select();
fetchSoftware();
getusersinit();
});
var fetchSoftware = function fetchSoftware() {
$.ajax({
type: "Get",
url: "Dashboard/GetSoftwares",
data: { userName: "*****" },
success: function success(softwares) {
console.log(softwares);
$("#softwareSelectDefault").remove();
Object.keys(softwares).forEach(function (key) {
$("#softwareSelect").append("<option>" + softwares[key] + "</option>");
});
//Down here shit falls apart. This doesen't work
$('select').material_select();
},
error: function error(errorMessage) {
//window.location.href = "/account/signin";
}
});
};
var getusersinit = function getusersinit() {
$.ajax({
type: "Get",
url: "***********",
data: { userName: "**********" },
success: function success(reports) {
console.log(reports);
$(".progress").remove();
Object.keys(reports).forEach(function (key) {
$("#******").append("<tr id=\"" + reports[key].id + "\"><td><i class=\"medium material-icons\">" + reports[key].locked + "</i></td><td><i class=\"medium material-icons\">" + reports[key].status + "</i></td><td>" + reports[key].user + "</td><td>" + reports[key].script + "</td><td>" + reports[key].software + "</td><td>" + reports[key].testBench + "</td><td>" + reports[key].repository + "</td><td>" + reports[key].executionTime + "</td><td>" + reports[key].startDate + "</td></tr>");
});
},
error: function error(errorMessage) {
window.location.href = "/account/signin";
}
});
};
更新10-04-2018
所以，在昨天花了几乎整个工作日的时间来解决这个问题之后，我现在离解决这个问题又近了一步。我发现了一些非常奇怪的事情。显然，问题出在我的ajax调用中。我有一个理论，那就是它取决于网址或回复。
$(document).ready(function () {
//fetchSoftware works. If i run getuserinit it does not. Then material_select doesen't exist
fetchSoftware();
});
var fetchSoftware = function fetchSoftware() {
$.ajax({
type: "Get",
url: "https://jsonplaceholder.typicode.com/posts/1",
data: { userName: "XXXXXX" },
success: function (result) {
$("#testReports").append(`<tr><td>TEST</td></tr>`);
$("#softwareSelect").append(`<option>Test Option</option>`);
$('#softwareSelect').material_select();
},
error: (errorMessage) => {
window.location.href = "/account/signin";
}
});
};
var getusersinit = function getuserinit() {
$.ajax({
type: "Get",
url: "Dashboard/LoadTable",
data: { userName: "XXXXXX" },
success: function (result) {
$("#testReports").append(`<tr><td>TEST</td></tr>`);
$("#softwareSelect").append(`<option>Test Option</option>`);
$('#softwareSelect').material_select();
},
error: (errorMessage) => {
window.location.href = "/account/signin";
}
});
};
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-16 14:50:07
我修复了这个问题，尽管它是一个变通方法。将selects放入变量中...
/*
These constant are created because of an unsolved issue:
See https://stackoverflow.com/questions/49728000/
By putting the selects into constants, and only referencing the constants,
this is a workaround.
*/
var selectSoftware = $('#softwareSelect');
$(document).ready(function () {
selectSoftware.material_select();
getSoftware();
});
var getSoftware = function getSoftware() {
$.ajax({
type: "Get",
url: "Dashboard/GetSoftwares",
data: { userName: "XXXXXXX" },
success: function success(softwares) {
console.log(softwares);
$("#softwareSelectDefault").remove();
Object.keys(softwares).forEach(function (key) {
$("#softwareSelect").append("<option>" + softwares[key] + "</option>");
});
selectSoftware.material_select();
},
error: function error(errorMessage) {
//window.location.href = "/account/signin";
}
});
};
Stack Overflow用户
发布于 2018-06-13 05:26:16
formSelect()是一种新方法。
使用selectSoftware.formSelect();而不是material_select()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49728000
复制相关文章
相似问题