Save response data and use that data in another function

Question

There is two functions in the below code:
1: add-new-widget", function().
This code is used for inserting json data and getting last insert ID from a table. In this code, ID is getting.
alert(response['id']) shows the ID.
My problem is I don't know how can I save this response ID and pass to another function.
I am planning to pass ID when click a submit button. I wrote onclick function onclick="saveData('+id+');

2: function saveData(id). This function purpose is update data where ID from first function.

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

hi i want to give you suggestion : try to use the "var" as less as possible just only because of the best practice and performance. as i have edited your question — Himesh Aadeshara
– Himesh Aadeshara, Commented Jul 27, 2015 at 7:10

Bibek Sharma · Accepted Answer · 2015-07-26 06:07:22Z

1

This should work.Did you tried calling saveData() on success function of first AJAX request.

<!-- 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 --

answered Jul 26, 2015 at 6:07

Bibek Sharma

3,3507 gold badges45 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sarath TS Over a year ago

I used this method but when we click on button ".add-new-widget" the data is updated with undefined result.

Bibek Sharma Over a year ago

Does response['id'] contains result?

Sarath TS Over a year ago

Yes response['id'] contains results "UPDATE homegrid SET title = 'undefined', subtitle = 'undefined', circle = 'undefined', text = 'undefined', price = 'undefined', pseudo_price = 'undefined', link = 'undefined', color = 'undefined', columns = 'undefined' WHERE id = '35' ". Is jquery have any method to store response['id'] outside in a variable.

Sarath TS Over a year ago

The problem is I am defining a id = 1 and id is increment. Because when I am clicking on ".add-new-widget" button I need more forms. var id = 1;  $('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/>'; id++;

tkeram · Accepted Answer · 2015-07-27 07:51:36Z

0

I would sugesst to use Object Oriented style.

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

Then you have no problem with ID iteration or changes.

answered Jul 27, 2015 at 7:51

tkeram

2141 silver badge5 bronze badges

Collectives™ on Stack Overflow

Save response data and use that data in another function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related