OctoberCMS Ajax Sort im Frontend

Lesezeit: 3 Minuten

Benutzer-Avatar
ServerSideSkittles

Ich suche nach der besten Methode zum Sortieren einer Liste im Frontend mit Ajax.

Ich habe also eine Komponente, die alle Elemente durchläuft. Dann eine Seitenleiste mit Kontrollkästchen zum Filtern mit Ajax. Jedes Kontrollkästchen ist eine Kategorie und lebt einen Filter, indem es diesen Filter aktiviert.

In meiner Komponente default.htm habe ich

{% 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>

und eine Schaltfläche, bis es funktioniert, um zu Kontrollkästchen zu wechseln.

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

und in meiner Komponenten-Plugin-Datei

// 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;

}

Allerdings habe ich Probleme damit, dass das Teil nicht gefunden wird. Das Obige ist ziemlich schlampig, aber ich suche nur nach der besten Möglichkeit, den Inhalt zu aktualisieren (verwenden Sie mehrere Teilbereiche zum Aktualisieren oder nur ein Div?) Und auch den Umfang zu behandeln.

Ich weiß von der teilweisen Aktualisierung, aber ich benötige ein funktionierendes Beispiel, um daraus zu lernen. Ich kenne die Best Practices für den Umfang in einer Komponente nicht, ob sich dies auf die Paginierung auswirkt oder nicht, und wie das Setup mit mehreren Teiltönen in einer Komponente strukturiert wird.

  • Sie können versuchen, sie zu entfernen data-request-update="#results" und senden Sie das Update direkt in Ihre zurück onHandleForm mit return [ '#results' => $this->renderPartial('yourcomponent::default.htm') ];

    – OsDev

    5. April 2017 um 22:42 Uhr

Wenn Sie die Teilaktualisierungen aus dem Handler abrufen möchten, sollte der Attributname lauten

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

Sie können mehrere Teiltöne auch so verwenden:

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

Die andere Möglichkeit besteht darin, die Teilaktualisierungen vom Ajax-Handler zu übertragen. Das fühlt sich für mich etwas sauberer an, aber das ist nur eine Frage der Präferenz.

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

Mehr Infos im Aktualisieren von Partials Seite der offiziellen Dokumentation.

  • Wie kommt die Logik beim Filtern der Datenbankergebnisse ins Spiel?

    – ServerSideSkittles

    7. April 2017 um 7:52 Uhr

  • Sie ordnen die Datensätze im Ajax-Handler an und geben die anzuzeigenden Ergebnisse im Partial zurück

    – Drachenbaum

    7. April 2017 um 8:30 Uhr

  • Danke, was ist die beste Vorgehensweise im Ajax-Handler, um dies zu tun? Ich sehe, Sie rendern einen Teil, aber wie werden die Modelldaten gefiltert und wie werden die Daten weitergegeben? $das[‘result’] = $filter; Ich suche nach einem einfachen Beispiel für Code als so etwas wie einen Kontrollkästchen-Array-Filter mit Live-Updates für mehrere Prüfungen/Filter.

    – ServerSideSkittles

    7. April 2017 um 8:46 Uhr


  • Ich habe die Frage mit mehr Details angehängt. Ich habe diese Dokumente gelesen, aber sie erklären nicht die bewährten Verfahren zum Umgang mit dem Umfang in einer Komponente und auch nicht, ob solche Dinge auch funktionieren. Ich schätze Ihre Antwort, aber das ist nur aus den Dokumenten eingefügt, die ich bereits gelesen habe.

    – ServerSideSkittles

    9. April 2017 um 18:10 Uhr

Benutzer-Avatar
Aamir Scheich

Wechseln Sie in default.htm wenn default.htm in einem Ordner, dann ersetzen 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>

1225870cookie-checkOctoberCMS Ajax Sort im Frontend

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy