Solved

How to use jquery inside GridView inside UpdatePanel

Posted on 2010-09-16
5
1,093 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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…

777 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