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

Question

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.

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

*EDIT: * 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");

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.

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

Answer 1

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

Answer 2

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

If you ever come back to read this comment, please accept Pabreetzio's comment, that he made on Apr 17 at 21:06, since he solved your problem there.

Answer 3

If you're getting a 500 internal server error then it sounds like you're submitting the form and hitting the server. There may be a problem with the server side code, which you don't discuss here that is giving you that error.

In order for your confirmation dialogue to work the beforeSend function must return false when the Danger! button is pressed. Try returning false from the second callback function:

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

Answer 4

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