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?
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.
Chetan Sarode
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.
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.
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
Including JS file from code behind
Amit Srivastava
Senior Software Engineer
Find latest stuff on
DotnetAdda
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
Including JS file from code behind
Amit Srivastava
Senior Software Engineer
Find latest stuff on
DotnetAdda
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?
SamU
Contributor
2895 Points
1627 Posts
UpdatePanel preventing JavaScript from running
Feb 16, 2010 08:39 PM|LINK
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?
Sam
chetan.sarod...
All-Star
65739 Points
11138 Posts
Re: UpdatePanel preventing JavaScript from running
Feb 17, 2010 02:20 AM|LINK
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.
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.
amsneuton
Member
528 Points
121 Posts
Re: UpdatePanel preventing JavaScript from running
Feb 17, 2010 03:22 AM|LINK
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
Javascrip Inside Updatepanel
Senior Software Engineer
Find latest stuff on
DotnetAdda
SamU
Contributor
2895 Points
1627 Posts
Re: UpdatePanel preventing JavaScript from running
Feb 17, 2010 11:07 PM|LINK
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.
Sam
amsneuton
Member
528 Points
121 Posts
Re: UpdatePanel preventing JavaScript from running
Feb 18, 2010 07:45 AM|LINK
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
Including JS file from code behind
Senior Software Engineer
Find latest stuff on
DotnetAdda
amsneuton
Member
528 Points
121 Posts
Re: UpdatePanel preventing JavaScript from running
Feb 18, 2010 07:45 AM|LINK
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
Including JS file from code behind
Senior Software Engineer
Find latest stuff on
DotnetAdda
Vince Xu - M...
All-Star
80367 Points
6801 Posts
Re: UpdatePanel preventing JavaScript from running
Feb 19, 2010 02:30 AM|LINK
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?
SamU
Contributor
2895 Points
1627 Posts
Re: UpdatePanel preventing JavaScript from running
Feb 19, 2010 02:20 PM|LINK
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?
Sam
SamU
Contributor
2895 Points
1627 Posts
Re: UpdatePanel preventing JavaScript from running
Feb 27, 2010 02:32 AM|LINK
Sam