Problem with JQuery star rating plugin and Ajax

Question

I'm new with JQuery, Ajax, JavaScript

I have a problem with JQuery star-rating-plugin. I used it in some pages and it works very well. However when I used in an Ajax page, it did not behave the same.

When the page is reloaded, nothing more is shown. The input are hidden, like before, but the div's doesn't appear.

I have this code when the page is load:

<td class="rowstyle0" width="30%" align="left">
    <a onclick="javascript:abrirConsultaNova('/projectManager/projectManager/atividade.do?method=consultar&id=219', 'Consultar 219');" href="#219">
     <span class="star-rating-control">
      <div class="rating-cancel" style="display: none;">
      <a title="Cancel Rating"/>
      </div>
      <div id="avaliacao1_219" class="star-rating rater-0 star {split:2} star-rating-applied star-rating-readonly star-rating-on" style="width: 8px;">
      <a title="1" style="margin-left: 0px;">1</a>
      </div>
      <div id="avaliacao2_219" class="star-rating rater-0 star {split:2} star-rating-applied star-rating-readonly star-rating-on" style="width: 8px;">
      </div>
      <div id="avaliacao3_219" class="star-rating rater-0 star {split:2} star-rating-applied star-rating-readonly star-rating-on" style="width: 8px;">
      </div>
      <div id="avaliacao4_219" class="star-rating rater-0 star {split:2} star-rating-applied star-rating-readonly star-rating-on" style="width: 8px;">
      </div>
     </span>
     <input id="avaliacao1_219" class="star {split:2} star-rating-applied star-rating-readonly" type="radio" disabled="disabled" value="1" name="avaliacao219" style="display: none;"/>
     <input id="avaliacao2_219" class="star {split:2} star-rating-applied star-rating-readonly" type="radio" disabled="disabled" value="2" name="avaliacao219" style="display: none;"/>
     <input id="avaliacao3_219" class="star {split:2} star-rating-applied star-rating-readonly" type="radio" disabled="disabled" value="3" name="avaliacao219" style="display: none;"/>
     <input id="avaliacao4_219" class="star {split:2} star-rating-applied star-rating-readonly" type="radio" disabled="disabled" value="4" name="avaliacao219" style="display: none;"/>
    </a>
</td>

And this the code when the page is reloaded dynamically:

<td class="rowstyle0" width="30%" align="left">
    <a onclick="javascript:abrirConsultaNova('/projectManager/projectManager/atividade.do?method=consultar&id=219', 'Consultar 219');" href="#219">
     <input id="avaliacao1_219" class="star {split:2} star-rating-applied" type="radio" disabled="disabled" value="1" name="avaliacao219" style="display: none;"/>
     <input id="avaliacao2_219" class="star {split:2} star-rating-applied" type="radio" disabled="disabled" value="2" name="avaliacao219" style="display: none;"/>
     <input id="avaliacao3_219" class="star {split:2} star-rating-applied" type="radio" disabled="disabled" value="3" name="avaliacao219" style="display: none;"/>
     <input id="avaliacao4_219" class="star {split:2} star-rating-applied" type="radio" disabled="disabled" value="4" name="avaliacao219" style="display: none;"/>
    </a>
</td>

How can I get the div's to appear on a post back?

Answer 1

Presumably you are attaching events to #star-rating-control. If you are rebuilding the DOM via AJAX, your events will be lost. You will need to reattach them after the AJAX event.

Answer 2

Hi. I am having the same problem. Were you able to figure this out?

Answer 3

I had the problem in Ajax scenario. Only the radio buttons appeared. I just hooked the events after loading the content.

$('input[type="radio"].star').rating(); // Hook the events.

May be you can enable the stars through the following statement. $('input[type="radio"].star').rating('enable');