OctoberCMS Ajax Sort in the frontend

Question

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 %}  <ul>     <li>{{ item.title }} - {{ item.description }}</li> </ul>   {% endfor %}    </div> 

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

<button class="btn btn-default" data-request="onHandleForm" data-request-update="#results"> Go 

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.

Answer 1

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.