How to save the dynamically created div upon refresh

Question

As of right now this is the code that I using to dynamically create the <div> inside the widgets div. There is a list of checkboxes and upon clicking the add button , divs of ids with the values of checked boxes are created dynamically. But upon refreshing the dynamically created divs are destroyed. How can I save the dynamically created divs.

HTML

    <div>

      <input type="checkbox" name="basic_line" value="basic_line">Basic line<br>
      <input type="checkbox" name="pie_chart" value="pie_chart">Pie Chart<br>
      <input type="button" value="Add" id="btnClick">


    </div>


    <div id="widgets" class="span6"></div>

JS

$(function(){
       $('#btnClick').click(function(){
           var val = [];
           $(':checkbox:checked').each(function(i){
              val[i] = $(this).val();
           });
            for (var value in val){

                $( "#widgets" ).append( "<div class = "+val[value]+
                ">"+'<input type="button" value = "Remove" onClick="remove_widget(\'' + val[value] + '\')" />'+
                "<div id="+val[value]+" style='height: 300px'></div></div>");
            create_widget();
            $( "#"+val[value] ).draggable();


       }
      });
    });

`But upon refreshing the dynamically created divs are destroyed`. What does mean refreshing, is it pressing F5? If it is right, you should store added values somewhere: on server or browser (cookies). You should care about storage for dinamically created divs. — testCoder, Sep 03 '13 at 06:31

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

You can store an Array of values in a cookie which you can add after the page has reloaded.

Just loop over each value in the Array and perform your click function.

Here is how to store an array in a cookie: https://stackoverflow.com/a/1959540/540247

edited May 23 '17 at 12:11

Community

1
1

answered Sep 03 '13 at 06:36

DKSan

4,187
3
25
35

What if any user deletes the cookies? – Praful Bagai Sep 03 '13 at 12:02

score 0 · Answer 2 · answered Sep 03 '13 at 06:36

0

What you can probably utilize to achieve this is, DOM Storage - it can be used in all modern browsers (including IE8). Saving your DOM changes in the DOM Storage will maintain the changes you've done even after a page reload.

answered Sep 03 '13 at 06:36

Thanos

3,039
2
14
28

How to save the dynamically created div upon refresh

2 Answers2