0

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.

Shaunak D
  • 20,588
  • 10
  • 46
  • 79
user3584218
  • 31
  • 1
  • 3

3 Answers3

1

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

Community
  • 1
  • 1
Walter Chapilliquen - wZVanG
  • 12,010
  • 8
  • 40
  • 64
  • I added the single quote. But still the same. The problem is that this html within the single quote added through .html() does not expand like the html directly under the div. I mean the class has to expand and produce the effect. The actual effect is that it has stars and some pics attached instead of the text box. I have shown how the div directly in html (without .html()) with the class expands when seen through the browser -picked up from firebug – user3584218 Jun 27 '15 at 05:16
0

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>'
Pratik Bhoir
  • 2,074
  • 7
  • 19
  • 36
  • I added the single quote. But still the same. The problem is that this html within the single quote added through .html() does not expand like the html directly under the div. I mean the class has to expand and produce the effect. The actual effect is that it has stars and some pics attached instead of the text box. I have shown how the div directly in html (without .html()) with the class expands when seen through the browser -picked up from firebug – user3584218 Jun 27 '15 at 05:27
0

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')
Ronak Patel
  • 3,324
  • 4
  • 21
  • 31
  • I added the single quote. But still the same. The problem is that this html within the single quote added through .html() does not expand like the html directly under the div. I mean the class has to expand and produce the effect. The actual effect is that it has stars and some pics attached instead of the text box. I have shown how the div directly in html (without .html()) with the class expands when seen through the browser -picked up from firebug – user3584218 Jun 27 '15 at 05:27
  • I got correctly now. Please tell me, are you using any JS or Plugin to for any star-effect ?? – Ronak Patel Jun 27 '15 at 05:51
  • you do not have problem in html(). You have problem with yout stars-display. – Ronak Patel Jun 27 '15 at 05:52
  • Please find 'refresh' or 'render' method of stat-plugin/JS. and call those method after html() call. You will get as you want. – Ronak Patel Jun 27 '15 at 06:00
  • I am using a star.js (which is again a jquery based plugin). Where do i get more information on refresh or render method? Is there an example I can see. – user3584218 Jun 28 '15 at 05:26
  • Try this (hope it works) $('#input-id').rating('reset'); OR $('#input-id').rating('refresh'); – Ronak Patel Jun 29 '15 at 06:31