jQuery UI Dialog + Validate

Question

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

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

$(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) внутри него? Любая помощь будет оценена.

Answer 1

Когда вы инициализируете диалог 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' 
    }); 

Edit:

<form id='event_form'> 
    <div id="dialog" title="DialogTitle"> 
    </div> 
</form> 

Answer 2

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

$("#mdl_Subject").dialog({ 
    autoOpen: false, 
    show: "drop", 
    hide: "drop", 
    modal: true, 
    create: function() { 
     $(this).parent().appendTo($('#aspnetForm')); 
    } 
});