abhillier
abhillier

Reputation: 214

Displaying the bootstrap page in JQuery

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

Answers (3)

Plummer
Plummer

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

Pankaj Saboo
Pankaj Saboo

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

4ra
4ra

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

Related Questions