Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1116
  • Last Modified:

How to use jquery inside GridView inside UpdatePanel

Hi,

I have a GridView inside an UpdatePanel which is cool and works well.

The GridView provides the option to edit rows.

One of the columns in the GridView is a date column for which I am using the jquery datepicker.

Now when the page initially loads the GridView is in read mode, and therefore doesn't load the datepicker.

But when you click the edit button the UpdatePanel does its thing and reloads what it needs to present a row for editing.

What I can't get my head around is how to:

a) load the jquery library as before the UpdatePanel I was using Page.ClientScript.RegisterClientScriptBlock which means that the script is loaded intelligently rather than statically.

b) how to fire up the datepicker which needs a javascript funtion to be called once the load is complete. Before using the UpdatePanel this was $(document).ready(function(){$("#<%=DateField.ClientID%>").datepicker(...)});

If someone can help me solve this it would be much appreciated.

Cheers,

Dale
0
Dale Burrell
Asked:
Dale Burrell
  • 3
  • 2
2 Solutions
 
existenz2Commented:
You can use the ScriptManager. That also has a method to load the jquery library (I forgot which exactly, but it'something like: ScriptManager.ClientScript.RegisterClientScriptBlock.
For question b)
Easiest would be to make a method like in the code example and then put the LoadDatePicker(this) on the onclick attribute from the gridviewcolumn.
function LoadDatePicker(column)
{
 $(document).ready(function(){$(column.id).datepicker(...)});
}

Open in new window

0
 
Dale BurrellAuthor Commented:
Yeah I tried using the ScriptManager (It seems that one can access a static instance of it, or the actual instance and not sure what the difference it). and it threw an error saying something along the lines of it couldn't find the js file or didn't have access to it, yet when I copied the exact URL from the error message and slapped it into the browser it loaded perfectly.
0
 
Dale BurrellAuthor Commented:
When you say the onclick method are you talking about the catching the event when the person clicks in the textbox to enter a date? Because the datepicker itself uses that to open itself, so I think the code I showed needs to have run previous to that to allow it to attach its event handlers.

Surely there is a general solution for running javascript that is specific to a user control in such a case as this?
0
 
Dale BurrellAuthor Commented:
Found a solution.

For part A if you register a script with ScriptManager it appears that it needs to call the methods in the asp.net ajax library telling it when the script has finished loading. Since we're talking jquery I decided not to do that and instead load it in every page in the normal place.

For part B I managed to use the ScriptManager to load a customised version of the function show. I'm assuming that scripts loaded through ScriptManager will only be run once the ajax call is complete and therefore my sequencing works.
0
 
existenz2Commented:
From my knowledge you are correct on that.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now