+ Start a Discussion
Shailender Gupta 20Shailender Gupta 20 

problem with Jquery sortable method when i use in a repeat where list comes after i click on commandbutton

Hi when  use sortable() function of jquery on code where list comes on page load like on 
<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"/>
#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; }

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

    <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>

It works perfectly but when i fetch the list after some action and rerender my list sortable() for drag and drop does not works as expected ?...please help me in this ASAP


Try by adding these lines into a common function and call the method in the "oncomplete" method of apex:commandbuttom

function reCallMe()
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();

Hence when the table is rerendered, these methods has to be called again to apply the jquery behavior. Presently, in your code the jquery will work only one time on initial page load and when the table is rerendered, the jquery behavior will be lost.

Bharathimohan Rammaurthy
Salesforce For All (http://salesforceforall.blogspot.com/)