2

All my jQuery functions work perfectly the first time the page is loaded, after I do a postback which causes a rowfilter to be filled in for a GridView and binds the Grid again based on the rowfilter. My GridView is built up totally from code and rendered as a table. After this PostBack the function mouseover, mouseout and click on the table rows in my table do not work anymore.

I place my jQuery functions inside document.ready function. I also noticed before the postback this is added to the html of the rows:

<tr jQuery1320916="3">

So basically a sequence at the end of each row (3) and some random numbers with jQuery in front of it. After the postback this is removed from the rows.

Here is a part of my jQuery code (the first click function still works after PostBack but the functions on the GridView not anymore):

 $(document).ready(function(){
        //start click function select all
        $('input[id$="SelectDeselectAllBox"]').click(function(){            
        //start if
        if($(this).is(':checked')){
           $(this).parent().parent().parent().parent().children().find('input:checkbox').attr('checked',true).closest('tr').addClass('SelectedRow')
        }else{
            $(this).parent().parent().parent().parent().children().find('input:checkbox').attr('checked',false).closest('tr').removeClass('SelectedRow')};
        //end if

        //end click function select all
             });


        //highligth hovered row
             $('table[id^=taskgrid] tbody tr').mouseover(function () {
                 $(this).addClass('HightlightRow');
             }).mouseout(function () {
                 $(this).removeClass('HightlightRow');
             });            

        //end document ready
        });

Am I missing something, thanks in advance.

I did discover that jQuery does not find my gridview anymore by this method:

$('table[id^=taskgrid] tbody tr'), if I fill in the total ID of the taskgrid then it does work. But this is not option for me.

    //is everthing checked? start if
 if($(this).parent().find('input:checkbox:not(:checked)').length == 0){
    $(this).parent().parent().parent().parent().find('input:checkbox:first').attr('checked',true)
    }else{
    $(this).parent().parent().parent().parent().find('input:checkbox:first').attr('checked',false)};
//end if
cpx
  • 17,009
  • 20
  • 87
  • 142
user1039394
  • 23
  • 5
  • Check this question: http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels – Yuriy Rozhovetskiy Nov 10 '11 at 09:44
  • I am not using an UpdatePanel in my solution, quote from that answer to that question: "The PageRequestManager is a javascript object which is automatically available if an update panel is on the page." – user1039394 Nov 10 '11 at 10:03

1 Answers1

1

The problem is, that you are using "starts with" selector:

$('table[id^=taskgrid] tbody tr')

It is better to use "ends with" selector for ASP.NET WebForms generated id. Assuming your GridView id is "taskgrid", try using following selector:

$('table[id$="taskgrid"] tbody tr')

In case you are targeting several table elements and "taskgrid" is only part of id, you can use "contains" selector:

$('table[id*="taskgrid"] tbody tr')
tpeczek
  • 23,867
  • 3
  • 74
  • 77
  • The problem is I have multiple gridviews on one page, the total amount of gridviews can differ, I assign the grid with an ID that is made of taskgrid_ + name of the grid(which is different in each grid). When I chance it to $('table[id*="taskgrid"] tbody tr'), that search for a table with an ID that contains taskgrid. After this the mouseover and click functions do work but the following function which is used to check if all checkboxes in the clicked grid are checked, checks the select/deselect all checkbox from that gridview. I added the function above. – user1039394 Nov 10 '11 at 10:46
  • Then go for "contains" selector --> $('table[id*="taskgrid"] tbody tr') – tpeczek Nov 10 '11 at 10:48