Диалоговият прозорец на JQuery показва HTML съдържание и предотвратява премахването на HTML след затваряне на диалоговия прозорец?

През последните няколко дни работя върху едностранично приложение. Един от проблемите, с които се сблъсквам, е свързан с диалоговия прозорец JQuery. Бих искал да покажа формулярите си в диалоговия прозорец на JQuery. Има няколко различни екрана и всеки от тях има различна форма. Потребителят ще щракне върху бутона Добавяне или Редактиране. Предавам div id и това съдържание трябва да се появи в диалоговия прозорец. Всеки div има уникален идентификатор и всеки div има различна форма вътре. Ето моят код, който създава диалогов прозорец JQuery:

Диалогов прозорец на JQuery:

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);
    }
});

Ето пример за моите div контейнери за различни форми:

//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>

...Формуляр 3 и Формуляр 4 подобни.

След като потребителят получи достъп до началната страница, цялото HTML съдържание се зарежда и се настройва на display:none. Ето пример как това съдържание ще се показва в диалогов прозорец:

$('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
});

Проблемът с този код е, че съдържанието на divID се изтрива от страницата, след като затворя диалоговия прозорец. Например ще щракна върху бутона Добавяне в първия си раздел. Формуляр 1 ще се покаже в диалогов прозорец. След като отида в раздел 2 и щракна и покажа формуляр 2, след това се върна в раздел 1 и се опитам да щракна върху бутона Добавяне, ще получа празна страница в моя диалогов прозорец JQuery. По някаква причина предишното съдържание се премахва от страницата. Чудя се как мога да заобиколя този проблем и кое е най-доброто решение? Трябва ли да направя копие на моето HTML съдържание, преди да го покажа в диалоговия прозорец на JQuery, или има по-добър начин да направя това? Ако някой може да помогне или има пример, моля да ме уведоми.

Благодаря ти.


person espresso_coffee    schedule 13.06.2017    source източник
comment
Можете да използвате .clone().   -  person apires    schedule 13.06.2017
comment
В първия JS откъде идва методът .dialog()? Bootstrap.js?   -  person Sampgun    schedule 13.06.2017
comment
@TonySamperi .()dialog е JQuery функция.   -  person espresso_coffee    schedule 13.06.2017
comment
@doutriforce Опитах клонинг, но моят div с форма в него се появи на екрана ми. Можете ли да дадете някакъв пример?   -  person espresso_coffee    schedule 13.06.2017
comment
Не, не е. Имате предвид jQueryUI?   -  person Sampgun    schedule 13.06.2017
comment
var divID = $('#'+tabID+'Form').clone();. Това ли опита?   -  person apires    schedule 13.06.2017
comment
@TonySamperi Моя грешка. JQuery UI Widget.   -  person espresso_coffee    schedule 13.06.2017
comment
@doutriforce Опитах това и моят div все още е настроен да не показва нищо. Ето пример: var divID = $('#'+tabID+'Form').clone(); $.alert(divID.show(),'Въвеждане на формуляр',800,600);   -  person espresso_coffee    schedule 13.06.2017
comment
@TonySamperi Не, не е грешка. Действителният tabID е скрито поле и съдържа стойността на текущия отворен раздел.   -  person espresso_coffee    schedule 13.06.2017
comment
@espresso_coffee, това ли ти трябва? jsfiddle.net/t5j8xjxb   -  person apires    schedule 13.06.2017
comment
@doutriforce Това е, което търся. Опитвали ли сте да показвате/скривате няколко формуляра?   -  person espresso_coffee    schedule 13.06.2017
comment
@espresso_coffee, не, не многократно. Но трябва да работи по същия начин с всеки формуляр.   -  person apires    schedule 13.06.2017
comment
@espresso_coffee, тук, с множество форми.   -  person apires    schedule 13.06.2017
comment
@doutriforce забелязахте ли, че ще създава нов HTML всеки път, когато щракнете върху бутоните в лентата за навигация. Ако не щракнете върху бутона за затваряне, това може да причини всякакви проблеми. Поради тази причина използвах диалогов прозорец.   -  person espresso_coffee    schedule 13.06.2017
comment
@espresso_coffee, но така работи .dialog()...ако трябва да изтриете диалоговия прозорец, който се затваря, трябва просто да добавите destroy при събитие за затваряне. Като това.   -  person apires    schedule 13.06.2017


Отговори (1)


Така че проблемът е, че генерирате Modal всеки път... Бих направил така:

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);
    }
});

Забелязах, че диалоговият прозорец на потребителския интерфейс работи с DIV, които вече са в страницата. Но вместо да подадете съществуващ елемент, вие създавате такъв. Според мен затова губите съдържание. С параметъра "clone" можете да подадете true/false, за да решите дали искате да добавите нов div в тялото. Така че ще бъде наличен в бъдеще.

person Sampgun    schedule 13.06.2017
comment
Какво трябва да се предаде в аргумента за клониране? Колко различно е това от предишния код? - person espresso_coffee; 13.06.2017
comment
не виждаш ли къде е разликата? - person Sampgun; 13.06.2017
comment
Виждам, че сте добавили нов аргумент във функцията, но нищо не ми казва как това ще се отрази на конструкцията на диалоговия прозорец или какво трябва да предам в аргумента за клониране? - person espresso_coffee; 13.06.2017
comment
Добавих описанието в долната част на отговора. Моля презаредете! - person Sampgun; 13.06.2017
comment
Защо да изпращате clone като параметър, ако винаги трябва да е вярно? - person apires; 13.06.2017
comment
Който каза, че? Може би искате да отваряте диалогови прозорци и да не ги запазвате....все пак, ако искате, мога да го изтрия! :) - person Sampgun; 13.06.2017
comment
Не се занимавай, приятелю. Просто питах. - person apires; 13.06.2017