Solved

jQuery and GridView question

Posted on 2011-03-15
3
423 Views
Last Modified: 2012-05-11
Hi,

I am trying to use jQuery with a GridView but having trouble making it work.  The markup for a gridView looks as follows (abbreviated version):

<asp:TemplateField HeaderText="Start Date">
<EditItemTemplate>
   <asp:Button runat="server" ID="btnShowCalendar" CssClass="CalendarDiv" onClientClick="return false" Text="..." />

   <div style=display:none">
      <asp:Calendar id="calStartDate" OnSelectionChanged="calDate_SelectionChanged" Runat="server" />
   </div>
</EditItemTemplate>
</asp:TemplateField>

Similiar code has been applied to several other date type columns

my jQuery looks something like the following:

$('.CalendarDiv').click(function(event)
{
   alert( this.id );
   $(this).next().toggle('slow');
}

What I am trying to accomplish is to set the visiblity of the div tag on/off when a user clicks on the button inside the EditItemTemplate.  Problem is that this function is being called multiple times.  The more records I have, the more times this function is called.  Makes sense as I have many buttons that has the "CalendarDiv" class applied to them.  How can I make this function call only once?

thank you.
0
Comment
Question by:yechan
  • 2
3 Comments
 
LVL 13

Accepted Solution

by:
devlab2012 earned 500 total points
Comment Utility
Change your code to:

$('.CalendarDiv').click(function()
{
   alert( this.id );
   $(this).next().toggle('slow');
});
0
 
LVL 13

Expert Comment

by:devlab2012
Comment Utility
Where have you written the jquery code on your page? I think you have that code somewhere in the GridView markup. Try using the following code in the <head> section of the page.

$(document).ready(function()
{
  $('.CalendarDiv').click(function()
  {
     alert( this.id );
     $(this).next().toggle('slow');
  });
});
0
 
LVL 1

Author Comment

by:yechan
Comment Utility
Hey devLab,

the query itself is embedded inside a seperate *.js file.  The GridView is a user control which is eventually embedded/added to a web part page.  Do you think that makes a difference?
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 …
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…

771 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

8 Experts available now in Live!

Get 1:1 Help Now