Okno dialogowe jQuery UI + Sprawdź poprawność

Question

Mam problem z sprawdzaniem poprawności okna dialogowego interfejsu jQuery za pomocą funkcji sprawdzania poprawności Jquery po kliknięciu przycisku Zapisz.

Oto mój kod do tworzenia okna dialogowego Jquery. Ładuje dialog z tarczy 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 nazywa, ale nie wydaje się, aby wywołać metodę validate, który znajduje się na stronie nadrzędnej, z którego Dialog nazywa.

 $(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")); 
       } 
      }); 

} 

Czy problem z beforeSend w submitFormWithAjax function, lokalizacji $("#event_form").validate lub submitHandler: function(form) w nim? Każda pomoc zostanie bardzo doceniona.

Answer 1

Po zainicjowaniu okna dialogowego jQueryUI modyfikuje ono DOM, całe okno dialogowe jest pobierane z jego lokalizacji na stronie i wstawiane tuż przed znacznikiem </body>. Możesz to zobaczyć za pomocą Firebuga. Powoduje to problem w Validate, ponieważ teraz formularz jest pusty. Aby rozwiązać ten problem, w otwartym wydarzeniu okna dialogowego dołącz je do formularza. Brzmi naprawdę głupi, ale uwierzcie mi, to działa :)

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

Zajęło nieco inne podejście do tego. Musiałem ponownie wykorzystać moje modalnego formularza więc dołączyć go raz jQuery „tworzy” z modal:

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