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:
If you are going to reuse the sortable elsewhere, you can create a function:
And call that function in the
ready()
function as well as oncomplete methods that rerender blocks that are 'sortable':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
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