Save dynamically created buttons

Question

Below is my code. In this by clicking on Add Group, a button is dynamically created and added in fooBar. But when I refresh the page it goes away. I want to create the buttons and save it in the fooBar.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Content</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="stylesheets/bootstrap.min.css" rel="stylesheet">
        <link href="stylesheets/bootstrap.css" rel="stylesheet">
        <link href="stylesheets/bootstrap-theme.min.css" rel="stylesheet">
        <link href="stylesheets/bootstrap-theme.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <SCRIPT language="javascript">
            window.onload = function() {

                document.getElementById('btnAdd').onclick = function()
                {
                    myFunction();

                };
                var person;
                var element;
                function myFunction()
                {
                    var x;

                    person = prompt("Please enter Group Name");

                    if (person != null)
                    {
                        add(element);
//                            x = "Hello " + person + "! How are you today?";
//                            document.getElementById("demo").innerHTML = x;
                    }
                }

                function add(type) {
                    //Create an input type dynamically.   
                    element = document.createElement("button");

                    var t = document.createTextNode(person);
                    element.appendChild(t);
                    //Assign different attributes to the element. 
//                    element.type = type;
//                    element.value = type; // Really? You want the default value to be the type string?
//                    element.name = type;  // And the name too?
                    element.className = "btn btn-default";
                    span.innerHTML=person;
                    element.onclick = function() { // Note this is a function
                        //alert("Do it again!");
                        $("#btn-group").load("head.html");

                    };

                    var foo = document.getElementById("fooBar");


                    //Append the element in page (in span).  
                    foo.appendChild(element);

//                    var d = document.getElementById('fooBar');
//                    d.appendChild(i);
                }



            };
//            function copy()
//                {
//                    var n1 = document.getElementById('addKeyword');
//                    var n2 = document.getElementById('getKeyword');
//                    n2.innerText = n1.value;
//                }
        </SCRIPT>
        <script> 
    $(function(){
      $("#btn-group").load("head.html"); 
    });
    </script>
    </head>
    <body>
        <div class="btn-group" id="fooBar">
<!--                        <button type="button" class="btn btn-default">Marketing</button>
                        <button type="button" class="btn btn-default">Internet</button>
                        <button type="button" class="btn btn-default">Politics</button>-->
            <button type="button" class="btn btn-default" id="btnAdd">Add Group</button>
        </div>
        <div class="boxed">
            <h4>Group:<span class="label label-default" id="span"></span>
                <button type="submit" class="btn btn-default">Edit Name</button>
                <button type="submit" class="btn btn-default">Disable</button>
                <button type="submit" class="btn btn-default">Delete Group</button></h4>
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter your keyword" id="addKeyword">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" >Add</button>
                        </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div>
            <h4>Keywords:</h4>
<!--            <div class="keyword" id="getKeyword"></div>-->
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="stylesheets/bootstrap.min.js"></script>
        <script src="stylesheets/bootstrap.js"></script>
    </body>
</html>

Answer 1

Basically, you have two options:

1) Save the information server side: After creating a button, make an AJAX Call to the server, save the configuration there somehow and alter the delivered html accordingly the next time this document is requested

2) Save the button configuration client side: Eg very simple via localStorage and integrate a check into your page to check the LS for potentially created buttons.

Save dynamically created buttons

Question

1 answers

solution1
1 2014-02-06 10:15:58

Save dynamically created buttons

Question

1 answers

solution1 1 2014-02-06 10:15:58

solution1
1 2014-02-06 10:15:58