2015-04-17 14 views
5

Sto lavorando in un'applicazione Web utilizzando Spring MVC. Sto cercando di mostrare una finestra di dialogo di conferma prima di inviare un modulo usando , ma sto ricevendo un errore del server interno 500.Come confermare l'invio di un modulo con Bootbox utilizzando jQuery AJAX e JSON

Questa è la mia forma:

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

Questa è la mia 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); 
    } 
    }); 
} 

mando il nome e l'ultimo valore nome al mio controller primavera e faccio un inserto e se fosse con successo il mio metodo controller restituisce true, e nel blocco di successo del mio script controllo il valore if is true I mostri un messaggio e se è falso mostro un messaggio diverso.

mio problema è che non so cosa fare all'interno di questa sezione:

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

* EDIT: * È stata colpa mia submiting un valore nei campi del modulo, ora sono non ottenere un errore 500 del server interno, ora mostrami il mio dialogo FALLITA che ho il fuoco nel blocco di successo

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

e poi dopo questo messaggio è sho, giù sotto, mostra il diaglog conferma che voglio mostra i primi È come se mi stesse mostrando i messaggi nell'ordine sbagliato. Inoltre, quando premo il pulsante Danger, non chiudo la finestra di dialogo solo se premo Success.

* EDIT 2: *

Le finestre di conferma sta lavorando, ma sto avendo problemi quando si preme il pulsante di annullamento, quando si preme il pulsante Annulla la finestra non si chiude.

risposta

3

provare a fare la richiesta ajax solo dopo che l'utente fa clic la funzione di callback button.The successo sarà chiamato dopo che il pulsante viene premuto.

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

+0

ho aggiornato la mia domanda, sto avendo problemi con il blocco di codice all'interno del 'pericolo: {' quando premo il pulsante Annulla la finestra di dialogo non si chiude. – StackQuestion

1

Se stai ricevendo un errore interno del server 500, sembra che tu stia inviando il modulo e colpendo il server. Potrebbe esserci un problema con il codice lato server, di cui non si discute qui che ti sta dando quell'errore.

Affinché la finestra di dialogo di conferma funzioni, la funzione beforeSend deve restituire false quando viene premuto il pulsante Danger!. Prova di ritorno falso dalla seconda funzione di callback:

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

Ehi amico, ho modificato la mia domanda con il tuo suggerimento, ma io sto ancora problemi, ora mostrami il mio messaggio 'else { bootbox.alert ("Operazione non riuscita") ; 'e sotto questo messaggio mi mostra il messaggio di conferma, e se premo il pulsante Danger non si chiude, ho bisogno di premere il pulsante Success – StackQuestion

2

La mia risposta è per la versione "EDIT 2": Se si rimuove il "return false;" comando dal tuo "Pericolo!" callback del pulsante, funzionerà correttamente. Anche il pulsante Accetta funzionerà correttamente.

Se mai dovessi tornare a leggere questo commento, ti preghiamo di accettare il commento di Pabreetzio, che ha fatto il 17 aprile alle 21:06, dal momento che ha risolto il tuo problema lì.

1

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

Problemi correlati