JQuery dialog show HTML content and prevent removing HTML after dialog is closed?

Question

I have been working on Single page application for the past few days. One of the problems that I'm facing is related to JQuery dialog box. I would like to display my forms in JQuery dialog box. There is a few different screens and each of them have different form. User will click on Add or Edit button. I'm passing div id and that content should appear in the dialog box. Each div has unique id and each div has different form inside. Here is my code that creates JQuery dialog box:

JQuery dialog:

var dialogDiv;
$.extend({ 
    alert: function (message, title, height, width, print) {
        var dialogButtons = {
            "Ok": function() {
                message.hide();
                $(this).dialog("close");
            }
        };

        if (print) dialogButtons.Print = function() {
            $(this).dialog().printArea();
        };

        if (!dialogDiv) {
            dialogDiv = $("<div>"); 
        }   
        dialogDiv.dialog( {
            buttons: dialogButtons,
            resizable: false,
            title: title,
            modal: true,
            width: height,
            height: width,
            overflow:"auto",
            position: {
                    my: "center",
                    at: "center",
                    of: window
            }
        }).html(message);
    }
});

Here is example of my div containers for different forms:

//Form 1
<div id="myForm1" class="frmLayout">
    <form name="frmUser" id="frmUser" method="POST" action="#">
        <fieldset>
            <legend>User Info</legend>
            <div class="formItem">
                <span class="required" style="color:red;"><b>Required Fields</b></span>
            </div>
            <div class="formItem">
                <label for="last_name" class="required">Last Name:</label>
                <input type="text" name="ur_lname" id="ur_lname" value="" size="20" maxlength="30" />
            </div>
            <div class="formItem">
                <label for="first_name" class="required">First Name:</label>
                <input type="text" name="ur_fname" id="ur_fname" value="" size="20" maxlength="30" />
            </div>
            <div class="formItem">
                <label for="dob" class="required">DOB:</label>
                <input type="text" name="ur_dob" id="ur_dob" value="" size="10" maxlength="10" />
            </div>
            <div class="formItem">
                <p align="center"><input type="button" name="urSubmit" id="urSubmit" value="Submit"></p>
            </div>
        </fieldset>
    </form>
</div>

//Form 2
<div id="myForm2" class="frmLayout">
        <form name="frmVehicle" id="frmVehicle" method="POST" action="#">
            <fieldset>
                <legend>Vehicle Info</legend>
                <div class="formItem">
                    <span class="required" style="color:red;"><b>Required Fields</b></span>
                </div>
                <div class="formItem">
                    <label for="name" class="required">Name:</label>
                    <input type="text" name="ur_name" id="ur_name" value="" size="20" maxlength="30" />
                </div>
                <div class="formItem">
                    <label for="model" class="required">Model:</label>
                    <input type="text" name="ur_model" id="ur_model" value="" size="20" maxlength="30" />
                </div>
                <div class="formItem">
                    <p align="center"><input type="button" name="urSubmitV" id="urSubmitV" value="Submit"></p>
                </div>
            </fieldset>
        </form>
    </div>

...Form 3 and Form 4 similar.

Once user access home page all HTML content is loaded and set to display:none. Here is example how this content will be displayed in dialog box:

$('input[name="my button name"]').on('click', function formSubmit(){
    var tabID = $('#tabID').val(); //each tab on my home page has unique id. Current tab value is set to hidden field.
    var divID = $('#'+tabID+'Form'); //This line of code will select correct form
    $.alert(divID.show(),'Form Input',800,600); //here I show the content
});

Problem with this code is that divID content is wiped out from the page once I close my dialog box. For example I will click on Add button on my first tab. Form 1 will show in dialog box. Once I go to tab 2 and click and show Form 2 then go back to tab 1 and try to click on the Add button I will get blank page in my JQuery dialog box. For some reason previous content is removed from the page. I'm wondering how I can work around this problem and what is the best solution? Should I some how make a copy of my HTML content before I display in JQuery dialog or there is a better way to do this? If anyone can help or have any example please let me know.

Thank you.

Answer 1

So the problem is that you generate the Modal each time... I would do this way:

var dialogDiv;
$.extend({ 
    alert: function (message, title, height, width, print, clone) {
        var dialogButtons = {
            "Ok": function() {
                message.hide();
                $(this).dialog("close");
            }
        };

        if (print) dialogButtons.Print = function() {
            $(this).dialog().printArea();
        };

        if (!dialogDiv) {
            dialogDiv = $("<div>"); 
        } 
        if(clone){
            dialogDiv = $("body").append(dialogDiv);
        }
        dialogDiv.dialog( {
            buttons: dialogButtons,
            resizable: false,
            title: title,
            modal: true,
            width: height,
            height: width,
            overflow:"auto",
            position: {
                   my: "center",
                   at: "center",
                   of: window
            }
        }).html(message);
    }
});

I noticed that UI dialog works with DIVs which are already in the page. But instead of passing an existing element, you were creating one. That's in my opinion why you lose content. With the "clone" param, you can pass true/false, to decide if you want to append a new div in the body. So it will be available in the future.