jQueryUI Boîte de dialogue de confirmation modale sur la soumission d'un formulaire

Question

J'essaie de faire fonctionner une boîte de dialogue de confirmation modale lorsqu'un utilisateur soumet un formulaire. Mon approche, pensais-je logiquement, serait d'attraper la soumission du formulaire. Mon code est le suivant,

$('#multi-dialog-confirm').dialog({ 
    autoOpen: false, 
    height: 200, 
    modal: true, 
    resizable: false, 
    buttons: { 
     'Confirm': function(){ 
      //$(this).dialog('close'); 
      return true; 
     }, 
     'Cancel': function(){ 
      $(this).dialog('close'); 
      return false; 
     } 
    } 
}); 

$('#completeform').submit(function(e){ 
    e.preventDefault(); 
    var n = $('#completeform input:checked').length; 

    if(n == 0){ 
     alert("Please check the item and mark as complete"); 
     return false; 
    }else{ 
     var q = $('#completeform #qty').html(); 
     if(q > 1){ 
      $('#multi-dialog-confirm').dialog('open'); 
     } 
    } 
    //return false; 
}); 

Je suis la mise en place ma première fenêtre. C'est parce que je suis assez certain que la portée de la boîte de dialogue doit être au même niveau que la fonction qui l'appelle. Cependant, le problème est que lorsque vous cliquez sur «Confirmer», rien ne se passe. L'action de soumission ne continue pas. J'ai aussi essayé $('#completeform').submit();, ce qui ne semble pas fonctionner. J'ai essayé de supprimer le .preventDefault() pour m'assurer que la soumission de formulaire n'est pas complètement annulée, mais cela ne semble pas faire la différence entre ça et retourner false.

Ne pas cocher la case, afficher et alerter correctement. Vous pouvez changer de dialogue à un moment donné;), cliquer sur 'Annuler' ferme la boîte de dialogue et reste sur la page, mais les boutons insaisissables 'Confirmer' ne semblent pas continuer avec l'événement de soumission de formulaire.

Si quelqu'un peut aider, je serais ravi de partager mon déjeuner avec vous!

Answer 1

que je devrais inclure mon code ici, au cas où quelqu'un trouve utile.

/* 
* Setup the confirm multiple completions dialog 
*/ 
$('#multi-dialog-confirm').dialog({ 
    autoOpen: false, 
    height: 200, 
    modal: true, 
    resizable: false, 
    buttons: { 
     'Confirm': function(){ 
      $(this).dialog('close'); 
      document.completeform.submit(); 
     }, 
     'Cancel': function(){ 
      $(this).dialog('close'); 
      return false; 
     } 
    } 
}); 

/* 
* When completing an item on the search page, validate and confirm 
*/ 
$('#completeform').submit(function(e){ 
    var n = $('#completeform input:checked').length; 

    if(n == 0){ 
     alert("Please check the item and mark as complete"); 
     return false; 
    }else{ 
     var q = $('#completeform #qty').html(); 
     if(q > 1){ 
      e.preventDefault(); 
      $('#multi-dialog-confirm').dialog('open'); 
     }else{ 
      return true; 
     } 
    } 
    //return false; 
}); 

Answer 2

Lors de l'exécution de .submit dans le dialogue, le code de soumission est à nouveau exécuté.

Essayez ceci:

$('#multi-dialog-confirm').dialog({ 
    autoOpen: false, 
    height: 200, 
    modal: true, 
    resizable: false, 
    buttons: { 
     'Confirm': function(){ 
      dialogueIsSubmitting = true; 
      $('#completeform').submit(); 
      return false; 
     }, 
     'Cancel': function(){ 
      dialogueOpen = false; 
      $(this).dialog('close'); 
      return false; 
     } 
    } 
}); 

var dialogueIsSubmitting = false; 

$('#completeform').submit(function(e){ 
    if(dialogueIsSubmitting) return true; 

    var n = $('#completeform input:checked').length; 

    if(n == 0){ 
     alert("Please check the item and mark as complete"); 
     return false; 
    }else{ 
     var q = $('#completeform #qty').html(); 
     if(q > 1){ 
      $('#multi-dialog-confirm').dialog('open'); 
     } 
    } 
    return false; 
});