[英]Save dynamically created buttons
Below is my code. 下面是我的代码。 In this by clicking on Add Group, a button is dynamically created and added in fooBar. 在此过程中,通过单击添加组,将动态创建一个按钮并将其添加到fooBar中。 But when I refresh the page it goes away. 但是,当我刷新页面时,它消失了。 I want to create the buttons and save it in the fooBar. 我想创建按钮并将其保存在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>
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 1)保存信息服务器端:创建按钮后,对服务器进行AJAX调用,以某种方式保存配置,并在下次请求此文档时相应地更改交付的html。
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. 2)保存按钮配置客户端:例如, 通过localStorage非常简单 ,并将检查添加到页面中以检查LS中可能创建的按钮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.