Как удалять данные в SimpleModal каждый раз при закрытии модального окна

Я использую плагин Эрика Мартина SimpleModal 1.4.1 с JQuery 1.4.2 для отображения базовой формы в модальном окне.

Форма имеет 2 элемента JQuery UI Datpicker.

Все работает как задумано (я так думаю). Datepickers отображают свои календари, когда пользователь фокусирует текстовые поля Datepicker. Когда пользователь нажимает кнопку «Отмена», модальное окно исчезает, а значения, хранящиеся в элементах Datepicker, скрываются. Вот в чем проблема.

Мне нужно, чтобы модальное окно «забывало» все значения формы, которые оно содержит, всякий раз, когда окно закрывается либо потому, что форма была отправлена, либо была нажата кнопка отмены, а не просто скрыть их. Я не возражаю, если мне придется делать это программно, если это необходимо.

Мой текущий код SimpleModal выглядит так:

$('#NewDeliverable').click( function() {
            $("#DeliverableFormContainer").modal({onOpen: function (dialog) {
                dialog.overlay.fadeIn('slow', function () {
                    dialog.data.hide();
                    dialog.container.fadeIn('slow', function () {
                        dialog.data.slideDown('slow');
                    });
                });

EDIT Спасибо @Josiah Ruddell за помощь. Вот полный рабочий код для всех, кто столкнулся с этой проблемой:

$('#NewDeliverable').click( function() 
        {
            $("#DeliverableFormContainer").modal({ 
                onOpen: function (dialog) 
                {
                    dialog.overlay.fadeIn('slow', function () 
                    {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function () 
                        {
                            dialog.data.slideDown('slow');
                        });
                    });
                },
                onClose: function(dialog)
                {
                    dialog.data.find(':input').each(function () 
                    {
                        switch (this.type) 
                        {
                            case 'password':
                                $(this).val('');
                                break;
                            case 'select-multiple':
                            case 'select-one':
                                $(this).val(-1);
                                break;
                            case 'text':
                            case 'textarea':
                                $(this).val('');
                                break;
                            case 'checkbox':
                            case 'radio':
                                this.checked = false;
                        }
                    });

                    $.modal.close(); // must call this!

                }, persist: true
            });
        });


            }});
        });

jquery css simplemodal
person Kyle Noland    schedule 06.12.2010    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Добавьте обратный вызов onclose, который очищает модальные данные. Вы можете легко сделать это jquery-плагином, называемым clear form.

$("#DeliverableFormContainer").modal({
    persist: true, // don't clone the data
    onOpen: function (){ /* code */ },
    onClose: function(dialog){
        dialog.data.find(':input').each(function () {
            if(this.type.match(/password|text|textarea/))
                $(this).val('');
            else if(this.type.match(/select\-multiple|select\-one/))
                $(this).val('-1');
            else if(this.type.match(/checkbox|radio/))
                this.checked = false;
        });
        $.modal.close(); // must call this!
    }
});
person Josiah Ruddell    schedule 06.12.2010
comment
В любом случае должно работать, я обновил пример. Вы можете просмотреть изменения и получить этот код, если хотите. - person Josiah Ruddell; 07.12.2010
comment
Кнопка закрытия все еще сломана для меня. В настоящее время я привязываюсь, присваивая кнопке значение class=simplemodal-close. Нужно ли мне делать что-то другое? Кроме того, средства выбора даты все еще появляются, когда они получают фокус, но выбранное значение не вводится в текстовое поле при выборе даты. - person Kyle Noland; 07.12.2010
comment
class=simplemodal-close должен работать, проверьте наличие ошибок где-то еще на странице. Проблема с выбором даты, вероятно, связана с тем, что вы прикрепляете средства выбора даты к элементам до открытия модального окна. Затем открывается модальное окно и клонирует эти элементы. Вам нужно использовать параметр persist: true, поэтому простой модальный режим не клонирует данные. - person Josiah Ruddell; 07.12.2010
comment
Да, persist=true исправил это. Спасибо! - person Kyle Noland; 07.12.2010
comment
Если на одной странице есть несколько модальных контейнеров, следует ли изменить команду $.modal.close() для ссылки на конкретный модальный контейнер, т. е. $('#DeliverableFormContainer').modal.close() - person Kyle Noland; 07.12.2010
comment
В последний раз, когда я использовал его плагин, $.modal был глобальным экземпляром, и каждый раз, когда вы создавали новый экземпляр, он закрывал глобальный экземпляр (т.е. может быть только один экземпляр за раз). - person Josiah Ruddell; 07.12.2010