JQuery and Ajax rating plugin issue

I am new to JQuery, Ajax, JavaScript

I have a problem with the JQuery star-rating-plugin. I have used it on some pages and it works really well. However, when I used on the Ajax page, it didn't behave the same.

When the page is reloaded, nothing else is displayed. The input is hidden as before, but the div is not visible.

I have this code when the page is loaded:

<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 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 to appear in the message?

+2


source to share


2 answers


I am having a problem in an Ajax script. Only radio buttons appeared. I just hooked up the events after the content was loaded.

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

      



Maybe you can include stars through the following statement.

$('input[type="radio"].star').rating('enable');

      

+3


source


Presumably you are adding events to # star-rating-control. If you are rebuilding the DOM via AJAX, your events will be lost. After the AJAX event, you will need to reconnect them.



0


source







All Articles