2

Using ASP.NET MVC 4, jQuery 1.6.2, jQuery UI 1.8.11. Currently debugging in Firefox 16.0.2.

I am trying to make this thing work so I have a reusable jQuery UI modal dialog with autoOpen: false which gets opened from the main page. So far so good. That reusable jQuery UI dialog will open a new modal dialog which is later destroyed and created again whenever needed (I tried to make the other one reusable too but I failed, it kept appearing as a div on the first dialog, not as a new separate dialog as it should so eventually I decided to create it every time I need it).

When I first open the first dialog, I can open and close the second dialog without problems. However the problem occurs when I close the first dialog and open it again. It behaves as it has as many dialog placeholder divs as the number of times I have opened the first dialog. Although I am pretty sure I destroy the second dialog AND remove the placeholder div every time I close it.

I have put the dialog code into the /Views/Shared/_Layout.cshtml file and that layout file is referenced by the main page. For those who are not familiar with ASP.NET MVC, the layout file is a shared file which contains header, footer and other html elements which define the layout of the web page, so that you can reference it from any View in your web site. So the layout is infact rendered along with any View which references that layout.

Here is the (pseudo) code in my layout file:

<html>
    <head>
        <script type="text/javascript">
            $.ajaxSetup({ cache: false });
            $(document).ready(function () {
                $("#veliki").dialog({
                    close: function () {
                        $("#veliki").html("");
                        $("#maleni").dialog("destroy");
                        $("body").find("#maleni").remove(); /* a desperate attempt to remove ALL divs which hold the 2nd dialog, was just: $("#maleni").remove(); */
                    },
                    modal: true,
                    height: 600,
                    width: 800,
                    left: 0,
                    autoOpen: false
                });

                $(".openDialog").live("click", function (e) {
                    e.preventDefault();
                    $("#veliki").load($(this).attr('data-url'));
                    $("#veliki").dialog("open");
                });
            });
        </script>
    </head>
    <body>
        <div id="veliki"></div>
        @RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
    </body>
</html>

The code related to the second dialog is placed in one of the views which reference another layout (the layout which does not contain any jQuery code). The code in that View looks like this:

<script type="text/javascript">
    $(document).ready(function () {
        $(".openSubDialog").live("click", function (e) {
            e.preventDefault();
            $('<div id="maleni"></div>')
            .appendTo("body")
            .dialog({
                close: function () {
                    $("#maleni").dialog("destroy");
                    $("#maleni").remove();
                    $("body").find("#maleni").remove(); /* delete them all. but where did "they" appear from?! */
                },
                modal: true,
                height: 450,
                width: 600,
                left: 0
            })
            .load($(this).attr('data-url'));
        });
    });
</script>

To sum it up:

  1. I open the #veliki dialog by clicking a link in the main page.
  2. I create and open the #maleni dialog by clicking a link in the first dialog.
  3. I close the #maleni dialog, destroying it and removing the #maleni div.
  4. I close the #veliki dialog.
  5. I open #veliki dialog by clicking another link in the main page.
  6. I create and open the #maleni dialog which magically appears two times now (as seen in FireBug).
  7. I slam the wall with my head which doesn't solve anything.

Anyone with an idea?

Improve this question

1 Answer 1

Reset to default
1

Why don't you use already existing window but with varying content? I have created a fiddle with this functionality : http://jsfiddle.net/scaillerie/wEX42/ .

The main point is that you don't have to handle the close event of your #maleni window : you only close it with $("#maleni").dialog("close"); and when you again need it, you re-open it : $("#maleni").dialog("open");.

An example of implementation in your case can be the following :

Layout page :

<html>
    <head>
        <script type="text/javascript">
            $.ajaxSetup({ cache: false });
            $(document).ready(function () {
                $("#veliki").dialog({
                    close: function () {
                        $("#maleni").dialog("close");
                    },
                    modal: true,
                    height: 600,
                    width: 800,
                    left: 0,
                    autoOpen: false
                });

                $("body").delegate(".openDialog", "click", function (e) {
                    $("#veliki").dialog("open").load($(this).attr('data-url'));
                });

                $("#veliki").delegate(".openSubDialog", "click", function (e) {
                    $("#maleni").dialog("open").load($(this).attr('data-url'));
                });
            });
        </script>
    </head>
    <body>
        <div id="veliki"></div>
        @RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
    </body>
</html>

Sub-page :

<div id="maleni"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#maleni").dialog({
                modal: true,
                height: 450,
                width: 600,
                left: 0,
                autoOpen: false
         })
         .load($(this).attr('data-url'));
        });
    });
</script>
Improve this answer
1
  • Thanks, very clean and well done. I tried something like this actually, not sure why it wouldn't work. The only thing you need to change is $("body").delegate(".openDialog", "click", function (e) { instead of $("#veliki").delegate(".openDialog", "click", function (e) {
    – Dejan Janjušević
    Commented Nov 29, 2012 at 10:46

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