Home/ Questions/Q 5838003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T11:25:17+00:00

I’m trying to create a jquery ui sortable in Primefaces and convert my html/jquery

  • 0

I’m trying to create a jquery ui sortable in Primefaces and convert my html/jquery example to primefaces jquery. I’m trying to add the sortable() function to each element within the dataList. Any ideas on how to apply the sortable() (this function is in an external library).

Html Example:

 $(function() {
                   $( "#sortable" ).sortable(/*{placeholder: "ui-state-highlight"}*/);
                   $( "#sortable" ).disableSelection();
           });
           </script>
    </head>
    <body>
    <div class="demo">

    <ul id="sortable">
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
       <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>
           <li ><div class="copy">Title</div><div class="box"><img src="images/images1.jpg"/></div><div class="copy">Stuff Stuff Stuff</div></li>        
    </ul>

primefaces attempt:

<script>
    $ = jQuery
    $(function() {
    $( "#dreamModifyFrm:topTenGrd" ).sortable();
    $( "#dreamModifyFrm:topTenGrd" ).disableSelection();
    });
    </script>
    <h:form id="dreamModifyFrm" binding="#{dreamModify.dreamModifyFrm}">
         <p:dataList id="topTenGrd" var="dream" value="#{dreamModifyBean.topDreams}">
              <h:outputText class="dream-title uppercase" value="#{dream.number}. #{dream.title}" />
              <p:commandLink oncomplete="dreamEditDlg.show()" update=":dreamEditFrm:display"> 
                    <f:setPropertyActionListener value="#{dream}" target="#{dreamModifyBean.selectedDream}"/>
                    <f:setPropertyActionListener value="true" target="#{dreamModifyBean.editLink}"/>
                    <p:graphicImage value="#{dream.imageThumb}" width="125" height="100" />
              </p:commandLink>
                                                                          
     </p:dataList>
</h:form>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Although a little late, an answer may be helpful.

    Problem: jQuery’s .sortable() function tries to sort the direct child-elements of the selected object. Since primefaces renders some divs around your list, you need to point explicit to the enclosing ul.

    Solution:

    <script type="text/javascript">
$(function() {
  $( "#dreamModifyFrm:topTenGrd ul" ).sortable();
  $( "#dreamModifyFrm:topTenGrd ul" ).disableSelection();
});
</script>

    (Note the modified jQuery-Selector)

    Edit: Equivalent behaviour for DataTable. There you need to modify the selector by “tbody”

    • 0