36

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.

Nmk
  • 1,281
  • 2
  • 14
  • 25
ServerSideSkittles
  • 2,713
  • 10
  • 34
  • 60
  • You can try to remove `data-request-update="#results"` and return the update right in your `onHandleForm` with `return [ '#results' => $this->renderPartial('yourcomponent::default.htm') ];` – OsDev Apr 05 '17 at 22:42

2 Answers2

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.

dragontree
  • 1,709
  • 11
  • 14
  • How does the logic with filtering the database results come in to play? – ServerSideSkittles Apr 07 '17 at 07:52
  • You order the records in the ajax handler and return the results to be displayed in the partial – dragontree Apr 07 '17 at 08:30
  • Thanks, what is the best practice in the ajax handler to do this? I see you render a partial but how is the model data filtered and how is the data passed? $this['result'] = $filter; I am looking for a basic example of code as something like a checkbox array filter with live updates on multiple checks/filters. – ServerSideSkittles Apr 07 '17 at 08:46
  • I've appended the question with more detail. I have read those docs but they don't explain best practice with dealing with scope in a component and also if things such a pagination will work too. I appreciate your answer but that is just pasted from the docs which I have read already. – ServerSideSkittles Apr 09 '17 at 18:10
1

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>
Sailendra
  • 1,318
  • 14
  • 29
aamir shaikh
  • 19
  • 4