проблема в содержании диалога jquery ui

Question

У меня есть имя ссылки «login».

При нажатии на кнопку «login» откроется диалоговое окно jquery.

Диалог имеет две ссылки.Если щелкнуть ссылку, отобразится содержимое, относящееся к ссылке.

Теперь я пришел к своей проблеме.Если я снова нажму на ссылку «Войти», она показывает только измененный контент.Но я хочу только начальный контент.

Это моя единственная часть кода.

$( "#login-form" ).dialog({
                autoOpen: false,
                height: 210,
                width: 360,
                modal: true,
                show: "scale",
                hide: "scale",
                buttons: {
                    "Login": function() {
                        $("#login-frm").submit()                                    
                        },
                    Cancel: function() {
                        $(this).dialog( "close" );
                    }
                }
            });

            $( "#login" ).click(function(event) {
                event.preventDefault();
                $( "#login-form" ).dialog( "open" );
            })

Как я могу это сделать?

Answer 1

В вашем событии клика вы можете снова загрузить контент по умолчанию. Или же вы можете сохранить копию содержимого по умолчанию login-form в скрытом элементе div и заменить его до открытия диалогового окна.

$( "#login-form" ).dialog({
                autoOpen: false,
                height: 210,
                width: 360,
                modal: true,
                show: "scale",
                hide: "scale",
                buttons: {
                    "Login": function() {
                        $("#login-frm").submit()                                    
                        },
                    Cancel: function() {
                        $(this).dialog( "close" );
                    }
                }
            });

            $( "#login" ).click(function(event) {
                event.preventDefault();
                 $( "#login-form" ).html('give the default copy of the dialog here');
                $( "#login-form" ).dialog( "open" );
            })

Answer 2

Добавьте класс к элементам управления формы входа, которые необходимо очистить, например, "loginControls".Затем измените свою функцию $( "#login" ).click() на что-то вроде этого:

 $( "#login" ).click(function(event) {
       event.preventDefault();
       $( ".loginControls" ).each(function (i) {
             this.val('');
             });
       $( "#login-form" ).dialog( "open" );
 });

Обратите внимание, что если у вас есть больше, чем просто элементы управления текстовым полем для формы входа, вы можете создать отдельный класс, такой как "loginCheckBoxes", а затем выполните итерации с помощью $(this).removeAttr('checked');.

Это позволяет гибко использовать различные типы элементов управления без необходимости записывать весь HTML-код формы в коде обработки событий.