Диалог пользовательского интерфейса jQuery + проверка

У меня возникли проблемы с проверкой диалогового окна пользовательского интерфейса jQuery с помощью Jquery Validate после нажатия кнопки «Сохранить».

Вот мой код для создания диалога Jquery. Он загружает диалог из целевого URL-адреса href:

$(document).ready(dialogForms);

function dialogForms() {
  $('a.dialog-form').click(function() {
    var a = $(this);
    $.get(a.attr('href'),function(resp){
      var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
      $('body').append(dialog);
      dialog.find(':submit').hide();
      dialog.find('#return').hide();
      dialog.dialog({
        title: a.attr('title') ? a.attr('title') : '',
        modal: true,
        buttons: {
          'Save': function() {submitFormWithAjax($(this).find('form'));},
          'Cancel': function() {$(this).dialog('close');}
        },
        close: function() {$(this).remove();},
        width: 'auto'
      });
    }, 'html');
    return false;
  });
}

function submitFormWithAjax(form) {
    form = $(form);
    $.ajax({
        beforeSend: function(data) {
            //alert("beforesend");
            form.validate();
        },
        url: form.attr('action'),
        data: form.serialize(),
        type: (form.attr('method')),
        dataType: 'text',
        error: function(data) {
            alert(data);
            $('#result').html(data);
        },
        success: function(data) {
            //alert("success");
            $('#result').html(data);
            setTimeout("reloadPage()", 500);
        }
    });
  return false;
}

Вызывается beforeSend, но, похоже, не вызывается метод validate, который находится на родительской странице, из которой вызывается Dialog.

        $(document).ready(function() {
            $("#event_form").validate({
                rules: {
                    Name: {
                        required: true
                    },
                    Category: {
                        required: true
                    }
                },
                messages: {
                    Name: "Please enter an event name",
                    Category: "Please choose a category"
                },
                submitHandler: function(form) {
                    alert("validated");
                    //                    $('#loading_1').show();
                    //                    $('#proceed_c').hide();
                    //                    $(form).ajaxSubmit();
                    //                    //form.submit();
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.next(".status"));
                }
            });

}

Проблема с beforeSend внутри submitFormWithAjax function, расположением $("#event_form").validate или submitHandler: function(form) внутри него? Любая помощь будет оценена.


person Dean    schedule 29.09.2010    source источник
comment
Можете ли вы сказать, что класс .error добавляется к вашим элементам, когда они недействительны?   -  person David Fox    schedule 30.09.2010


Ответы (2)


Когда вы инициализируете диалоговое окно jQueryUI, оно изменяет DOM, весь диалог извлекается из своего местоположения на странице и вставляется прямо перед тегом </body>. Вы можете увидеть это с помощью Firebug. Это вызывает проблему для Validate, потому что теперь форма пуста. Чтобы решить эту проблему, в событии открытия диалогового окна добавьте его к форме. Звучит очень странно, но поверьте мне, это работает :)

dialog.dialog({
    title: a.attr('title') ? a.attr('title') : '',
    modal: true,
    buttons: {
      'Save': function() {submitFormWithAjax($(this).find('form'));},
      'Cancel': function() {$(this).dialog('close');}
    },
    close: function() {$(this).remove();},
    open: function(){
        $(this).parent().appendTo($('#event_form'));
    },
    width: 'auto'
  });

Редактировать:

<form id='event_form'>
  <div id="dialog" title="DialogTitle"> 
  </div>
</form>
person Attila Szasz    schedule 05.10.2010
comment
Я пробовал это, и это не работает. Диалог теперь не появляется. Просто чтобы уточнить, страница, вызывающая диалоговое окно jquery и содержащая функцию dialogForms() (вызывающая страница), не содержит никаких элементов формы. Целевая страница содержит event_form и скрипт проверки jquery. Это правильные места для них? Является ли appendTo по-прежнему нацеленным на event_form? - person Dean; 06.10.2010
comment
Я отредактировал ответ, чтобы добавить структуру, которую я использую, диалоговое окно применяется к div, а проверка - к форме. Диалог добавится обратно в форму. Все это, включая код jquery, находится в отдельном файле и загружается в пустой div на моей странице в событии onclick(). - person Attila Szasz; 06.10.2010
comment
Модальный режим не работает для меня с этим методом, потому что он помещает диалог за тенью. jsfiddle.net/wtjones/ZWUq7/1 - person wtjones; 19.07.2013
comment
Отправлено изменение, чтобы исправить модальную проблему, как было предложено через bugs.jqueryui.com/ticket/9095. Не работает: jsfiddle.net/wtjones/ZWUq7/1 Исправлено: jsfiddle.net/wtjones/ZWUq7/3 - person wtjones; 19.07.2013
comment
Спасибо, @wtjones, это помогло мне: appendTo: $('#form1') - person Axel; 26.05.2015

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

    $("#mdl_Subject").dialog({
    autoOpen: false,
    show: "drop",
    hide: "drop",
    modal: true,
    create: function () {
        $(this).parent().appendTo($('#aspnetForm'));
    }
});
person skrile    schedule 12.11.2012
comment
Отправлено такое же модальное исправление для использования параметра appendTo, как предложено здесь: bugs.jqueryui.com/ticket/9095. Я думаю, что затронуты только более новые версии jquery ui (›= 1.10.2). - person wtjones; 19.07.2013