[SalesForce] Problem with using jquery sortable with data rerendered

when I am using Sortable with

<apex:page standardController="Contact" extensions="extContactList">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css"/>

     <style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>

<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>

    <ul id="sortable" >
        <li class="ui-state-default"> First Name - Last Name - Id</li>
    <apex:repeat value="{!ContactList}" var="c">
        <li class="ui-state-default"> {!c.FirstName} - {!c.LastName} - {!c.Id} </li>

    </apex:repeat>
    </ul>

</apex:page>

It works perfactly but when i use it on data which comes after re rendering it does not work as expected .eg. in

<apex:page StandardController="User_LineUp_Details__c" extensions="LineUpController" > 
<apex:pageMessages rendered="{!showError }" id="errormsg" />
<!--<script type='text/javascript' src= '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'> 
    </script> -->
       <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css"/>

     <style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
                        var j$=jQuery.noConflict(); 
                        j$(function sorting() {
                        j$( "#sortable" ).sortable();
                        j$( "#sortable" ).disableSelection();
                        });

                        window.getValues = function() {
                            j$.each($('#sortable').find('li'), function() {
                                alert($(this).text());
                            });
                        }
                   </script> 

    <script language="javascript"> 
            var j$ = jQuery.noConflict();
            function hideuser(){

                j$("[id$=mlktp]").hide(); 
            }    
            j$(document).ready(function(){hideuser()});

    </script>

<script>
    function showParent(name,id)
    {
        alert('name'+name);
        var winMain=top.window.opener;
        var namefield=winMain.document.getElementById('{!$CurrentPage.parameters.namefield}');
        var idfield=winMain.document.getElementById('{!$CurrentPage.parameters.idfield}');
        namefield.value=name;
        idfield.value=id;
        window.alert('showparent'+winMain.document.getElementById('{!$CurrentPage.parameters.namefield}').value);
        top.window.close();
    }
</script>
<style type="text/css">
    .width33pct {
        width: 100%;
        length: 100%;
    }

    .activeTblHeight {
        height: 0%;
    }


    .width20pct {
        width: 100%;

    }

     .loadingBackground { 
        /* Background color */ 
        background-color:black; 
        opacity: 0.10; 
        filter: alpha(opacity = 10); 

        /* Dimensions */ 
        width: 100%; 
        height: 100%; 
        top: 0; 
        left: 0; 
        z-index: 999; 
        position:fixed;
    } 
    .loadingPanel { 
        /* Dimensions */ 
        left: 48%; 
        top: 48%; 
        height: 50px; 
        z-index: 999; 
        position: fixed; 
    }    
</style>

<apex:form >
        <apex:actionPoller reRender="LineUpPG"  action="{!refreshStatus}" interval="60" />
        <apex:pageBlock >
            <apex:actionStatus startText="Please Wait..." id="LoadingPage"> 
                <apex:facet name="start">
                    <div>
                        <div class="loadingBackground" />          
                            <div class="loadingPanel">
                            <img src="{!$Resource.LoadingImage}"/>
                        </div>
                    </div> 
                </apex:facet>
            </apex:actionStatus> 
        <apex:pageBlockSection >
            <apex:pageblockSectionItem >
            <apex:actionRegion >
                <apex:panelGrid columns="10" id="PBS">

                    <apex:outputPanel layout="block">
                        <apex:outputLabel value="Channel" styleClass="width20pct"/>
                        <apex:selectList size="1" id="channel"  value="{!selectedchannel}"  >
                            <apex:selectOptions value="{!channelvalues}"  />
                            <apex:actionSupport event="onchange" status="LoadingPage" action="{!createLocationList}" reRender="location"/> 
                        </apex:selectList>
                    </apex:outputPanel>
                    <apex:outputPanel layout="block">
                        <apex:outputLabel value="TourLocation"/>
                        <apex:selectList size="1" id="location"  value="{!selectedlocation}" styleClass="width20pct" >
                            <apex:selectOptions value="{!locationvalues}"/>

                        </apex:selectList>
                    </apex:outputPanel>
                    <apex:outputPanel >
                        <apex:outputLabel value="Member Role"></apex:outputLabel>
                        <apex:inputField value="{!lineUp.Cast_Member_Role__c}" id="role">
                        <apex:actionSupport event="onchange" status="LoadingPage" action="{!refreshStatus}" reRender="LinupPB" onComplete="hideuser();sorting();" />
                        </apex:inputField>
                    </apex:outputPanel>  

                </apex:panelGrid>
                </apex:actionRegion>  
            </apex:pageblockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>


