Jquery dialog form example

jqueryjquery-ui-dialog

I am trying to put a asp.net form into a jquery popup dialog box.
My script is in the head tag of a master page and my form is in a content page. This is what I have so far, if I set the autoOpen: false the form pops up without the openme button click event first and the form won't submit, if I set it to open false the page refreshes but the dialog does not work. Looking for help with the code and a better example of of a asp.net form inside a jquery dialog box? Thanks!!!

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

   <script>
    $(document).ready(function () {
    $("#dialog").dialog({ autoOpen: false });

    $("#btnOpenMe.ClientID").click(
        function () {
            $("#dialog").dialog('open');
            return false;
        }
    );
});


<table>
    <tr>
        <td colspan="2" style="text-align:center">
            Update Form
        </td>
    </tr>       
    <tr>
        <td>
            <asp:Label ID="lblUpdate" runat="server" Text="Update Reason:"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtUpdate" TextMode="MultiLine" Columns="30" Rows="5" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>

        <td>
            <asp:Button ID="btnSupmitUpdate" runat="server" Text="Button" OnClick="btnSupmitUpdate_Click" />
        </td>
    </tr>
</table>
</div>
 <asp:Button ID="btnOpenMe" runat="server" Text="Click Me to open Dialog box" />

Best Answer

When you wrap an object with dialog it will be moved at the bottom of the page, out of the form tag. So the submit wont work.

It is not so relevant to the question, but it is vital that the form will work.

To answer your question.

  1. On your button you don't have any server-side code so make it html. 

    <asp:Button ID="btnOpenMe" runat="server" Text="Click Me to open Dialog box" />

    can be changed to

    <input type="button" id="btnOpneMe value="Click Me to open Dialog box">

then modify the jQuery 

    <script>
    $(function(){
      $("#btnOpneMe").on('click',function(e){
          e.preventDefault();
         $("#dialog").dialog();
       });
    });
    </script>

What is your #dialog??

Related Topic