CODEWITHSUNDEEP
jqueryjquery-uidialog
Teodorescu
Teodorescu

Reputation: 158

JQuery UI dialog with destroy option and return to initial state

I have a trouble with JQuery Dialog.

I have this code : (initially is a simple DIV before clicking on second button called Maximize)

http://pastebin.com/BnpZ1AMA

After clicking "Maximize", the visible div becomes dialog. But when I want to return to div (initial state),it doesn't appear anymore on screen. In documentation,there say "Remove the dialog functionality completely. This will return the element back to its pre-init state."

I have javascript code :

           function makeit(data,maximize,minimize)
            {
                $(data).dialog();
                $(maximize).hide();
                $(minimize).show();
            }

            function remakeit(data,maximize,minimize)
            {
                $(data).dialog("destroy");
                $(maximize).show();
                $(minimize).hide();
            }

Is "destroy" good option or what need I to change back to DIV element ?

Thank you

Upvotes: 1

Views: 2608

Answers (2)

Jason
Jason

Reputation: 7682

If you want a minimize/maximize experience like windows, try my approach here:

https://stackoverflow.com/a/11561470/335514

and fiddle:

http://jsfiddle.net/jasonday/ZSk6L/

Upvotes: 0

bloodcell
bloodcell

Reputation: 601

It looks like your problem is that after you call dialog.destroy(), jQuery UI does return the element to its pre-init state, but makes it so that it has display:none set.

so:

remakeit = function(data,maximize,minimize)
            {
                $(maximize).show();
                $(minimize).hide();
                $(data).dialog("destroy");
                $(data).show();

            }

I think the problems you are having are due to the fact that the designers of jquery UI meant for the dialog div to act as a dialog div, not play both parts - a dialog div and a regular DOM div.

So, you have two options:

1) Continue the way you have been doing so far (trying to use the same div both as a dialog div and as a regular DOM div) - in that case, you have to play by what jquery UI does. If you say that when it "returns the div to its pre-init state" it is attached to the end of the body (as a "footer"), then in your remakeit function after the $(data).show(); statement, add a statement for moving the div to its original place:

remakeit = function(data,maximize,minimize)
            {
                $(maximize).show();
                $(minimize).hide();
                $(data).dialog("destroy");
                $(data).appendTo("#originalDialogContainer");
                $(data).show();
            }

Where #originalDialogContainer" is a div that originally contains your div:

<div id="originalDialogContainer">
    <div class="theory">
          ...
    </div>
</div>

Here's a link that explains moving DOM elements around in jQuery http://www.elated.com/articles/jquery-removing-replacing-moving-elements/

2) Have 2 "theory" divs to begin with - one will be for showing the "theory" div when it is "minimized", and one will be "theoryDialog" for showing the theory div as a dialog. When the user clicks "maximize" you will hide the regular "theory" div and do $(".theoryDiv").dialog();, and when the user clicks "minimize" inside the dialog you will destroy\close the dialog and show the regular "theory" div.

Hope this helps...

Upvotes: 1

Related Questions