<apex:pageBlock title="LineUp" id="LinupPB" >
   <apex:actionRegion >
    <apex:pageBlock > 
    <apex:pageBlockSection title="Add Cast Member to Line Up" >

        <apex:pageblockSectionItem >
             <apex:panelGrid columns="10" id="addmemberPB"   > 
                    <apex:panelGrid columns="1">
                        <apex:outputLabel value="AddCastMember" />
                        <apex:inputField value="{!lineUp.Cast_Member__c}" required="true" />
                    </apex:panelGrid>
                    <div>
                    </div>
                   <apex:panelGrid columns="1"> 
                        <apex:outputLabel value="Position"/>
                        <apex:selectList size="1" id="positions"  value="{!selectedposition}" >
                            <apex:selectOptions value="{!positionvalues}"/>
                        </apex:selectList>
                    </apex:panelGrid>
                    <Div>
                    </Div>  
                     <apex:panelGrid columns="1"> 
                        <apex:outputLabel value="Reference"/>
                        <apex:selectList size="1" id="refrenceid"  value="{!selectedreference}" >
                            <apex:selectOptions value="{!referencevalues}"/>
                        </apex:selectList>
                    </apex:panelGrid>
                    <Div>
                    </Div>
                     <apex:panelGrid columns="1"> 
                        <apex:outputLabel value="Start"/>
                        <apex:inputField value="{!Schedule.Start__c}" />                            
                    </apex:panelGrid>
                     <Div>
                    </Div>
                     <apex:panelGrid columns="1"> 
                        <apex:outputLabel value="End"/>
                        <apex:inputField value="{!Schedule.End__c}" />                            
                    </apex:panelGrid>
            </apex:panelGrid>
        </apex:pageblockSectionItem>

    </apex:pageBlockSection>
    <apex:commandButton value="Add" action="{!OnAddMember}" reRender="ActivePBS,errormsg"/>
  </apex:pageBlock> 
  </apex:actionRegion>
    <apex:panelGrid columns="3"  id="LineUpPG" style="width:100%;length:100%" >
        <apex:pageBlock id="HeldPBS" >
            <fieldset>
                <legend>Scheduled/Held :</legend>
                <apex:pageBlockSection columns="1" >
                    <apex:pageBlockTable value="{!lstheldschedule}" var="heldUser" style="width:100%;length:100%" headerClass="activeTblHeight" border="0px"  cellpadding="0px" cellspacing="0px" >
                    <apex:column >{!heldUser.Assigned_To__r.Driver_ID__c}{!heldUser.Assigned_To__r.Guide_ID__c}-{!heldUser.Assigned_To__r.Name} <apex:image value="{!$Resource.lineupimg}\LinupImg\item_lang_flash.gif" rendered="{!heldUser.Assigned_To__r.LanguageLocaleKey  != $Label.USER_LANG_ENGLISH}"/>
                    <apex:image value="{!$Resource.lineupimg}\LinupImg\stopwatch.gif" rendered="{!heldUser.End__c  != null}" />

                    </apex:column>
                    </apex:pageBlockTable>
                </apex:pageBlockSection>
            </fieldset>
        </apex:pageBlock>

        <apex:pageBlock >
            <fieldset >
                <legend>Active :</legend>
                <apex:pageBlockSection columns="1" id="ActivePBS"  >

                    ***<ul id="sortable" >
                      <apex:Repeat value="{!lstScheduledUser}"  var="scheduledUser" >                       
                        <li class="ui-state-default">                          
                        <!--<td onClick="showParent('{!scheduledUser.Cast_Member__r.Name}','{!scheduledUser.Cast_Member__c}')" >-->{!scheduledUser.Cast_Member__r.Guide_ID__c}{!scheduledUser.Cast_Member__r.Driver_ID__c}-{!scheduledUser.Cast_Member__r.Name} 
                        <apex:image value="{!$Resource.lineupimg}\LinupImg\item_lang_flash.gif" rendered="{!scheduledUser.Cast_Member__r.LanguageLocaleKey  != $Label.USER_LANG_ENGLISH}"/> 
                         </li>                                            
                     </apex:Repeat>
                      </ul>***  

                </apex:pageBlockSection>

            </fieldset>
        </apex:pageBlock>

        <apex:pageBlock rendered="{!isdriver}">
            <fieldset >
                <legend>On-Run :</legend>
                     <apex:pageBlockSection columns="1" id="RunPBS" >
                    <apex:pageBlockTable value="{!lstOnRunUser}"  var="onrundriver" style="width:100%;length:100%" >
                        <apex:column onClick="showParent('{!onrundriver.userName}','{!onrundriver.SFId}')">{!onrundriver.userId}-{!onrundriver.userName}-{!onrundriver.tourType}
                         <apex:image value="{!$Resource.lineupimg}\LinupImg\item_lang_flash.gif" rendered="{!onrundriver.userLanguage  != $Label.USER_LANG_ENGLISH}"/>
                        </apex:column>
                    </apex:pageBlockTable>
                </apex:pageBlockSection>
            </fieldset>
        </apex:pageBlock>

         <apex:pageBlock rendered="{!(!isdriver)}" >

            <fieldset >
                <legend>On-Tour :</legend>
                <apex:pageBlockSection columns="1" id="RunPBS" >
                    <apex:pageBlockTable value="{!lstOnRunUser}"  var="onrunUser" style="width:100%;length:100%" >
                        <apex:column onClick="showParent('{!onrunUser.userName}','{!onrunUser.SFId}')">{!onrunUser.userId}-{!onrunUser.userName}-{!onrunUser.tourType}
                        <apex:outputText value="+" rendered="{!onrunUser.No_of_tour > 0}"/>
                        <apex:image value="{!$Resource.lineupimg}\LinupImg\item_lang_flash.gif" rendered="{!onrunUser.userLanguage  != $Label.USER_LANG_ENGLISH}"/>
                        </apex:column>
                    </apex:pageBlockTable>
                </apex:pageBlockSection>
            </fieldset> 
        </apex:pageBlock>
    </apex:panelGrid>

