Jquery UI Dialog with asp button trigger in update panel

Question

I have a issue with Jquery Modal dialog being called from a button inside an update panel..

here are the insights..

Javascript used for opening a Jquery modal dialog in aspx page..

<script type='text/javascript'>
    function openModalDiv(divname) {
        $('#' + divname).dialog({ 
            autoOpen: false, 
            bgiframe: true, 
            closeOnEscape: true, 
            modal: true, 
            resizable: false, 
            height: 'auto', 
            buttons: { Ok: function () { closeModalDiv(divname) } },
            open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
        });
        $('#' + divname).dialog('open');
        ('#' + divname).parent().appendTo($('form:FrmSearch'));
        $('#' + divname).css('overflow', 'hidden')
    }

    function closeModalDiv(divname) {
        $('#' + divname).dialog('close');
    }
</script>

the button in aspx page..

<asp:UpdatePanel ID="upDialogs" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnOpenDialog" runat="server" Text="Open Dialog" onclick="btnOpenDialog_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

The Div which needs to be called from code behind via javascript..

<div id="ErrorDiv2" title="Error" style="visibility:hidden">
    <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>

Finally the code behind ..

protected void btnOpenDialog_Click(object sender, EventArgs e)
{
    if (ProfileID == null)
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
        Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);  
    }
}

Now the Issue in detail.. Without the update panel the modal dialog pops very fine but makes full post back..

I want to have only a partial post back and hence am using a update panel..

The following are the solutions I have tried..

Added update panel to the existing div, dint work.
added an update panel along with runat="Server" for the div, still dint work..

Can any one help me with possible solutions?

ohmu · Accepted Answer · 2014-01-10 16:50:03Z

2

Thanks for your quick reply but I found another solution.

I added both update panel and runat parameters to the Div.

<asp:UpdatePanel ID="upErrorDiv" runat="server"><ContentTemplate>
    <div runat="server" id="ErrorDiv2" title="Error" style="visibility:hidden">
        <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
    </div>
</ContentTemplate></asp:UpdatePanel>

Changed the code behind as.

if (ProfileID == null)
{
    ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
    ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);  
    return;
}

edited Jan 10, 2014 at 16:50

ohmu

19.9k44 gold badges114 silver badges151 bronze badges

answered Oct 5, 2011 at 5:27

santosh s

411 silver badge6 bronze badges

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

Comments

Drakkonite · Accepted Answer · 2011-10-04 10:15:11Z

0

Could you try injecting the javascript into a Literal control inside UpdatePanel, istead registering it with ClientScriptManager ?

Kris

answered Oct 4, 2011 at 10:15

Drakkonite

5073 silver badges9 bronze badges

Collectives™ on Stack Overflow

Jquery UI Dialog with asp button trigger in update panel

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related