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.
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'">
</form>