Geek Answers Handbook

How to confirm form submission using Bootbox using jQuery AJAX and JSON

I am working in a web application using Spring MVC . I am trying to show a confirmation dialog before submitting the form using Bootbox , but I am getting an internal 500 server error.

This is my form:

 <form id="checkout-form" class="smart-form" novalidate="novalidate"> ...some fields <button type="button" class="btn btn-primary" onclick="insertFunction()"> Accept </button> </form>

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); } }); }

I send the first and last name to my spring controller, and I insert, and if it was successful, my method method returns true, and in the success block of my script, I check if is true I show the message, and if it is false, I show another message.

My problem is that I do not know what to do in this section:

  success: { label: "Success!", className: "btn-success", callback: function() { //I DONT KNOW WHAT TO DO HERE } }

* EDIT: * It was my mistake representing the value in the form fields, now I don’t get the internal 500 server internal error, now it shows me my FAILED dialog, which I run in the success block

 else { bootbox.alert("OPERATION FAILED");

and then after this message is shown below, it will display the confirmation dialog that I want to show. It looks like this is showing me messages in the wrong order. Also, when I click the “Danger” button, it does not close the dialog box only if I click “Success”.

* EDIT 2: *

Confirmation windows work, but I have problems when I press the cancel button, when I press the cancel button, the window does not 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); } }); }
+5
source share
4 answers

Try making an ajax request only after the user clicks the success button. After pressing the button, the callback function is called.

 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); } });
+3
source

My answer is for your version of "EDIT 2": If you delete "return false"; command from your "Danger!" button callback, it will work correctly. Also, the Accept button will work correctly.

If you ever come back to read this comment, please accept the comment Pabreetzio made on April 17 at 9:06 p.m., since he solved your problem there.

+2
source

If you get an internal 500 internal server error, it sounds like you are submitting a form and clicking on the server. There may be a problem with the server-side code that you are not discussing here, which gives you this error.

For your confirmation dialog to work, the beforeSend function must return false when you click the Danger! button Danger! . Try returning false from the second callback function:

 danger: { label: "Danger!", className: "btn-danger", callback: function() { return false; } }
+1
source 

 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); } });
+1
source

More articles:


All Articles