使用jquery ui模式对话框提交表单

我在提交表单时遇到困难，使用JQuery UI模式对话框。意图是你点击提交按钮，模态弹出窗口，并根据你选择的模式，表单提交或不显示。相反，模态弹出，并自动提交使用jquery ui模式对话框提交表单

前端：

<div id="dialog" title="Basic dialog"> 
    <p>Please double check to be sure all data is entered correctly.</p> 
</div> 
<div class="buttons"> 
    <asp:Button ID="btnSave" Text="Save for later" runat="server" OnClick="btnSubmit_Click" 
     ValidationGroup="GroupSave" /> 
    <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="return checkSubmit()" OnClick="btnSubmit_Click" /> 
</div>

我曾尝试了jQuery/JS

A.）

function checkSubmit() { 
$("#dialog").dialog({ modal: true, 
    buttons: { "Submit": function() { $(this).dialog("close"); return true; }, 
     "Go Back": function() { $(this).dialog("close"); return false; } 
    } 
}); 
}

B.）

$(document).ready(function() { 
$("#dialog").dialog({ autoOpen: false, 
    modal: true, 
    buttons: { "Submit": function() { $(this).dialog("close"); return true; }, 
     "Go Back": function() { $(this).dialog("close"); return false; } 
    } 
}); 
}); 

function checkSubmit() { 
$("#dialog").dialog("open"); 
}

我明白如何B（特别是checkSubmit）失败，所有它正在做的是打开对话框，但对于A我认为这将工作考虑我有按钮返回值，但也基本上是只是打开对话框。

来源

2012-06-18 peroija

使用标记的按钮“提交”打开对话框：

<div id="dialog" title="Basic dialog"> 
    <p>Please double check to be sure all data is entered correctly.</p> 
</div> 
<div class="buttons"> 
    <asp:Button ID="btnSave" Text="Save for later" runat="server" OnClick="btnSubmit_Click" ValidationGroup="GroupSave" /> 
    <input type="button" id="preSubmit" value="Submit" /> 
    <asp:Button ID="btnSubmit" class="ui-helper-hidden" Text="Submit" runat="server" OnClick="btnSubmit_Click" /> 
</div>

使用对话框中的Submit按钮来触发Click事件为您。

function submitForm() { 
    $('input#<%=btnSubmit.ClientID %>').click(); 
} 
function checkSubmit() { 
    $("#dialog").dialog({ 
     "modal": true, 
     "buttons": { 
      "Submit": function() { 
       submitForm(); 
      }, 
      "Go Back": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
} 
$(document).ready(function() { 
    $('button#preSubmit').click(function(e) { 
     checkSubmit(); 
     e.preventDefault(); 
     return false; 
    }); 
    $('button#saveForLater').click(function(e) { 
     $("#dialog").dialog('close'); 
     e.preventDefault(); 
     return false; 
    }); 
});

来源

2012-06-18 19:08:38 pete

的“返回”顺利工作，但点击提交的对话框中什么也不做，但关闭对话框，页面不提交 – peroija

@peroija：（对不起！）的'checkSubmit'功能应设置要返回的'ret'变量。更新的答案反映了这一点。 – pete

尝试了您的更改并尝试了别的东西，没有豆子。萤火虫显示检查提交返回未定义，不是真或假。 – peroija

使用jquery ui模式对话框提交表单

回答

相关问题