在我受到任何贬低之前，请记住，我对整个 Web 应用程序开发还比较陌生，所以请对我宽容一些! 我的问题是，我似乎无法将引导“开关”绑定(bind)到发送 AJAX 请求的 js 函数，以更新数据库中的记录。
这是我的尝试:
- JS:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js" data-turbolinks-track="true"></script>
<script>
$(document).ready(function(e){
var stopchange = false;
$('.switch-input').on('switchChange.bootstrapSwitch', function (e, state) {
var obj = $(this);
var arr = e.split("_");
var appid = arr[1];
var owaspid = arr[2];
if(stopchange === false){
$.ajax({
method: 'POST',
url: 'actions.php',
data: {
val: value,
user: '<?php echo $_SESSION['user'] ?>',
app: appid,
owasp: owasp,
action: "update_worklog"
},
success: function(result) {
if(result['done'] == true) {
alert('Status changed successfully.');
} else {
alert('Error:'+result['message']);
if(stopchange === false){
stopchange = true;
obj.bootstrapSwitch('toggleState');
stopchange = false;
}
}
},
error: function(result) {
alert('Error! Unable to update progress.');
if(stopchange === false){
stopchange = true;
obj.bootstrapSwitch('toggleState');
stopchange = false;
}
}
});
}
});
});
</script>
</head>Note: The $v->checked statement derives from a json that is parsed beforehand
echo '<td><label class="switch switch-text switch-primary"><input id="check_' . $SomeID. '_' . $v->name . '" name="ncheck_' . $SomeID . '_' . $v->name . '" type="checkbox" class="switch-input"';
if($v->checked == "True") {
echo "checked";
}
echo '><span data-on="✓" data-off="×" class="switch-label"></span> <span class="switch-handle"></span></label></td>';郑重声明:我在 stackoverflow 中遇到过很多类似的问题(例如: this 或 this 或 this )，但我似乎无法让这个东西正常工作。 如果您有任何意见/想法/可能的解决方案，请不要犹豫
最佳答案
我也遇到过这样的问题。我想这应该可以解决你的问题
$("input.switch-input").on('change.bootstrapSwitch', function(e){
if($(this).is(':checked'))
alert('checked');
else
alert('not checked');
//code..
$.ajax({
//code..
success: function(result) {
if(result['done'] == true) {
alert('Status changed successfully.');
} else {
alert('Error:'+result['message']);
if(stopchange === false){
stopchange = true;
$(this).bootstrapSwitch('toggleState');
stopchange = false;
}
}
},
error: function(result) {
alert('Error! Unable to update progress.');
if(stopchange === false){
stopchange = true;
$(this).bootstrapSwitch('toggleState');
stopchange = false;
}
}
});
});
关于javascript - bootstrap的开关+AJAX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50352400/