Question

在我得到任何标记之前，请记住，我对整个Web应用程序开发的事情比较陌生，所以请放轻松我吧！我的问题是我似乎无法将引导程序“switch”绑定到发送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>

开关：

注意：$ v-＆gt; checked语句派生自解析的json 预先

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）但我似乎无法让这个东西正常工作。如果您有任何意见/想法/可能的解决方案，请不要拖延

Answer 1

我也遇到过这样的问题。我认为这应该可以解决你的问题

$("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;
                    }
                }

    });

});

bootstrap的开关+ AJAX

1 个答案: