问题描述
我正在使用 Spring MVC
在Web应用程序中工作。我在使用 Bootbox
提交表单之前尝试显示确认对话框,但我收到500内部服务器错误。
I'm working in a web application using Spring MVC
. I'm trying to show a confirmation dialog before submitting a form using Bootbox
, but I'm getting a 500 internal server error.
这是我的表格:
<form id="checkout-form" class="smart-form" novalidate="novalidate">
...some fields
<button type="button" class="btn btn-primary" onclick="insertFunction()">
Accept
</button>
</form>
这是我的insertFunction()
This is my insertFunction()
function insertFunction(){
var name = $('#name').val();
var lastname = $('#lastname').val();
var confirmSend;
var json = {"name": name,"lastname": lastname};
$.ajax({
type: "POST",
url: "register/insertPerson",
data: JSON.stringify(json),
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
beforeSend: function (xhr){
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
//I DONT KNOW WHAT TO DO HERE
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
return false;
}
}
}
});
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
},
success: function (data){
if (data.message === true){
bootbox.alert("OPERATION WAS EXECUTED WITHOUT PROBLEMS");
} else {
bootbox.alert("OPERATION FAILED");
}
},
error: function (xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(xhr.responseText);
alert(thrownError);
}
});
}
我将名称和姓氏值发送给我的弹簧控制器,我做了一个插入,如果成功,我的控制器方法返回true,在我的脚本的成功块中,我检查值是否为真我显示一条消息,如果它是假我显示不同的消息。
I send the name and last name value to my spring controller and I do a insert and if it was successfully my controller method returns true, and in the success block of my script I check the value if is true I show a message and if it's false i show a different message.
我的问题是我不知道该部分内该做什么:
My problem is that i don't know what to do inside this section:
success: {
label: "Success!",
className: "btn-success",
callback: function() {
//I DONT KNOW WHAT TO DO HERE
}
}
*编辑:*
It是我的错在表单字段中提交一个值,现在我没有得到500内部服务器错误,现在它显示我在成功块中触发的FAILED对话框
* *It was my fault submiting a value in the form fields, now I'm not getting a 500 internal server error, now it show me my FAILED dialog that i fire in the success block
else {
bootbox.alert("OPERATION FAILED");
然后在这条消息之后,在它下面,它显示我想要的确认diaglog显示第一。就像是以错误的顺序向我显示消息。此外,当我点击危险按钮时,只有当我按下成功时才会关闭对话窗口。
and then after this message is sho, down under it, it shows the confirmation diaglog that i want to show firts. Is like is showing me the messages in the wrong order. Also when i hit the Danger button it don't close the dialog window only if i press Success.
*编辑2:*
确认窗口正常工作,但是当我按下取消按钮时出现问题,当我按下取消按钮时,窗口不会关闭。
The confirmation windows is working, but I'm having problems when i press the cancel button, when i press the cancel button the window don't close.
function preInsert()
{
bootbox.dialog({
message: "are you sure",
title: "are you sure",
buttons: {
success: {
label: "Acept",
className: "btn-success",
callback: function () {
realInsert();
}
},
danger: {
label: "Cancel",
className: "btn-danger",
callback: function () {
return false;
}
}
}
});
}
function realInsert() {
var name= $('#name').val();
var lastName= $('#lastName').val();
var json = {"name": name,
"lastName": lastName
};
$.ajax(
{
type: "POST",
url: "register/insertForm",
data: JSON.stringify(json),
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
beforeSend: function (xhr)
{
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
},
success: function (data)
{
if (data === true)
{
bootbox.alert("Insert Successfully ");
}
else
{
bootbox.alert("Problem during the insert");
}
},
error: function (xhr, ajaxOptions, thrownError)
{
alert(xhr.status);
alert(xhr.responseText);
alert(thrownError);
}
});
}
推荐答案
尝试仅制作ajax请求用户单击成功按钮后。单击按钮后将调用回调函数。
Try making the ajax request only after the user clicks the success button.The callback function will be called after the button is clicked.
function insertFunction() {
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
success();
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
return false;
}
}
}
});
}
function success() {
var name = $('#name').val();
var lastname = $('#lastname').val();
var confirmSend;
var json = {
"name": name,
"lastname": lastname
};
$.ajax({
type: "POST",
url: "register/insertPerson",
data: JSON.stringify(json),
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function(data) {
if (data.message === true) {
bootbox.alert("OPERATION WAS EXECUTED WITHOUT PROBLEMS");
} else {
bootbox.alert("OPERATION FAILED");
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(xhr.responseText);
alert(thrownError);
}
});
这篇关于如何使用jQuery AJAX和JSON确认使用Bootbox提交表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!