Using eFilter with getSortBlock in AJAX Mode

This post comes from a small but useful support recipe that solved a real annoyance in older Evolution CMS projects: eFilter and getSortBlock often worked fine on normal page loads, but once AJAX entered the picture, the sorting UI could easily fall out of sync with the filtered listing.

The original answer was intentionally short. Here it is republished as a cleaner note with the key idea preserved.

The Problem

When a project uses eFilter for AJAX filtering and a separate form for sorting, changing the sort order can update only one part of the page. The visible sort block refreshes, but the filtered result list still reflects the previous state, or the filter submit needs to be triggered manually.

The fix is to intercept the sort form submission, submit it through AJAX, reload the sort block markup, and then re-submit the eFilter form so the result list uses the new sorting state.

The Working Example

<script>
$(document).ready(function(){
    $(document).on("submit", "#changesortBy", function(e){
        e.preventDefault();
        var action = $(this).attr("action");
        var data = $(this).serialize();
        $.post(action, data, function(){
            $("#eFilter_sort_block").load(action + " #eFilter_sort_block");
            $(document).find("#eFiltr").submit();
        })
    })
})
</script>

How It Works

• The handler listens for the sort form with the ID changesortBy.
• Default form submission is stopped with e.preventDefault().
• The form action and serialized form data are sent with $.post().
• After the request completes, the code reloads only the DOM fragment inside #eFilter_sort_block.
• Finally, it re-submits the main filter form #eFiltr so the listing refreshes with the new sort parameters.

Why This Pattern Was Useful

Older Evolution frontends often mixed server-rendered markup with small jQuery fragments. In that context, the most practical fix was not a large refactor, but a reliable sequence of requests:

1. send the new sort parameters
2. refresh the visible sort controls
3. trigger the main filter reload

That sequence kept the interface consistent without rewriting the whole page component.

Where to Be Careful

• Make sure the IDs in your markup match the script exactly: #changesortBy, #eFilter_sort_block, and #eFiltr.
• If your project already uses delegated AJAX form handlers, check for duplicate submissions.
• If you later move the page to a reactive frontend, keep the logic but re-implement it in the new event system instead of keeping the jQuery glue forever.

Takeaway

The recipe is small, but it solves a real UI consistency problem. That is why it is worth keeping in the archive: not every good article needs to be long. Sometimes a working snippet and a clear explanation are exactly what a project needs.