Question

On a JSF page for viewing data, I’ve an OpenFaces datatable with sorting and column reordering enabled saved to appropriate backing bean properties (via: sortColumnId, sortAscending, columnsOrder attributes on the o:dataTable element). On a corresponding inline edit page (where through custom code individual lines of the table can be saved one at a time by the user), the columnsOrder of the datatable is linked to the same property so the columns appear in the same order as on the view page, but the o:columnReordering element is not present in the datatable to prevent column reordering on the edit page. This is required because the AJAX call initiated by moving column fails, due to an error in the partial response XML, to update the table. (There are other requirements too which mean the table should be prevented from being updated via AJAX on the edit page.)

I want to be able to have the datatable on the edit page sorted in the same order as on the view page but with sorting disabled too. However, this doesn’t seem possible in OpenFaces. I’ve linked the datable on the edit page to the same backing bean properties, but for the sorted column to display as sorted, the o:column tag needs to have a sortingExpression attribute. When that attribute is added to the column, that column becomes sortable by the user being able to click on the column header. When not added, the column is not sortable by the user but the table is also not sorted by that column even though it’s specified in the backing bean property as being the column to sort by.

Using JavaScript run by JQuery once the DOM has been created, I’ve tried overwriting the function called by the click event on the ‘th’ element of the OpenFaces column header but after calling the function, the AJAX call to sort and refresh the table is still called. The code used is:

in Edit.xhtml:

<script type="text/javascript">
    $(document).ready(function() {
        $('#doorNumberColumnHeader').parents('th').onclick = null;
        $('#doorNumberColumnHeader').parents('th').click(function(event) {
            alert("Preventing AJAX call");

            if (event) {
                event.preventDefault ? event.preventDefault() : event.returnValue = false;
            }

            return false;
          });
      });
</script>

within OpenFaces datatable of Edit.xthml:

<o:column id="doorNumberColumn" sortingExpression="#{submission.doorNum}" fixed="true" width="50px">
    <f:facet name="header">
        <h:outputText value="#{bundle.SubmissionDoorNumber}" id="doorNumberColumnHeader"/>
    </f:facet>
    <h:outputText value="#{submission.doorNum}"/>
</o:column>

Is there a better way of attempting to prevent the AJAX call to stop the user being able to change the sort order of the table?

Thanks.

Answer 1

For those who may be interested, I found the answer to my question was to overwrite the OpenFaces JavaScript _reload() function after the DOM has been created. I understand this may prevent any OpenFaces component on the same page from making AJAX calls (although on the page in question I only have the one datatable so that’s not a problem.)

<script type="text/javascript">
    $(document).ready(function() {
        // Prevent OpenFaces datatable component from sending AJAX requests!
        window.OpenFaces.Ajax._reload = function(one, two, three) {
            // Do nothing!
        };
    });
</script>

This solution does not prevent other AJAX calls from being made within the page so an a4j:commandButton can still be used.