We help IT Professionals succeed at work.

How to use jquery inside GridView inside UpdatePanel

Dale Burrell
Dale Burrell asked
on
1,184 Views
Last Modified: 2012-08-14
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
Comment
Watch Question

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

Dale BurrellDirector

Author

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.
Dale BurrellDirector

Author

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?
Director
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.