I have a jsp page. In that i am trying jquery star rating. I am using this plugin /. But JS error is ing like TypeError: $(...).rating is not a function Here is my JSP code.

<div class="book-right" id="ajaxTest">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.rating.js"></script>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
    <--table + some intermediate loop code --->
        <c:forEach var="leg" items="${option.legs}" varStatus="loopCounter3">
            <div>
                <input type="radio" name="rating-${loopCounter2.index}" value="1" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="2" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="3" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="4" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="5" class="rating-star" />
            </div>
            <input type="hidden" id="avgRating" name="avgRating" value="${leg.courierProduct.rating}"></input>

            <script>
                var avgRating = $('#avgRating').val();
                $('.rating-star').rating('select', avgRating);
            </script>
        </c:forEach>
</div>

I have removed some JSP code to make it simple.

I have a jsp page. In that i am trying jquery star rating. I am using this plugin http://www.fyneworks./jquery/star-rating/. But JS error is ing like TypeError: $(...).rating is not a function Here is my JSP code.

<div class="book-right" id="ajaxTest">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.rating.js"></script>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
    <--table + some intermediate loop code --->
        <c:forEach var="leg" items="${option.legs}" varStatus="loopCounter3">
            <div>
                <input type="radio" name="rating-${loopCounter2.index}" value="1" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="2" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="3" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="4" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="5" class="rating-star" />
            </div>
            <input type="hidden" id="avgRating" name="avgRating" value="${leg.courierProduct.rating}"></input>

            <script>
                var avgRating = $('#avgRating').val();
                $('.rating-star').rating('select', avgRating);
            </script>
        </c:forEach>
</div>

I have removed some JSP code to make it simple.

• javascript
• jquery
• jsp
• jquery-plugins

• Why are you using jquery.js and jquery-latest.js? Use only one and rating.js should be after jquery file. – anpsmn Commented Apr 14, 2015 at 6:12

1 Answer 1

You don't need to load jQuery twice. What happens in this case, is the second time it overwrites previous one with rating prototype method.

This should work for you:

<script src="js/jquery-latest.js"></script>
<script src="js/jquery.rating.js"></script>

Another problem is that you are not initializing plugin properly. It should be:

$('.rating-star').rating().rating('select', avgRating);

... initialize first, then call select method.

Demo: http://plnkr.co/edit/OIjbvkff27YdX4snKnB2?p=preview