Question

我有一个js函数，它从控制器获取html创建新员工，将其插入到表单标记中（以后用于.serialize（）），然后将此html插入到createDialog div并将此div显示为对话框。

<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);
        });
    }

这有效，但只有一次。对于每个下一篇文章，以前帖子中的所有表单字段也会添加到当前帖子中。可以修复吗？

Tahnk你！

Answer 1

您还需要删除您创建的<form>元素，如下所示：

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

您还可以使用.wrapInner()使整个功能更清晰：

$.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

最好不要创建和销毁，而是创建然后打开和关闭。

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

使用malsup的优秀jquery表单插件：http://malsup.com/jquery/form/

成功时调用clearForm（）：

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

在创建表单后调用resetForm（）以防止浏览器恢复缓存的值。

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

来自对话框的jquery帖子表单

4 个答案: