function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
smitrasmitra 

how to write unorder list and orderd list in visualforce page

Please tell me how to write the equivalnt of the below code

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

I think using datalist is a possible solution

<apex:dataList value="{!fields}" var="fls" id="sortable1" styleClass="connectedSortable">
        <apex:outputText value="{!fls.key}" id="sortable1" styleClass="connectedSortable"/>
 </apex:dataList>

but I am unable to call jquery using the following code.
Daniel Huckins 17Daniel Huckins 17
You could do something like this:
<ul>
<apex:repeat value="{!fields}" var="f">
    <li>
        <apex:outputText value="{!f.value}/>
    </li>
</apex:repeat>
</ul>
smitrasmitra
Hi Daniel ,

Thanks for the reply.But i am unable to call the jquery functionlity using your code 

<ul id="sortable1" class="connectedSortable">
<apex:repeat value="{!fields}" var="f">
   <apex:outputText value="{!f.value}/>
</apex:repeat>
</ul>
Daniel Huckins 17Daniel Huckins 17
Can you please post your javascript code?
smitrasmitra
Here is the entire code which is working fine in visualforce page..Just need to make the list dynamic

<apex:page >

  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  </style>
  <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  </script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

</apex:page>