jQuery modal form dialog postback problems

I've created a jQuery UI Modal form, and I want that form to trigger a postback, but I'm having difficulty getting it to work.

I know there are quite a few articles based on using the SimpleModal plugin, and I have tried to adapt these and override the _doPostback function, but with no joy.

I think the problem is within the call to my __doPostBack function and what the parameters should be. Is that the case?

Here's my form

<form id="summaryForm" runat="server">
    <div id="dialog" title="Quick Booking">
        <p>Select user from list or enter name in box</p>
        <fieldset>
            <p><label>Is machine going out of the office?</label></p>
            <asp:RadioButton  TextAlign="Left" GroupName="outOfOffice" Text="Yes" ID="optYes" class="radio" runat="server" />
            <asp:RadioButton  TextAlign="Left" GroupName="outOfOffice" Text="No" ID="optNo" class="radio" runat="server" Checked="true" />

            <label for="dropLstUser">User:</label>
            <asp:DropDownList ID="dropLstUser" runat="server" />
            <input type="text" name="txtUser" id="txtUser" value="" class="text" />
            <label for="txtStartDate">Start Date:</label>
            <input type="text" id="txtStartDate" name="txtStartDate" class="datepicker" />
            <asp:HiddenField ID="assetField" runat="server" />
            <%--<button onclick="performPostBack('summaryForm')">Postback</button>--%>
        </fieldset>
    </div>
    //--------------------------------

Here is the JavaScript code:

<script type="text/javascript">
    $(function() {
        $("#dialog").dialog({
            bgiframe: true,
            height: 300,
            modal: true,
            bu

I managed to solve the problem - probably not the best way but here's what I did.

The dialog wouldn't postback because jQuery UI takes the submit button out of the form and appends it to the bottom of the body tag, so when you try to postback the button it doesn't know what it's posting.

I got round this by modifying the jQuery UI code by changing this:

uiDialog = (this.uiDialog = $('<div/>'))
               .appendTo(document.body)
               .hide()
               .addClass(
                       'ui-dialog ' +
                       'ui-widget ' +
                       'ui-widget-content ' +
                       'ui-corner-all ' +
                       options.dialogClass
               )

To this:

uiDialog = (this.uiDialog = $('<div/>'))
               .appendTo(document.forms[0])
               .hide()
               .addClass(
                       'ui-dialog ' +
                       'ui-widget ' +
                       'ui-widget-content ' +
                       'ui-corner-all ' +
                       options.dialogClass
               )

It is not ideal to modify the source library, but it's better than nothing.

answered 2009-02-20T15:30:39.710

jQuery modal form dialog postback problems

1 Answer

Your Answer