0

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!

aleafonso
  • 2,244
  • 8
  • 38
  • 58
  • 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 Oct 12 '11 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 Oct 12 '11 at 11:01

1 Answers1

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.

Community
  • 1
  • 1
Geoff
  • 9,340
  • 7
  • 38
  • 48
  • 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! – aleafonso Oct 12 '11 at 12:06