jQuery modal form dialog postback problems

Question

Hi Guys,

I've created a jQuery UI Modal form and I want that form to trigger 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 params should be but if someone could explain it to me that would be great

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

<script type="text/javascript">
$(function() {
    $("#dialog").dialog({
     bgiframe: true,
     height: 300,
     modal: true,
     buttons: {
'Close': function() { alert("closing"); $(this).dialog("close"); __doPostBack = newDoPostBack; __doPostBack("aspnetForm",null); }}});});    

function newDoPostBack(eventTarget, eventArgument)
{
    alert("postingback");
    var theForm = document.forms[0];

    if (!theForm)
    {
        theForm = document.aspnetForm;
    }         

    if (!theForm.onsubmit || (theForm.onsubmit() != false))
    {
        document.getElementById("__EVENTTARGET").value = eventTarget;
        document.getElementById("__EVENTARGUMENT").value = eventArgument;
        theForm.submit();
    }
} 
</script>

Thanks

Jonathan

Answer 1

'Close': function() { alert("closing"); $(this).dialog("close"); __doPostBack = newDoPostBack; __doPostBack("aspnetForm",null); }}});});

The __doPostBack function takes the control which is causes the postback and an argument if required. You Javascript examples and your markup do not seem to match up. For example where I have quoted above, you reference aspnetForm, change this to the ID of the form and try again. Makesure that the ID you use for client script is the same as the client ID of the asp.net control at runtime. If A control resides in a INamingContainer then it will have a unique id based on its parent container, so YourControlID will become YourINaminContainerID_YourControlID.

Let us know the outcome.

Cheers,

Andrew

Answer 2

Hi Guys,

Just to let you all know 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 apends it to the bottom of the body tag so when you try to postback the button 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
                    )

Not ideal to modify the source library but its better than nothing

Answer 3

One cheeky hack I have used is to create a normal .net button along with textboxes etc. within a div on the page then using jquery get the html for that div and add it to the dialog then remove the html within the original div to avoid id duplication.

<div id="someDiv" style="display: none">
    <p>A standard set of .net controls</p>
    <asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
    <input id="button1" type="button" value="Confirm"  onclick="SomeEvent();" />
</div>

And the script

var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
        bgiframe: true,
        height: 300,
        modal: true
});

Answer 4

After creating your dialog simply move the dialog back into your form. Example:

 $("#divSaveAs").dialog({bgiframe:false,
                            autoOpen:false,
                            title:"Save As",
                            modal:true});
    $("#divSaveAs").parent().appendTo($("form:first"));

This worked for me. Postback works find.

Answer 5

One question for everyone involved ... how did you guys figure out that the dialog was taking itself out of the form? I am fairly new to JQuery so I am not familiar with any debugging tools. So, please go easy on the n00b.

Thanks

Answer 6

Many thanks for the post of csharpdev! The following code did it for my page:

$("#photouploadbox").dialog({
    autoOpen: false,
    modal: true,
    buttons: { "Ok": function() { $(this).dialog("close"); } },
    draggable: false,
    minWidth: 400 });

$("#photouploadbox").parent().appendTo($("form#profilform"));

Answer 7

I can get this working if I have one of each. One div, One script, One link. In my case the dialog is allowing the user to leave a "note" per db record. I don't have any buttons on my dialog, just the default upper right "x" to close the dialog.

But I'm trying to get this to work within a coldfusion query loop.. multiple records, with each having their own dialog button, associated script, and div. I'm changing the IDs dynamically so they're all unique (ie appending a _XX where XX is primary key of record to all the ids).

When I expand to this model, having multiple dialogs, scripts, divs.. If I open each dialog to edit the corresponding "note" for that record, it will only save the LAST one. Should I be doing the .parent().appendTo on a button click vs. automatically? Somewhere it's getting confused.

If I don't open any dialog (don't make any changes via dialog) and run a dump on the form results, I see all dialog fields coming through on the post as expected.

When I look at the raw html produced.. all the IDs are unique and are called appropriately. I was thinking I was getting collision on a conflicting name/id somewhere but all looks good on that front.

my script:

<script type="text/javascript">
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
        $(function() {
            $( "##dialog#getALLFacilityEquipOrders.order_id#" ).dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode",
                width: 500,
                resizable: false
            });

            $('.countable2').jqEasyCounter({
                'maxChars': 2000,
            });

            // Dialog Link
            $('##dialog_link#getALLFacilityEquipOrders.order_id#').click(function(){
                $('##dialog#getALLFacilityEquipOrders.order_id#').dialog('open');
                return false;
            });

            //hover states on the static widgets
            $('##dialog_link#getALLFacilityEquipOrders.order_id#, ul##icons li').hover(
                function() { $(this).addClass('ui-state-hover'); }, 
                function() { $(this).removeClass('ui-state-hover'); }
            );

            $("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit"));

        });
    </script>

my div:

<div id="dialog#getALLFacilityEquipOrders.order_id#" title="Notes For #getALLFacilityEquipOrders.cLicenseNumber# - Order ID: ORD-#getALLFacilityEquipOrders.order_id#"  style="display:none;">
        <cfquery datasource="#a_dsn#" name="getOrderNotes">
            select notebody
            from QIP_EquipOrders_Notes
            where fk_order_id = #getALLFacilityEquipOrders.order_id#
        </cfquery>
            <fieldset class="qip_menu">
                <label><b>Enter/Edit Notes:</b></label>
                <textarea class="countable2" id="notebody_#getALLFacilityEquipOrders.order_id#" name="notebody_#getALLFacilityEquipOrders.order_id#" rows="10" cols="75">#getOrderNotes.notebody#</textarea>
            </fieldset>    
    </div>

my button:

<a href="##" id="dialog_link#getALLFacilityEquipOrders.order_id#" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Notes</a>