CODEWITHSUNDEEP
jqueryhtml
user3584218
user3584218

Reputation: 31

HTML div.html() not getting contents and rendering

I am using jquery for writing a small ui.

I have the following html in my webpage.

<div id= "mystar">
    <div class=" text-center">
            <h4>Iron Man- Movie Rating</h4>
    </div>
    <div class="panel panel-default text-center">
       <div class="panel-body">
         <div class="row">
         <div class="col-sm-3">
         <h4>Rating</h4>
         </div>
         <div class="col-sm-3">
          <input type="number" class="rating" data-size="xs" step="0.5" max="5" min="0" value="0" id="input-3">
        </div>
         </div>
        </div>
    </div>

</div>

When I see it through the browser I see that this has expanded to 

<div class="text-center "><h4>Iron Man- Movie Rating</h4></div><div class="panel panel-default text-center"><div class="panel-body "><div class="row "><div class="col-sm-3 "><h4>Average Peer Rating</h4></div><div class="col-sm-3 "><div class="star-rating rating-xs rating-active"><div class="clear-rating clear-rating-active" title="Clear"><i class="glyphicon glyphicon-minus-sign"></i></div><div data-content="" class="rating-container rating-gly-star"><div style="width: 40%;" data-content="" class="rating-stars"></div><input style="display: none;" id="input-3 " value="0 " min="0 " max="5 " step="0.5 " data-size="xs " class="rating form-control" type="number"></div><div class="caption"><span class="label label-warning">Two Stars</span></div></div></div></div></div></div>

I want this mystar to get the contents when I click on the button. So I did the following inside the click function of a button.

var starContent = "<div class= "text-center "><h4>Iron Man- Movie Rating</h4></div><div class= "panel panel-default text-center"><div class= "panel-body "><div class= "row "><div class= "col-sm-3 "><h4>Average Peer Rating</h4></div><div class= "col-sm-3 "><input id= "input-3 " value= "0 " type= "number" min= "0 " max= "5 "    step= "0.5 " data-size= "xs " class= "rating "></div></div></div></div>"

and did

$('#mystar').html(starContent);

The contents are not expanding as I did in the first method. I see it just the same html as starContent and it does not produce the desired effect as it does when I put it directly inside the div of mystar.

What should I do to make it have the same effect as previous one. I need this to appear on click of a button.

Upvotes: 0

Views: 82

Answers (3)

Ronak Patel
Ronak Patel

Reputation: 3444

use:

var starContent = '<div class= "text-center "><h4>Iron Man- Movie Rating</h4></div><div class= "panel panel-default text-center"><div class= "panel-body "><div class= "row "><div class= "col-sm-3 "><h4>Average Peer Rating</h4></div><div class= "col-sm-3 "><input id= "input-3 " value= "0 " type= "number" min= "0 " max= "5 "    step= "0.5 " data-size= "xs " class= "rating "></div></div></div></div>'

EDIT:

Please find 'refresh' or 'render' method of stat-plugin/JS. and call those method after html() call. You will get as you want.

$('#input-id').rating('refresh')

or try

$('#input-id').rating('reset')

Upvotes: 0

Pratik Bhoir
Pratik Bhoir

Reputation: 2144

You need to put single quote instead of double quote. Cause, you already have double quotes inside your string. Here is the fiddle http://jsfiddle.net/pratbhoir/2fv0xmub/

var starContent = '<div class= "text-center "><h4>Iron Man- Movie Rating</h4></div><div class= "panel panel-default text-center"><div class= "panel-body "><div class= "row "><div class= "col-sm-3 "><h4>Average Peer Rating</h4></div><div class= "col-sm-3 "><input id= "input-3 " value= "0 " type= "number" min= "0 " max= "5 "   step= "0.5 " data-size= "xs " class= "rating "></div></div></div></div>'

Upvotes: 0

Walter Chapilliquen - wZVanG
Walter Chapilliquen - wZVanG

Reputation: 12004

That would have to throw a syntax error, the string contains quotation marks, so you must enclose them in single quotes:

    var starContent = "<div class= "text-center "><h4>..."

to

    var starContent = '<div class= "text-center "><h4>...'

When to Use Double or Single Quotes in JavaScript

Upvotes: 1

Related Questions