我有一个对话框窗口,里面有一些确认的东西作为表单提交的结果:
$('#newUserDialog').dialog({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
alert(result);
$('#newUserDialog').html('User has been built');
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
当用户单击complete时,它触发ajax调用并执行checkdata.php操作。完成后,我要删除"完成"answers"取消",并添加一个按钮"继续"。继续按钮将重新加载页面。我怎样才能做到这一点呢?
目前在此代码中,它按预期工作,但如果用户不喜欢他在单击完成之前在确认窗口中看到的内容,如果他单击取消,则会重新加载页面。我只想在ajax调用后重新加载页面。
您可以使用下列方法在ajax回调中添加新按钮;
var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
window.location.reload(true);
});
buttonSet.html(newButton);
jsfiddle <script>
var myModalExample;
$(function() {
myModalExample = $( "#newUserDialog" ).dialog({
autoOpen: true,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>