Prevent the Page Flickering with AJAXControlToolkit Rating control using JQuery

Consider, we have an Ajax Control Toolkit Rating control present at bottom of a page that contains lengthier content i.e. Rating control is present somewhere at bottom of an aspx page that has vertical scroll bar. In this scenario, when a user records his rating, the page will flicker once the rating is done i.e. if we click a star to rate; the page will move to top and then will move down fastly which will give a bad experience.

The following JQuery snippet will help us to prevent this.

<script src="_scripts/jquery-1[1].2.6.js" type="text/javascript"></script>

<script language="javascript">

function pageLoad() {

$("#<%=ctrlRating.ClientID %> > a").attr("href", "#ctrlRating");

}

</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<ajaxToolkit:Rating ID="ctrlRating" AutoPostBack="true" runat="server"

MaxRating="5"

CssClass="Rating"

StarCssClass="ratingStar"

WaitingStarCssClass="savedRatingStar"

FilledStarCssClass="filledRatingStar"

EmptyStarCssClass="emptyRatingStar" OnChanged="ctrlRating_Changed"/>

</ContentTemplate>

</asp:UpdatePanel>

Read my article Customizing the Tooltip of Rating Control using JQuery to customize the tooltip of Rating control using JQuery.

Read my article Using JQuery in ASP.Net AJAX Applications - Part 1 to know more about JQuery and integrating it to ASP.Net AJAX application.