CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Home > CodeDigest >  
Technologies
 


Prevent the Page Flickering with AJAXControlToolkit Rating control using JQuery
Submitted By Satheesh Babu B
On 2/4/2009 7:03:08 AM
Tags: AJAXControlToolkit,ASP.Net AJAX,CodeDigest,JQuery  

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.

 

Recent Codes
  • View All Codes..