Solved

How to use jquery inside GridView inside UpdatePanel

Posted on 2010-09-16
5
1,088 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
0
Comment
Question by:Dale Burrell
  • 3
  • 2
5 Comments
 
LVL 14

Expert Comment

by:existenz2
ID: 33699070
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
 
LVL 21

Author Comment

by:Dale Burrell
ID: 33699141
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
 
LVL 21

Author Comment

by:Dale Burrell
ID: 33699154
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
 
LVL 21

Accepted Solution

by:
Dale Burrell earned 0 total points
ID: 33711085
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
 
LVL 14

Assisted Solution

by:existenz2
existenz2 earned 250 total points
ID: 33743414
From my knowledge you are correct on that.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now