0

所以，我有一个“添加项目”脚本，可以在数据库中创建一个对象。效果很好。

我想，一旦对象成功保存到数据库，在将附加到列表视图的视图中创建该对象的克隆。它将从 DB 中接收 id，因此可以对其进行编辑，但其余部分只能从输入字段中克隆。

如何做到这一点的任何例子？具体来说，我需要帮助来思考要成功触发什么。

谢谢！

4

2 回答 2

0

首先，我猜你有一个发送数据的表单。您是使用 AJAX 发送此数据还是执行完整的回发？

如果您只是使用 AJAX 表单提交，您可以绑定 $.ajax({...}); 的成功函数；功能。

我想你的表格需要在成功时被清除，但由于问题的模糊性，我只提供一个例子：

$("#myForm").on("submit",function(){
     var formData = {
          field1: $("#inputWhatever").val(),
          field2: $("#inputWhatever2").val()
     };
     $.ajax({
          url: "/dopost/save",
          data: formData,
          success: function(){
               var domToAppend = $("#whateverYouWantToAppendTo");
               domToAppend.append(
                    $("<div>")
                         .addClass("row-container")
                         .append(
                              $("<div>")
                                   .text(formData.field1)
                         )
                         .append(
                              $("<div>")
                                   .text(formData.field2)
                         )
               );
          }
     });
});

这将发送您的数据，并在服务器回复时，您可以从成功函数中获取 id。一旦您知道如何获取数据，添加 dom 元素就非常简单。

http://api.jquery.com/append/

于 2012-07-24T19:22:32.340 回答
0

另一种方法来做到这一点。有隐藏的行模板，在其上调用 JQuery克隆，填充字段并附加到容器。

HTML

<div id="row-template" style="display:none;">
    <div class="field1" />
    <div class="field2" />
    <div class="field3" />
</div>

JS

var it = 0;   //global
...
$("form").submit(function(){

     var $rowsHolder = $("#rows-holder");

     $.post("/destination",
            $("form").serializeArray(),
            function(data){

            var $row = $("#row-template").clone();
            $row.attr("id", "row"+it);
            $row.css("display","block");
            $row.children(".field1").text(data.id);
            $row.children(".field2").text(dataForm.field1);
            ...
            $rowsHolder.append($row);
            it++;
     });
});
于 2012-07-25T12:19:46.183 回答