jQuery UI Dialog on user control with ASP.NET button postback

Question

I have a jQuery UI dialog that works great from my aspx.page

My problem is that I need to move part of the page into a usercontrol. I moved the divs and the jquery to a user control. The control pops up fine, however the server side controls fire.

Here is my code to popup the dialog.

        var $partyaddress = $('#addressinformationcontent').dialog({
            autoOpen: false,
            modal: true,
            height: 450,
            width: 850,
            title: 'Party Address Information'
        });

        $('#addressopener').click(function () {
            $('#addressinformationcontent').parent().appendTo($("form:first"));
            $partyaddress.dialog('open');
            return false;
        });

My div which is popped up in the dialog is:

<div id="addressinformationcontent">

<asp:UpdatePanel ID = "updatePanelAddress" runat="server">

<ContentTemplate>

//some asp controls here and a asp.net submit button

/ContentTemplate>

</asp:UpdatePanel>

</div>

I think I understand the problem. jquery moves the dialog outside of the Form tags using the DOM and I need to add them back. The line I have in the click function appends it back to the "form" but the usercontrol has no form tag. Oddly when I first popup the dialog, I have to push a button on the dialog to load the form fields which works fine and loads the fields. After the first postback on the dialog, all server side controls quit working. I have no idea how to fix this. Any help would be much appreciated

I tried removing the update panel, but there was no difference. addressopener is a hyperlink control, which works great and pops up the dialog. Its the server side postback controls in the dialog that wont fire. — Ashwin Chandran
– Ashwin Chandran, Commented Apr 20, 2012 at 0:15

irfanmcsd · Accepted Answer · 2012-04-20 02:56:09Z

2

Also the following line of code should be set outside click event in order to fire postback event properly within dialog box.

$('#addressinformationcontent').parent().appendTo($("form:first"))

Sample code will be.

$(function () {
      $('#addressinformationcontent').parent().appendTo($("form:first"))
      $("#addressinformationcontent").dialog(
      {
         autoOpen: false,
         ...
       });
});

If you want to keep jquery dialog open after server side postback, you need little bit tweak. One example is here.

i: create a variable in code behind file.

protected string PostBackOption ="";

ii: add ispostback condition on page load or page pre render event.

if (Page.IsPostBack)
{
   PostBackOption = "$(\"#addressinformationcontent\").dialog(\"open\");";
}

iii: within js script add variable as

var $partyaddress = $('#addressinformationcontent').dialog({
        autoOpen: false,
        modal: true,
        height: 450,
        width: 850,
        title: 'Party Address Information'
    });

<%=PostBackOption %>

iv: In this way your dialog box will not disappear in case of postback.

answered Apr 20, 2012 at 2:56

irfanmcsd

6,5807 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashwin Chandran Over a year ago

I can't move the $('#addressinformationcontent').parent().appendTo($("form:first")) outside the click event because I have multiple dialog boxes. If I move it outside then only the first one gets added back to the form. I like your idea about adding the postback condition in the code behind. Will give that a shot.

robert · Accepted Answer · 2012-04-20 03:34:04Z

1

if you were reading the older answer... disregard.

I think i understand what your problem is now... I've faced same issue with jquerydialog. Never got around to fixing it so i instead used other tricks.

you can

a) use regular html controls within the dialog and javascript/jquery tricks with hiddenfields... (won't go into details cuz it's a bit cumbersome and if you miss something it'll take forever to debug)

b) use the overlay from jquerytools instead of the dialog in the same way you're trying to use the dialog now.

http://jquerytools.org/demos/overlay/index.html

edited Apr 20, 2012 at 3:34

answered Apr 20, 2012 at 2:38

robert

1,5435 gold badges19 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery UI Dialog on user control with ASP.NET button postback

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related