</apex:pageBlock>
</apex:form> 

</apex:page>

in this code this does not work please help me in this asap

Best Answer

For simplicity I just took the script and added it in the rerenderd block thus applying it every time it is rendered:

<apex:pageBlockSection columns="1" id="ActivePBS"  >

                    <ul id="sortable" >
                      <apex:Repeat value="{!lstScheduledUser}"  var="scheduledUser" >                       
                        <li class="ui-state-default">                          
                        <!--<td onClick="showParent('{!scheduledUser.Cast_Member__r.Name}','{!scheduledUser.Cast_Member__c}')" >-->{!scheduledUser.Cast_Member__r.Guide_ID__c}{!scheduledUser.Cast_Member__r.Driver_ID__c}-{!scheduledUser.Cast_Member__r.Name} 
                        <apex:image value="{!$Resource.lineupimg}\LinupImg\item_lang_flash.gif" rendered="{!scheduledUser.Cast_Member__r.LanguageLocaleKey  != $Label.USER_LANG_ENGLISH}"/> 
                         </li>                                            
                     </apex:Repeat>
                      </ul>***  

     <script>
         $( "#sortable" ).sortable();
         $( "#sortable" ).disableSelection();
     </script>

                </apex:pageBlockSection>

If you are going to reuse the sortable elsewhere, you can create a function:

function implementSortable(){
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();    
}

And call that function in the ready() function as well as oncomplete methods that rerender blocks that are 'sortable':

<apex:commandButton value="Add" oncomplete="implementSortable();" action="{!OnAddMember}" reRender="ActivePBS,errormsg"/>

or simply in the script block within the rendered block

And for clarity, I had a question while writing this as I could not recall, question was if the oncomplete occurred before the rerender or not. Here is a link to the post answering that and shows oncomplete occurs after the serenader:

Is there a guaranteed execution order of rerender and oncomplete

WORKING EXAMPLE

CLASS

public class exampleSortable{

public String selecteOption {get;set;}

    public Integer cnt {get;set;}

    public ericSortable(){
        cnt = 0;
    }

    public selectoption[] opts{

        get{
            return new SelectOption[]{
                    new SelectOption('','--Select--'),
                    new SelectOption('1','1'),
                    new SelectOption('2','2'),
                    new SelectOption('3','3')
            };
        }

        set;

    }

    public string[] usrs{
        get{
            return new String[]{
                            'ST1',
                            'ST2',
                            'ST3',
                            'ST4'
                      };
        }
        set;
    }

    public void doSomething(){
        cnt++;
    }

}

PAGE

<apex:page controller="exampleSortable">

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"/>

    <apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css"/>


<script>
$(document).ready( function() {

    implementSortable();

});
    function implementSortable(){
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();    
    }


</script>
<apex:form >
        <apex:outPutPanel id="ActivePBS">

            <ul id="sortable" >
              <apex:Repeat value="{!usrs}"  var="u" >                       
                <li class="ui-state-default">                          
                    {!u} - {!cnt}
                 </li>                                            
             </apex:Repeat>
              </ul> 

        </apex:outPutPanel>


<apex:commandButton value="Rerender Me" onComplete="implementSortable();" action="{!doSomething}" rerender="ActivePBS"/>
</apex:form>    

</apex:page>

Anything else you add it either going to break it or not - Basic debugging: tear it down until it works then add back in slowly and test. When you find what breaks it figure out why and how to fix it

When I put the code in a pageblockTabe it split up the UL and the LI into their own TD's...Sometimes you do not need apex tags, just use HTML

Related Topic