Jquery not initialised after rerender

Question

I'm build an Account drag and drop UI using Jquery.

Here is the code

<apex:page controller="AccountListViewController" >

<apex:stylesheet value="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<apex:includeScript value="//code.jquery.com/jquery-2.1.4.js"/>
<apex:includeScript value="//code.jquery.com/ui/1.11.4/jquery-ui.js"/>

 <script>
    j$ = jQuery.noConflict();

    j$(document).ready(function(){
        j$(document.getElementById("{!$Component.pageForm.pageBlockData.AccntTable}")).find("tbody").sortable();
    });
</script>


 <apex:form id="pageForm">

<apex:pageBlock id="pageBlockHeader" >
  <apex:pageBlockButtons location="top">

    <apex:commandButton action="{!runReport}" value="Run Report" id="theButton"/>
      <apex:commandButton action="{!callSaveDeal}" value="Save Config" id="theConfigButton"/>

  </apex:pageBlockButtons>
     <apex:selectList value="{!AccFilterId}" size="1" id="filterMenu">
        <apex:selectOptions value="{!AccountExistingViews}"></apex:selectOptions>
        <apex:actionSupport event="onchange"  action="{!resetFilter}" rerender="AccntTable" status="ajaxStatus"/>
   </apex:selectList>

   <apex:actionStatus id="ajaxStatus" startText="Loading..."  stopText=""/>
</apex:pageBlock>


 <apex:pageBlock title="Accounts" id="pageBlockData">

        <apex:pageBlockTable value="{!Accounts}" var="item" id="AccntTable">
            <apex:column value="{!item.name}"/>
        </apex:pageBlockTable>
 </apex:pageBlock>

This works on page load, I can drag and drop the accounts. As soon as I change my Account view and trigger onchange event. I cannot drag and drop the accounts any more.

Tried all kinds of things, but a bit stuck.

Answer 1

You will need to reload the jquery function after reRender .Typically I use oncomplete event of action function or action support and bind back the jquery function again .

<apex:page controller="AccountListViewController" >

<apex:stylesheet value="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
 <apex:includeScript value="//code.jquery.com/jquery-2.1.4.js"/>
 <apex:includeScript value="//code.jquery.com/ui/1.11.4/jquery-ui.js"/>

 <script>
  j$ = jQuery.noConflict();

   j$(document).ready(function(){
    tablesort();
});

 function tablesort(){
    j$(document.getElementById("{!$Component.pageForm.pageBlockData.AccntTable}")).find("tbody").sortable();
 }
 </script>

<apex:pageBlock id="pageBlockHeader" >
  <apex:pageBlockButtons location="top">

    <apex:commandButton action="{!runReport}" value="Run Report" id="theButton"/>
      <apex:commandButton action="{!callSaveDeal}" value="Save Config" id="theConfigButton"/>

  </apex:pageBlockButtons>
     <apex:selectList value="{!AccFilterId}" size="1" id="filterMenu">
        <apex:selectOptions value="{!AccountExistingViews}"></apex:selectOptions>
        <apex:actionSupport event="onchange"  action="{!resetFilter}" rerender="AccntTable" status="ajaxStatus" oncomplete="tablesort();"/>
   </apex:selectList>

   <apex:actionStatus id="ajaxStatus" startText="Loading..."  stopText=""/>
</apex:pageBlock>


 <apex:pageBlock title="Accounts" id="pageBlockData">

        <apex:pageBlockTable value="{!Accounts}" var="item" id="AccntTable">
            <apex:column value="{!item.name}"/>
        </apex:pageBlockTable>
 </apex:pageBlock>