function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Kevin BromerKevin Bromer 

Tablesorter With VF Rerender

Hey all-


Using the jquery tablesorter plugin with a Visualforce page. Right now, the user clicks the submit button (commandbutton), which renders a VF page block to display the retrieved data in the datatable held within.  I'm far from a jquery guru, and the problem I'm having is that I can only hook the call to the tablesorter function into the 'onclick' attribute of the datatable. I'd like it to be applied as soon as the datatable is rendered for a few reasons:

1. I can presort the elements

2. The late application causes some UI weirdness (overlapping column markers, etc.)

 

Would love any thoughts, I'm a bit stumped on the best approach here.  The sorting works fine incidentally, its just ugly and not loaded until a user click.  Here's the relevant bits of code (jq = $):

 

JS: 

<script type="text/javascript">
    
 function sortThis() {
         jq(".tablesorter").tablesorter(
         {
        sortClassAsc: 'headerSortUp',   
        sortClassDesc: 'headerSortDown',
        headerClass: 'header',          
         stripingRowClass: ['even','odd'],        stripeRowsOnStartUp: true         
         });
   };    
    </script>

 And the VF:

 

 <apex:form >
    <apex:pageBlock id="tableblock" rendered="{!RenderDataTable}">
<div style="height:450px; width:900px; overflow:hidden;" id="checkInList"><div style="height:440px; overflow:auto" id="tableContainer">
        <apex:PageBlockSection title="Partner Results" collapsible="false" onclick="sortThis()">
<apex:DataTable width="90%" styleClass="tablesorter" id="PartnerDataTable" value="{!PartnerDeals}" var="pdeal" rendered="{!RenderDataTable}">
    

//REST OF TABLE RENDERED HERE 

 


Thanks!

 

tom_patrostom_patros

Try calling sortThis() within jQuery's $(document).ready() event - this is similar to the old-skool onload() event in traditional JS.

 

Something like:

 

// your other stuff above here...

$(document).ready(function() { sortThis(); });

 

Kevin BromerKevin Bromer

Thanks Tom, I actually tried that initially -

 

Unforunately in this case, I don't want it running when the DOM's ready event fires, since my table won't exist yet (hence, sortThis won't know what the element its being called on is) Since my table only exists once the page block is rendered (the renderTable value for the render attribute on the page block) -

 

Can you call ready() for other items in the DOM directly? 

tom_patrostom_patros

Ah, I see. So your table isn't rendered immediately, but at an arbitrary later time. What triggers the population of the table? Do you have some rerender function coming from somewhere else on the page?

Kevin BromerKevin Bromer

Yes, a command button in a different page block that calls the rerender (actually, makes a WS call, which retrieves some data from an SFDC API and populates a list of objects)

 

I tried putting it in the onclick of the command button, but it just killed the rerender. I honestly never got to the root of why...

 

tom_patrostom_patros

In that case, I would use an actionStatus tied to your commandButton to get what you're looking for. I take this approach a lot for similar reasons (making sure the DOM exists that you want jQuery to act upon).

 

<apex:actionStatus id="theStatus" onstop="CallYourJSHere();" />
<apex:commandButton value="Fill The Table" action="{!fillTheTable}" status="theStatus" rerender="something" />

 In my experience, I have found that the onstop() event on the actionStatus gaurantees the DOM has loaded.

goabhigogoabhigo

Kindly let me know if you found a solution for this.

Kevin BromerKevin Bromer

Interesting thought! I gave that a run w/o much luck though, the onstop never seemed to actually fire. Or rather, when it did, the table still wasn't rendered, so the JS never found the element in the page.

 

I ended up just removing the UI elements that the JS was adding and applied the actions in the datatable's onclick. Not the best solution, but it did allow me to get the functionality I needed, even if it wasn't quite as pretty as I'd like. 

 

I may crack this one back open at some later point and figure out the issue. I'm sure its probably something stupid I'm doing - 

 

Thanks for all the help!