1

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

1
  • 2
    When you rerender you need to reapply the sortable.Add an oncomplete to the item that rerenders the table and call a function that will again apply the sortable. Or you can simply put the script for the sortable in the same block that gets rerendered
    – Eric
    Aug 22 '15 at 13:36
2

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

5
  • I am doing the same as you told but still not able drag and drop
    – shl123
    Aug 22 '15 at 17:12
  • See updated answer and go from there.
    – Eric
    Aug 22 '15 at 21:37
  • Thanks Eric its now working but i am getting a problem pageblock size is getting changed when i am dragging and droping the item
    – shl123
    Aug 23 '15 at 5:19
  • @shl123 - That is a whole other issue. Do you need to use a pageblock?? If so and if you cannot get it you can open a new question, but make sure it is concise and about SF and not HTML or JS
    – Eric
    Aug 23 '15 at 13:12
  • @Eric i am not able to get the updated items in apex when i change the order of string Jan 24 at 19:31

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.