jQuery modal form dialog postback problems

Question

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,
            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>

score 69 · Answer 1 · answered Mar 03 '09 at 21:14

69

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.

answered Mar 03 '09 at 21:14

1

After wrestling with this problem all morning, I came across this and it works great. I love 1 line fixes. – hacker Mar 30 '09 at 19:15
Thanks for this. Saved me a lot of pain – AJM Jan 18 '10 at 11:05
2

This works great in certain situations (like mine!) I changed it a little to be even more jQuery-ish add the code that moves it back into the form to the open: method. open:function(){$("#divSaveAs").parent().appendTo($("form:first"));} – Tom Mar 09 '10 at 18:35
3

Thanks - this works for me. Anyone know why jqui dialog moves those controls out of the form? Are they assuming you don't want UI elements in the dialog POSTed to the server? – russau Mar 10 '10 at 22:03
+1 Even years later this is still the best answer that I have found to this problem. Thanks! – Devin Mar 16 '12 at 17:21
Great! This saved my bacon when I was trying some terribad html to workaround this (nested forms that worked in ie, but died in reasonable browsers). Moving the dialog into the first form instead fixed all the issues I was having. – psantiago Jun 21 '12 at 14:41
1

@russau reasons for appending to body explained in http://forum.jquery.com/topic/preventing-dialog-from-rearranging-dom-flow -- basically it's the only guaranteed way to z-index it properly in IE – drzaus Oct 30 '13 at 15:33

score 10 · Answer 2 · edited Aug 19 '13 at 17:00

10

Be aware that there is an additional setting in jQuery UI v1.10. There is an appendTo setting that has been added, to address the ASP.NET workaround you're using to re-add the element to the form.

Try:

$("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" });

edited Aug 19 '13 at 17:00

Peter Mortensen

30,738
21
105
131

answered May 11 '13 at 11:11

Mike

661
7
13

Msxmania · Answer 3 · 2017-12-05T13:09:15.753

2

"AppendTo" option works to me.

$("#dialog").dialog({ ..., appendTo:"form" });

See: http://api.jqueryui.com/dialog/#option-appendTo

edited Dec 05 '17 at 13:09

answered Jul 31 '14 at 03:39

Msxmania

53
2
9

score 1 · Answer 4 · answered Sep 19 '10 at 12:58

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"));

score 1 · Answer 5 · edited Aug 19 '13 at 16:54

One cheeky hack I have used is to create a normal .NET button along with textboxes, etc. within a div on the page, using jQuery get the HTML for that div, add it to the dialog, and 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
});

score 0 · Answer 6 · edited Aug 19 '13 at 16:59

0

It works as expected when I used

$("#divDlg").dialog("destroy");

instead of

$("#divDlg").dialog("close").appendTo($("#Form1")).hide();

When we append to the Form and reopen the dialog, I had issues with layouts and z-index.

edited Aug 19 '13 at 16:59

Peter Mortensen

30,738
21
105
131

answered Aug 15 '13 at 03:12

Ullas

93
9

score 0 · Answer 7 · edited Aug 19 '13 at 19:48

I can get this working if I have one of each. One div, one script, and one link. In my case, the dialog is allowing the user to leave a "note" per database 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 (that is, 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 it 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>

note I'm doing double pound signs where needed to escape it. For those unfamiliar, CF uses pound signs around variables for output. — Steve, Oct 11 '10 at 19:28
UPDATE: I got this working once I moved the appendTo() to the click function of the button instead: //Dialog button $( "##opener#getALLFacilityEquipOrders.order_id#" ).click(function() { $("##dialog#getALLFacilityEquipOrders.order_id#").dialog( "open" ); $("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit")); return false; }); — Steve, Oct 11 '10 at 20:01

score 0 · Answer 8 · edited Aug 19 '13 at 19:40

0

'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. Your 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.

Make sure 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.

edited Aug 19 '13 at 19:40

Peter Mortensen

30,738
21
105
131

answered Feb 20 '09 at 09:00

REA_ANDREW

10,666
8
48
71

the reason i set the id to aspnetForm was because I tried using the real form name - summaryForm and my firebug javascript debugger said __EVENTTARGET was null. I examined the source and noticed that asp.net changes the clientside id to aspnetForm - still __EVENTTARGET is null......... – mancmanomyst Feb 20 '09 at 09:23
is the control causing postback the form itself or the button? In this instance its a modal dialog so there is no submit button. I have tried adding my own submit button instead of overriding one of the jquery generated buttons too but that didn't work either. – mancmanomyst Feb 20 '09 at 09:28

score 0 · Answer 9 · edited Aug 19 '13 at 16:57

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.

score 0 · Answer 10 · answered Nov 04 '20 at 06:29

0

To remove the animation glitch while appending dialog to form, below is the strategy.

open: function (event, ui) {
     var dg = $(this).parent();
     setTimeout(function () { dg.appendTo("form"); }, 1000);
});

answered Nov 04 '20 at 06:29

Rakesh Sharma

1
1

jQuery modal form dialog postback problems

10 Answers10

Linked