7

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.

10

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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.