Apex Code Development You need to sign in to do that
Don't have an account?
Shailender 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"/>
<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 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
<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 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
Shailender,
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.
Regards,
Bharathimohan Rammaurthy
Salesforce For All (http://salesforceforall.blogspot.com/)