UpdatePanel preventing JavaScript from running

Hi,

Here's what I'm doing: on my page I have a GridView that displays a bunch of people from different parts of the world. I display their names, email addresses, etc. I also wanted to display the local time of their location but I didn't want this to be a snap shot of the time when the page gets rendered so I decided to use JavaScript to display the time and have the clock keep ticking.

I found a nice jQuery plug-in called jClock which is very simple to use and implement. I simply place a <span class="timeZoneID"></span> and it works like a clock -- except if I place my GridView in an UpdatePanel.

It wasn't working and I kept troubleshooting to no avail. I thought it was the GridView's TemplateField somehow throwing some junk in there. Then I tried removing UpdatePanel and everything started working fine.

Why is UpdatePanel preventing this JavaScript from functioning?

Re: UpdatePanel preventing JavaScript from running

What's happening is your UpdatePanel refreshes are reverting the DOM back to how it was before jQuery wired up those handlers. The quick and dirty fix is to move that jQuery code into pageLoad() instead of $(document).ready(), since pageLoad fires after every partial postback.

Re: UpdatePanel preventing JavaScript from running

Friend This is very genuine problem occur with developers

You have to add script from the code Behind

Use ScriptManager Class to do so.

This is same as ClientScript Property of Page. This class expose all shared function as ClientScript has.

For Example The function in Javascript

function xyz(){


      alert('Hello');


}

Use it from Code Behind

Dim script As String = ""
        script += "function xyz(){"
        script += "    alert('Hello');"
        script += "}"
        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "AsyncScript", script, True)

Use it inside any relevant event handler

Your Javascript will work properly inside update panel

Re: UpdatePanel preventing JavaScript from running

Thank you both very much for your help.

One follow up question:

I put the jQuery code in an external file. How would I call/load this script from code behind in the Page_Load() event? This would really help me keep my code behind nice and neat.

Re: UpdatePanel preventing JavaScript from running

Good You can do it. We have two situation

If the code has to invoke from within the update panel you have to use ScriptManager Class

Else use ClientScript Property

Dim Url as string="JSFilePath"
'In Case of Update Panel
ScriptManager.RegisterClientScriptInclude(Me, Me.GetType, "Key", Url)


'In normal case
ClientScript.RegisterClientScriptInclude("Key", Url)

One More Important thing if Post is helpful please mark it as Answer.

It encourage us to answer

Re: UpdatePanel preventing JavaScript from running

Good You can do it. We have two situation

If the code has to invoke from within the update panel you have to use ScriptManager Class

Else use ClientScript Property

Dim Url as string="JSFilePath"
'In Case of Update Panel
ScriptManager.RegisterClientScriptInclude(Me, Me.GetType, "Key", Url)


'In normal case
ClientScript.RegisterClientScriptInclude("Key", Url)

One More Important thing if Post is helpful please mark it as Answer.

It encourage us to answer

Re: UpdatePanel preventing JavaScript from running

Please keep the javascript code stay outside of updatepanel. And please make sure the id is correct in JQuery reference.

BTW, did you get any client error?

Re: UpdatePanel preventing JavaScript from running

The jQuery/JavaScript reference was in the HEAD section of the page. I wasn't getting any errors. Script just didn't work.

Not sure how to keep the script outside of UPDATEPANEL. THe script reference was in the HEAD section of the page but what the script will effect has to be inside the UPDATEPANEL because it displays local times for people displayed in GridView rows which by definition has to be inside the panel. So not sure what you're suggesting. Would you please clarify further?

Re: UpdatePanel preventing JavaScript from running