jQuery UI Dialog + Valider

Question

Je rencontre des problèmes lors de la validation d'une boîte de dialogue d'interface utilisateur jQuery à l'aide de Jquery Validate en cliquant sur Enregistrer.

Voici mon code pour créer une boîte de dialogue Jquery. Il charge la boîte de dialogue à partir d'une cible d'une 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; 
} 

Le beforeSend est appelé, mais il ne semble pas appeler la méthode validate, qui se trouve sur la page parente à partir de laquelle Dialog est appelée.

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

} 

est le problème avec le beforeSend au sein submitFormWithAjax function, l'emplacement de $("#event_form").validate ou submitHandler: function(form) en son sein? Toute aide est la bienvenue.

Answer 1

Lorsque vous initialisez la boîte de dialogue jQueryUI, elle modifie le DOM, la boîte de dialogue entière est supprimée de son emplacement dans la page et insérée juste avant la balise </body>. Vous pouvez le voir avec Firebug. Cela provoque un problème pour valider, car le formulaire est maintenant vide. Pour résoudre ce problème, dans l'événement ouvert de la boîte de dialogue, ajoutez-le au formulaire. Il semble vraiment farfelue, mais croyez-moi, ça marche :)

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

ont adopté une approche légèrement différente à ce sujet. Je avais besoin de réutiliser mon formulaire modal, donc je l'ajouter une fois jquery « crée » le modal:

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