CODEWITHSUNDEEP
javascriptjqueryajax
Allice
Allice

Reputation: 21

Problem with JQuery star rating plugin and Ajax

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?

Upvotes: 2

Views: 1594

Answers (2)

dotcoder
dotcoder

Reputation: 2931

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');

Upvotes: 3

lod3n
lod3n

Reputation: 2903

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.

Upvotes: 0

Related Questions