php – OctoberCMS Ajax Sort in the frontend-ThrowExceptions

Exception or error:

I am looking for the best practice in sorting a list in the frontend using ajax.

So I have a component that loops through all the items. Then a sidebar with checkboxes to filter using Ajax. Each checkbox will be a category and will live a filter by checking on that filter.

In my component default.htm, I have

{% set items = __SELF__.items %}

<div class="col-md-12" id="results">
{% for item in items %}

    <li>{{ item.title }} - {{ item.description }}</li>

{% endfor %}   

and a button until I get it working to switch to checkboxes.

<button class="btn btn-default"

and in my components plugin file

// Fetches everything
public function onRun() {

    $order = items::orderBy('id', 'asc');
    $this->items = $order->get();


function onHandleForm()

    // Fetch all of the items where category is 2 for test purposes
    $order = items::orderBy('id', 'desc')->where('category','2');
    $filter = $order->get();

    $this->page['items'] = $filter;


Yet I have problems with the part not being found. The above is quite sloppy but I am just looking for the best way to refresh the content (use multiple partials to update or just a div?) and also dealing with the scope.

I know about the partial update but I require a working example to learn from. I don’t know the best practices for scope in a component, whether or not this will affect pagination, and how to structure setup with multiple partials in one component.

How to solve:

If you want to pull in the partial updates from the handler, then the attribute name should be

data-request-update="resultsPartialName: '#results'"

You can use multiple partials also like this:

data-request-update="firstpartial: '#myDiv', secondpartial: '#otherDiv'"

The other way to go is to push the partial updates from the ajax handler. This feels a bit cleaner to me, but its is just the matter of preference.

function onRefreshTime()
    return [
        '#myDiv' => $this->renderPartial('mypartial')

More info in the Updating partials page of the official documentation.


Change into default.htm if default.htm in a folder, then replace data-request-update="foldername/default:'#results'"

<form data-request="{{ __SELF__ }}::onFormSubmit" data-request-validate>
<button class="btn btn-default" data-request="onHandleForm" data-request-update="default:'#results'">

Leave a Reply

Your email address will not be published. Required fields are marked *