current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
    
Mybe it because you are using updatepannel –  COLD TOLD Apr 19 '12 at 21:45
    
Is addressopener a button? –  James Johnson Apr 19 '12 at 21:54
    
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 Apr 20 '12 at 0:15

2 Answers 2

up vote 2 down vote

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.

share|improve this answer
    
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. –  Ashwin Chandran Apr 20 '12 at 18:20
up vote 1 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.