How to use jQuery UI dialog with ASP.NET UpdatePanel?

Question

This is what I have tried:

In my webform:

<div class="demo" style="float: left">
    <div id="dialog" title="Basic dialog">
        <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    <button id="opener">Open Dialog</button>
</div>
<!-- End demo -->

In my MasterPage:

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

        $("#opener").click(function () {
            $("#dialog").dialog("open");
            return false;
        });
    });
</script>

As you can see, I am just trying to implement the demo from the jQuery UI official website (http://jqueryui.com/demos/dialog/#animated) but it doesn't work.

What am I missing? Thanks in advance!

I"m guessing since the content is in an UpdatePanel, the button and dialog don't exist when the script in the master page runs. — Geoff
– Geoff, Commented Oct 12, 2011 at 10:55
Hi Geoff. I have just tried it with the script in the $(document).ready function but it does not work yet. However, I am not sure if this would solve the problem you are describing. Any other idea on how to solve it? Cheers — aleafonso
– aleafonso, Commented Oct 12, 2011 at 11:01

Community · Accepted Answer · 2017-05-23 10:34:32Z

1

See this question regarding running javascript after the UpdatePanel has loaded. After the UpdatePanel loads is when you want to define your dialog box and button click event.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Oct 12, 2011 at 11:09

Geoff

9,3508 gold badges40 silver badges48 bronze badges

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

1 Comment

aleafonso Over a year ago

Thanks a lot Geoff. Actually I was doing something similar to what that question's answers suggest in other parts of my code, but I didn't really understand why it was needed until now. Thanks a lot!

Collectives™ on Stack Overflow

How to use jQuery UI dialog with ASP.NET UpdatePanel?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related