jquery formulaire de message à partir du dialogue

Question

J'ai une fonction js qui obtient html pour créer un nouvel employé à partir du contrôleur, l'insère dans une balise de formulaire (pour plus tard .serialize()), puis insère ce html à createDialog div et montre cette div comme dialogue.

<div id="createDialog" style="display:none;"> 
</div> 

$.get('/Employee/Create', 
    function (html) { 
     html = "<form id='createEmp'>" + html; 
     html = html + "</form>"; 
     $("#createDialog").html(html); 
     $("#createDialog").dialog({ 
      modal: true, 
      width: 500, 
      buttons: { "Save": function() { postEmployee(); } }, 
      close: function (ev, ui) { $(this).dialog('destroy'); } 
     }); 
    }); 


    function postEmployee() { 

     $.post('/Employee/Create', 
     $("#createEmp").serialize(), 
     function (html) { 
      $('#reply').html(html); 
     }); 
    } 

cela fonctionne, mais une seule fois. à chaque publication suivante, tous les champs de formulaire des publications précédentes sont également ajoutés à l'article en cours. cela peut-il être corrigé?

Tahnk Vous!

Answer 1

Vous devez également supprimer le ce que vous avez créé, comme élément <form>:

close: function (ev, ui) { $(this).dialog('destroy').empty(); } 

Vous pouvez faire toute la fonction un peu plus propre avec .wrapInner() comme ceci:

$.get('/Employee/Create', function (html) { 
    $("#createDialog").html(html).wrapInner("<form id='createEmp'> />"); 
    $("#createDialog").dialog({ 
     modal: true, 
     width: 500, 
     buttons: { "Save": postEmployee }, 
     close: function (ev, ui) { $(this).dialog('destroy').empty(); } 
    }); 
}); 

Answer 2

Il est mieux ne pas créer et détruire, mais créer et ensuite ouvrir et fermer.

html

<div id="createDialog" style="display:none;"> 
</div> 

js

var $dialog = $("#createDialog").dialog({ 
    modal: true, 
    autoOpen: false, 
    width: 500, 
    buttons: { "Save": function() { postEmployee(); } }, 
    close: function (ev, ui) { $(this).dialog('close'); } 
}); 
$.get('/Employee/Create', function (html) { 
    html = "<form id='createEmp'>" + html; 
    html = html + "</form>"; 
    $("#createDialog").html(html); 
    $dialog.dialog("open"); 
}); 


function postEmployee() { 
    $.post('/Employee/Create', 
    $("#createEmp").serialize(), 
    function (html) { 
     $('#reply').html(html); 
    }); 
} 

Answer 3

$.get('/Employee/Create', 
function (html) { 
    var nodeContent= "<form id='createEmp'>" + html + "</form>"; 
    $("#createDialog").empty(); 
    $("#createDialog").html(nodeContent); 
    $("#createDialog").dialog({ 
     modal: true, 
     width: 500, 
     buttons: { "Save": function() { postEmployee(); } }, 
     close: function (ev, ui) { $(this).dialog('destroy'); } 
    }); 
}); 

Answer 4

Utilisez l'excellent plug-in forme jquery de malsup: http://malsup.com/jquery/form/

Appel clearForm() sur le succès:

function postEmployee() 
    $('#createEmp').ajaxSubmit({ 
     url: '/Employee/Create' 
     , success: function(html){ 
      $('#reply').html(html); 
      $('#createEmp').clearForm(); 
     } 
    }); 
} 

Appelez resetForm() après avoir créé le formulaire pour empêcher le navigateur de restaurer les valeurs mises en cache.

$('#createEmp').resetForm();