Reputation: 214
Hi i am trying to display the more than one div
into JQuery code.So basically it is the bootstrap.
Here is my code
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var element = '<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title" id="panel_title">Demo</h3></div><div class="panel-body"><div id=print_received_table></div></div></div>';
$('#result').append(element);
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
But it is not displaying anything. I am not able to figure out what is going wrong.
Please someone suggest me on this and help me out.
Thanks in advance.
Upvotes: 2
Views: 52
Reputation: 6688
You code works, but you need some extra steps to make it work more than once.
If you're trying to put more than one instance of element
into #result
, you'll need to run a loop separate instances of .append()
.
EDIT @Pankaj also notes wrapping your script in $(document).ready()
which is probably a good idea as well.
$(document).ready(function(){
var obj = [1,2,3];
$.each(obj, function(i, v){
$('#new-result').append(element);
});
})
Upvotes: 1
Reputation: 1185
Use $(document).ready()
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var element = '<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title" id="panel_title">Demo</h3></div><div class="panel-body"><div id=print_received_table></div></div></div>';
$('#result').append(element);
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
Upvotes: 2
Reputation: 219
You should move your script before closing body,because on that period of time DOM is not ready and you try to append to DOM. OR You can use document.ready event/ immediate function ((function () { // ... })();).
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var element = '<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title" id="panel_title">Demo</h3></div><div class="panel-body"><div id=print_received_table></div></div></div>';
$('#result').append(element);
</script>
</body>
</html>
Upvotes: 1