Issue in SharePoint 2013 Rating field

Problem:

I have added the rating field to a page layout and created a page using that layout. Then the star images of the rating field does not applier.

Solution

I have added the following JavaScript to the page layout and the “pagerating” class to the Rating field

JavaScript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">

 </script>

            <script type="text/javascript">//<![CDATA[

                function fixIE10StarRatingIssue() {

                    if (SP.UI.Reputation != null) {

                        SP.UI.Reputation.RatingsHelpers.$c(false);

                        jQuery('.pagerating > script').each(function () {

                            eval($(this).text());

                        });

                    }

                }

                _spBodyOnLoadFunctionNames.push('fixIE10StarRatingIssue');

</script>

Rating field:

<div class="pagerating">

         <!--CS: Start Page Field: Rating (0-5) Snippet-->

         <!--SPM:<%@Register Tagprefix="PageFieldAverageRatingFieldControl" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->

          <!--MS:<PageFieldAverageRatingFieldControl:AverageRatingFieldControl FieldName="5a14d1ab-1513-48c7-97b3-657a5ba6c742" runat="server">-->

            <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">Rating (0-5)</span></div><div class="ms-formfieldvaluecontainer">1,234.56</div></div><!--PE: End of READ-ONLY PREVIEW-->

           <!--ME:</PageFieldAverageRatingFieldControl:AverageRatingFieldControl>-->

           <!--CE: End Page Field: Rating (0-5) Snippet-->

</div>