jquery UI 모달 대화 상자를 사용하여 양식 제출

Question

양식을 제출할 때 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에 대해서는 버튼을 반환하는 것으로 고려해도 작동한다고 생각했지만 그 역시 본질적으로 대화 상자를 여는 것입니다.

Answer 1

표시된 버튼을 사용하여 대화 상자를 엽니 다 "제출"

<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 버튼을 사용합니다.

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