Приложение jQuery ведет себя странно в диалоге jQuery - PullRequest
Новая
       16

Приложение jQuery ведет себя странно в диалоге jQuery

0 голосов
/ 30 сентября 2010

У меня есть диалоговое окно jQuery, в котором я отображаю форму. В форме есть элемент «picture_fields», к которому я добавляю новые поля, если пользователь нажимает «Добавить дополнительные изображения», то есть форма отображается с одним полем «Изображение», но пользователи могут добавлять больше, нажимая кнопку «». Ссылка "Добавить еще картинки".

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

Это моя (бездействующая) функция, которая обрабатывает нажатие кнопки «Добавить больше изображений»: 

/**
* Add Picture Field Functionality
*/
    $('form a.add_child').live('click', function() {
        $("#picture_fields").append('<p> File Field Here </p>');
        return false;
    });

Это мой обработчик диалогов: 

/**
* New Object Button opening modal Dialog
*/
    $('.dialog_form_link').live('click', function() {
        var $dialog = $('<div></div>')
            .appendTo('body')
            .load($(this).attr('href') + ' .entry_form')
            .dialog({
                title: $(this).text(),
                modal: true,
                autoOpen: false,
            show: {effect: 'blind'},
            hide: {effect: 'blind'},
        });

    $dialog.dialog('open');

    // prevent the default action, e.g., following a link
    return false;
    });
});

Пользователь нажимает кнопку «Новый объект» (с классом «dialog_form_link»), которая открывает форму «Новый объект» в диалоговом окне jquery. В этом диалоговом окне он затем нажимает ссылку «Добавить изображения» (с классом «add_child»). Отлично работает при первом открытии диалогового окна, после этого никогда не работает. Он снова начинает работать только после перезагрузки всей веб-страницы, но снова только один раз.

== UPDATE == Я попытался добавить опцию закрытия, как предложено: 

$('.dialog_form_link').live('click', function() {
    var $dialog = $('<div></div>')
        .appendTo('body')
        .load($(this).attr('href') + ' .entry_form')
        .dialog({
            title: $(this).text(),
            modal: true,
        autoOpen: false,
            width: 900,
            height: '900',
            position: 'center',
            show: {effect: 'fade', duration: 300},
            hide: {effect: 'blind', duration: 500},
            close: function(ev, ui) { $(this).destroy(); alert("Closed"); }
        });

Я тоже пытался с close: function(ev, ui) { $(this).close(); }. Обе они вызываются при закрытии диалога (я нажимаю X и вижу предупреждение), НО после этого я больше не могу открыть диалог. Я получаю серый оверлей, но нет диалога. Я полагаю, что это распространенная ошибка новичков (и я тоже!), Когда диалоги jquery не инициализируются должным образом, так что, может быть, я здесь что-то делаю не так? Я полагаю, что опция autoOpen также имеет к этому какое-то отношение, поэтому я включил и отключил это, с помощью close и destroy, но опять же, без игры в кости. Я посмотрю на этот ответ , но в то же время, если у кого-то есть какие-либо другие предложения, я буду очень признателен.

Ответы [ 3 ]

1 голос
/ 01 октября 2010

Хорошо, я понял это ...

Я добавил функцию к опции закрытия, которая фактически удаляет DIV, к которому присоединено диалоговое окно, например:

close: function(ev, ui) {$ ('div.dialog'). remove ();}

Я на самом деле думаю, что на самом деле не на 100% правильно (нужно ли прикреплять диалог к ​​DIV?), Но это работает, поэтому я придерживаюсь его, пока не стану более опытным: -)

Итоговый код: 

    $('.dialog_form_link').live('click', function() {
        var $dialog = $('<div class="dialog"></div>')
            .appendTo('body')
            .load($(this).attr('href') + ' .entry_form')
            .dialog({
                title: $(this).text(),
                modal: true,
//              autoOpen: false,
                width: 900,
                height: '900',
                position: 'center',
                show: {effect: 'fade', duration: 300},
                hide: {effect: 'blind', duration: 500},
                close: function(ev, ui) { $('div.dialog').remove(); }
            });

//      $dialog.dialog('open');

        // prevent the default action, e.g., following a link
        return false;
    });

Обратите внимание, что вместо этого я также выбрал функцию autoOpen, потому что это действительно то, что я хочу в этом случае.

1 голос
/ 30 сентября 2010

Грубое предположение - я знаю, что у других людей были проблемы с диалоговыми окнами jQuery UI, не содержащими тег Form.Я думаю, что когда вы вызываете dialog() fn, это может привести к тому, что весь DIV будет перемещен за пределы тега form.Это будет означать, что ваш селектор form a.add_child не будет работать, потому что a.add_child может больше не находиться внутри формы.

См. этот ответ для кода, чтобы вернуть диалоговое окно div вправильное место.

0 голосов
/ 30 сентября 2010

Не могли бы вы сделать ссылку Добавить изображение вместо диалоговой кнопки? У меня есть диалог, в котором я делаю некоторые вещи, а затем добавляю опции в список выбора. У меня это работает. 

                buttons:
                {
                    'Add': function () {
                        ... 
                        $("#picture_fields").append('<p> File Field Here </p>');

                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                        }
                }
...