Making tablesorter and pager jQuery plugin in an UpdatePanel

Page 1 of 1

5 Replies - 2622 Views - Last Post: 15 April 2012 - 02:43 AM Rate Topic: -----

#1 xikky  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 88
  • Joined: 19-December 09

Making tablesorter and pager jQuery plugin in an UpdatePanel

Posted 12 April 2012 - 01:39 PM

I have a couple of textboxes in a Div(#filter) for search criterias, and onclick(#btnFilter), a table(#myTable) is populated displaying the equal results. the table has the pager(#pager) aswell.

Before using Ajax, I used this script to run both plugins together:
<script type="text/javascript">
        $(document).ready(function () {
            $("#myTable")
            .tablesorter()
            .tablesorterPager({ container: $("#pager") });

            $("#btnFilter").click(function (event) {
                $("#filter").toggle("slow");
            });
        }); 
    </script>



My problem comes when I try to put both table and pager in an update panel. I followed your example and even others I found on the net, to make jQuery work in an Ajax UpdatePanel. This is the script code I am sticking to now:
<body>
<form>
<script language="javascript" type="text/javascript">
        function pageLoad() {
            $(function () {
                $("#pager").unbind();
                $("#myTable")
                .tablesorter()
                .tablesorterPager({ container: $("#pager") });

                $("#btnFilter").click(function (event) {
                    $("#filter").toggle("slow");
                });
            }); 
        } 
    </script>



This does not change anything for me. Ajax does partial postback on the first time but then it stops.

On the other hand If I just remove this line from the above code:
.tablesorterPager({ container: $("#pager") });
Everything works perfect! And here I am totally lost and I wish you could give me some quick tips to move on.

One more thing, I am using a MasterPage and all the above is in a Child Page.

Thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: Making tablesorter and pager jQuery plugin in an UpdatePanel

#2 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 431
  • View blog
  • Posts: 1,452
  • Joined: 28-April 09

Re: Making tablesorter and pager jQuery plugin in an UpdatePanel

Posted 12 April 2012 - 06:05 PM

since we're dealing with the microsoft ajax client library you're going to need to use the Sys.Application.add_Load method to make sure that your javascript is getting applied to the page elements on each asynchronous postback. It should look something like the following

        $(document).ready(function () {
            Sys.Application.add_load(pageLoad);

            function pageLoad() {
                $("#btnFilter").click(function (event) {
                    $("#filter").toggle("slow");
                });

                $(function () {
                    $("#pager").unbind();
                    var table = $("#myTable");

                    table
                    .tablesorter()
                    .tablesorterPager({ container: $("#pager") });
                });
            }
        });


This is assuming that all controls, such as the filter control, table, and pager controls are in the update panel. If the filter control is not inside the update panel then you could probably just put the click bind function in the document.ready function and leave it out of the pageLoad function.

Microsoft Ajax Client Library

tested in IE9, FireFox 4.0 and Chrome


Here's my test application if you want to reference it
Spoiler

This post has been edited by Nakor: 12 April 2012 - 06:12 PM

Was This Post Helpful? 1
  • +
  • -

#3 xikky  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 88
  • Joined: 19-December 09

Re: Making tablesorter and pager jQuery plugin in an UpdatePanel

Posted 13 April 2012 - 05:06 AM

Thank you for your reply but that did not work for me. I'm sure I was doing something wrong or I misunderstood you. But I found another approach to closely solve my problem:

I used the following 

string script = string.Format(@"loadAllocateRole()");
            ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);


this calls the javascript function to load .tablesorter() and .tablesorterPager() whenever I want to in code behind. Thus, when I click the search button, the update panel surrounding the table triggers, and on the button click event of search button, I call the javascript function like the above example.

I had a tricky part, because since I was using Gridview control for tablesorter plugin, I also had to call the following function each time the gridview loads (i.e. when update panel refreshes) and not only on page_Load() method.

private void MakeAccessible(GridView grid)
        {
            if (grid.Rows.Count > 0)
            {
                //This replaces <td> with <th> and adds the scope attribute
                grid.UseAccessibleHeader = true;

                //This will add the <thead> and <tbody> elements
                grid.HeaderRow.TableSection = TableRowSection.TableHeader;

                //This adds the <tfoot> element. Remove if you don't have a footer row
                //grid.FooterRow.TableSection = TableRowSection.TableFooter;
            }
        }


What I cannot figure out though, is that when I have other update panels on the same child page, and when one of the other update panels triggers, the table (or gridview control) "loses it's jQuery". Which I'm guessing is the result of a missing MakeAccessible(GridView grid) somewhere around the code. But I cannot think of a good place to put it!

Edit: What confuses me is that I don't know why the gridview would need another call to MakeAccessible(GridView grid) if another update Panel refreshes and not the update Panel that surrounds the gridview itself. Just to make a note; I have a good number of update panels that are all set to trigger on a specific click or textchange event. someone can suggest anything?

Edit: Hah I managed to figure out that if I remove MakeAccessible(GridView grid) from !Page.IsPostBack and place it directly on the page_Load() method it builds the table again every postback. I still didn't get my answer though for my question in the paragraph above. Can someone comment on this approach? - On the way I managed to show jQuery in Ajax UpdatePanel?

This post has been edited by xikky: 13 April 2012 - 05:23 AM

Was This Post Helpful? 0
  • +
  • -

#4 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 431
  • View blog
  • Posts: 1,452
  • Joined: 28-April 09

Re: Making tablesorter and pager jQuery plugin in an UpdatePanel

Posted 13 April 2012 - 07:00 AM

actually the best place for the makeaccessible would be in the GridView's PreRender event, this way it is always applied to the gridview before it's rendered to the screen, and it's only called when the GridView is going to be rendered. Placing the method in the page load event might mean you're executing unnecessary code if for some reason the GridView is not going to be rendered.

All UpdatePanels get refreshed when any of them are updated unless you specify the UpdateMode to be conditional for the updatepanel. By default the UpdateMode is set to Always which means that it will always update when any other update panel updates.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

This post has been edited by Nakor: 13 April 2012 - 07:08 AM

Was This Post Helpful? 1
  • +
  • -

#5 xikky  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 88
  • Joined: 19-December 09

Re: Making tablesorter and pager jQuery plugin in an UpdatePanel

Posted 13 April 2012 - 02:24 PM

Thank you! That is really nice and elegant.

I am also including inside the GridView's PreRender method the following code:

            string script = string.Format(@"loadViewRole();");
            ScriptManager.RegisterStartupScript(this, typeof(Page), UniqueID, script, true);


As you may know, I am calling a javascript function from code behind, and now that I am aware of PreRender method, I am guessing the best approach is to include this inside the method as well.

The javascript function has jQuery tablesorter code, to be loaded each time the gridview is rendered.

I am worried though because I cannot use more then one ScriptManager.RegisterStartupScript in one postback. If I do, javascript function won't be called. I need more than one because I have more than one table in my page to be refreshed in one postback. Can I use something else rather than ScriptManager.RegisterStartupScript for this purpose?

This post has been edited by xikky: 13 April 2012 - 02:27 PM

Was This Post Helpful? 0
  • +
  • -

#6 xikky  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 88
  • Joined: 19-December 09

Re: Making tablesorter and pager jQuery plugin in an UpdatePanel

Posted 15 April 2012 - 02:43 AM

I will be using an if statement if (IsPostBack) in the Page_Load method. Here I will put all my rendering code and I think it is the best approach for this case.

Since I have many tables using tablesorter plugin, and are inside seperate Ajax UpdatePanels, and since all update panels are refreshed when one update panel is updated, I think the if statement mentioned would be perfect.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1