表单提交中的jQueryUI模式确认对话框

我想在用户提交表单时得到一个模式确认对话框。我的逻辑思维方式是抓住表单提交。我的代码如下，表单提交中的jQueryUI模式确认对话框

$('#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; 
});

所以，我先设置我的对话框。这是因为我很确定对话框的范围需要与调用它的函数处于同一级别。

但是，问题是，当你点击'确认'时没有任何反应。提交操作不会继续。我也试过$('#completeform').submit();，这似乎并不奏效。我试图删除.preventDefault（）以确保表单提交没有完全取消，但它似乎没有区别，并返回false。

未选中该框，显示并警示正常。可能会在某个时候变成对话框;），单击“取消”将关闭对话框并保留在页面上，但难以捉摸的“确认”按钮似乎不会继续表单提交事件。

如果有人能帮忙，我会很高兴与你分享我的午餐！ ;）

来源

2010-04-14 David Yell

解决方案很简单！通过在函数中使用document.formname.submit（），我可以绕过jQuery范围，并直接提交表单，这很好！令人惊讶的火腿三明治可以做什么 – 2010-04-14 12:23:30

我会将此视为解决方法，而不是解决方案。我建议你尝试理解我的解决方案，并使用它，因为它是合乎逻辑的，因此以更一致的方式工作。 – Simeon 2010-04-14 13:33:03

想我应该包括我的代码在这里，万一有人发现它有帮助。

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

来源

2010-04-14 12:30:30

当在对话框中进行提交时，再次执行提交代码。

试试这个：

$('#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; 
});

来源

2010-04-14 12:25:36 Simeon

表单提交中的jQueryUI模式确认对话框

回答

相关问题