Question

以下代码中有两个功能：
1：add-new-widget“，function（）。
此代码用于插入json数据并从表中获取最后一个插入ID。在此代码中，ID正在获取 alert(response['id'])显示ID 我的问题是我不知道如何保存此响应ID并传递给另一个功能我打算在点击提交按钮时传递ID。我写了onclick函数onclick="saveData('+id+');

2：function saveData(id)。此功能目的是更新数据，其中ID来自第一个函数。

var id = 1;
        <!-- Adding new widget begin -->
        $('body').on('click', ".add-new-widget", function(){

            var el   = '<div><div class="grid-stack-item-content" id="divAllTextBox_'+id+'" data-custom-id="'+id+'"><form id="addForm_'+id+'" method="post"><button type="button" class="btn btn-default deleteData" id='+id+' data-id="dataID_'+id+'">Delete</button><div class="form-group"><label for="title">Title</label><input type="text" class="form-control title title" id="title_'+id+'" placeholder="Title" name="title[]"></div><div class="form-group"><label for="subtitle">Sub Title</label><input type="text" class="form-control subtitle" id="subtitle_'+id+'" placeholder="Sub Title" name="subtitle[]"></div><div class="form-group"><label for="circle">Circle</label><input type="text" class="form-control circle" id="circle_'+id+'" placeholder="Circle" name="circle[]"></div><div class="form-group"><label for="text">Text</label><textarea class="form-control" rows="3" id="text_'+id+'" placeholder="Text" name="text[]"></textarea></div><div class="form-group"><label for="price">Price</label><input type="text" class="form-control" id="price_'+id+'" placeholder="Price" name="price[]"></div><div class="form-group"><label for="pseudoprice">Pseudo Price</label><input type="text" class="form-control" id="pseudoprice_'+id+'" placeholder="Pseudo Price" name="pseudoprice[]"></div><div class="form-group"><label for="link">Link</label><input type="text" class="form-control" id="link_'+id+'" placeholder="Link" name="link[]"></div><div class="form-group"><label for="color">Color</label><input type="text" class="form-control" id="color_'+id+'" placeholder="Color" name="color[]"></div><div class="form-group"><label for="column">Column</label><input type="text" class="form-control" id="column_'+id+'" placeholder="Column" name="column[]"></div><button class="btn btn-default" id='+id+' onclick="saveData('+id+'); return false;">Submit</button></form></div><div/>';
            id++;
            var grid = $('.grid-stack').data('gridstack');
            grid.add_widget(el, 0, 0, 2, 11, true);

            <!-- Insert Position Begin -->
            var res = _.map($('.grid-stack .grid-stack-item:visible'), function (el) {
                el  = $(el);
                var node = el.data('_gridstack_node');
                return {
                    id: el.attr('data-custom-id'),
                    x: node.x,
                    y: node.y,
                    width: node.width,
                    height: node.height
                };
            });
            var json = JSON.stringify(res);
            //var id;
            $.ajax({
                async:false,
                type: "post",
                url: "insert.php",
                data: {json: json, jsonData: 'insertjson'},
                success: function (response) {
                    saveData(response['id']);
                }
            });

            <!-- Insert Position End -->

        });
        <!-- Adding new widget end -->

    });

    <!-- Insert and replace div begin -->
    function saveData(id){
         var ID             = id;
         var title          = $("#title_"+ID).val();
         var subtitle       = $("#subtitle_"+ID).val();
         var circle         = $("#circle_"+ID).val();
         var text           = $("#text_"+ID).val();
         var price          = $("#price_"+ID).val();
         var pseudo_price   = $("#pseudoprice_"+ID).val();
         var link           = $("#link_"+ID).val();
         var color          = $("#color_"+ID).val();
         var column         = $("#column_"+ID).val();
         var addForm        = 'addForm';
         var dataString     = 'title='+title+'&subtitle='+subtitle+'&circle='+circle+'&text='+text+'&price='+price+'&pseudo_price='+pseudo_price+'&link='+link+'&color='+color+'&column='+column+'&addForm='+addForm+'&ID='+ID;
         $.ajax({
         type: "post",
         url: "insert.php",
         data: dataString,
         cache: false,
         success: function(response) {
             alert(response);
         }
         });
    };<!-- Insert and replace div end -->

Answer 1

这应该可行。你尝试在第一个AJAX请求的成功函数上调用saveData（）。

<!-- Adding new widget begin -->
        $('body').on('click', ".add-new-widget", function(){

            var el   = '<div><div class="grid-stack-item-content" id="divAllTextBox" ><form id="addForm" method="post"><button class="btn btn-default"  onclick="saveData('+id+'); return false;">Submit</button></form></div><div/>';
            var grid = $('.grid-stack').data('gridstack');
            grid.add_widget(el, 0, 0, 2, 11, true);

                <!-- Insert Position Begin -->

                var json = some data;
                var id;
                //alert(id);
                $.ajax({
                    async:false,
                    type: "post",
                    url: "insert.php",
                    data: {json: json, jsonData: 'insertjson'},
                    success: function (response) {
                         saveData(response['id']);
                    }
                });

                <!-- Insert Position End -->
            });
            <!-- Adding new widget end -->

    <!-- Update Data-->
        function saveData(id){
             var ID             = id;
             var title          = $("#title_"+ID).val();
             var subtitle       = $("#subtitle_"+ID).val();
             var addForm        = 'addForm';
             var dataString     = 'title='+title+'&addForm='+addForm+'&ID='+ID;
             $.ajax({
             type: "post",
             url: "insert.php",
             data: dataString,
             cache: false,
             success: function(response) {
                 alert(response);
             }
             });
        };<!-- Update end --

Answer 2

我最喜欢使用面向对象的风格。

var Widget = (function(){
var id = 0;
function _add() { id++; // your logic };
function _id() { return id; }
return {
add: _add,
id: _id
}
})();
Widget.add();

然后您对ID迭代或更改没有任何问题。

保存响应数据并在另一个函数中使用该数据

2 个答案: