Stopping interaction on load

[Martin Grafetsberger]

Is there any way to stop user interaction with a Ajax control while the browser is finishing loading the page.

I have a control that uses some in page JavaScript but if the page is not fully loaded the JavaScript fails.

Thanks in advance

[Dimo]

Hello Martin,

There can be several causes for such a problem, and several workarounds. Please provide some more information about your scenario. What is the Javascript code, that fails?

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Martin Grafetsberger]

I have a RadRotator with a list of thumbnails when you click a thumb it changes the main image on the page. However if you click the thumb before the page has fully loaded then the page fails,all i need to do is have some kind of loding message for the rotator while th page loads. Here is the script.

<

radA:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="LoadingPanel1">
<AjaxSettings>

<radA:AjaxSetting AjaxControlID="RadAjaxManager1">

</radA:AjaxSetting>

</AjaxSettings>

</

radA:RadAjaxManager>

<

radR:RadRotator ID="thumbRotator" runat="server" AutoAdvance="false" Width="100%"

TransitionType="Scroll" ScrollDirection="Left" FrameTimeout="0" ScrollSpeed="10"

FramesToShow="6" UseSmoothScroll="False" EnableViewState="true" >

<FrameTemplate>

<img src='<%#Eval("fileName") %>' onclick='showCallbackImage(this)' />

</FrameTemplate>

</radR:RadRotator>

<

script type="text/javascript">
/*<![CDATA[*/
function showCallbackImage(srcElement)

{

window[

"<%= RadAjaxManager1.ClientID %>"].AjaxRequest("ShowImage?" + srcElement.src);

}

/*]]>*/

</

script>

<

radA:AjaxLoadingPanel ID="LoadingPanel1" runat="server" Transparency="30" BackColor="White"><asp:Image ID="Image1" runat="server" AlternateText="Loading.."  ImageUrl="Loading.gif"></asp:Image></radA:AjaxLoadingPanel>

[Dimo]

Hello Martin,

The easiest thing to do in this case will be:

1) move the showCallbackImage function above the RadRotator, so that the function exists when the images start to appear

2) enclose the code inside the showCallbackImage function in a try - catch statement. In this way if the page has not fully loaded and the user clicks on an image, nothing will happen, but no Javascript errors will be thrown and after the page load has been complete, everything will start working:


function showCallbackImage(srcElement)
{
    try {
    window["<%= RadAjaxManager1.ClientID %>"].AjaxRequest("ShowImage?" + srcElement.src);
    } catch (e) { }
}



Another more complex solution is to place a transparent <div> over the images, so that they cannot be clicked on, but this is not necessary.


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.