Antworten zum Thema „Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwachen“

MrManko · 24.11.2009

Hi @ all,

wie der Titel schon sagt, ich habe ein Problem mehrere Listen, die mit Scriptacolous und Prototype sortable gemacht wurden, dynamisch zu überwachen.

Folgendes Szenario: Ich benutze diese Funktionen um eine Navigation vom Benutzer sortieren zu lassen. Meine Navigation kann jedoch zwei Ebenen haben, das sieht dann so aus (vereinfacht) :

HTML:

<ul id='navi_list' class='navigation'> 
<li id="navi_1"><div id="link_1">Punkt 1.0</div>
     <ul id="navi_list_1">
         <li id="navi_2"><div id="link_2">Punkt 1.1</div></li>
         <li id="navi_3"><div id="link_3">Punkt 1.2</div></li>
     </ul>
</li>
<li id="navi_4"><div id="link_4">Punkt 2.0</div></li>
<li id="navi_5"><div id="link_5">Punkt 3.0</div>
    <ul id="navi_list_2">
        <li id="navi_6"><div id="link_6">Punkt 3.1</div></li>
        <li id="navi_7"><div id="link_7">Punkt 3.2</div></li>
    </ul>
</li>
</ul>

So nun kann der User ja nicht nur die Oberpunkte (Punkt 1.0, Punkt 2.0, Punkt 3.0) verschieben sonder kann auch die Unterpunkte neu sortieren (er kann sie jedoch nicht aus ihrerer Liste heraus in eine andere stecken). Da ich natürlich nie weiß, wie ein User seine Navigation aufbauen wird (es handelt sich um ein CMS, muss ich iwie in der Lage sein, die Unterlisten einzeln zu überwachen, damit ich die Änderungen in der Datenbank per Ajax durchführen kann. Mein Versuch das ganze zu realisieren sieht wie folgt aus:

PHP:

function EnableDragAndDrop() {
    Sortable.create('navi_list', { onUpdate : updateOrder });
    for(key = 1; key < all_lists; key++) {
           Sortable.create('navi_list_'+key, { onUpdate : function() {
               alert(key);
           } });
    }
}

Doch wenn ich nun die Liste verschiebe bekomme ich Leider nicht den Key der List sonder bekomme in diesem Beispiel eine 3 ausgegeben (was ja auch logisch ist).

Meine Frage an euch ist, wie bekomme ich jetzt einen Überwachungsausdruck für jede einzelne Liste hin, so dass ich dann immer korrekt updaten kann ???

MfG
MrManko

saila · 24.11.2009

AW: Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwa

Hi,

die Fragestellung habe ich soweit verstanden, was mir noch unklar ist:
Wenn per prototype das Menü durch dragable (so lautet es in jQuery) verschoben wird, erfolgt ja per ajax ein direktes Update in der DB - Ansonsten würde es ja keinen Sinn ergeben.

Sprich - die musst im Grunde per Ajax ein direktes Update an die DB senden und jedem Menüpunkt in der Datenbank einen SortKey geben.

Sprich - zu Beginn hat das Menü einen Aufbau das ja nach einer bestimmten Folge aufgebaut wird. Darin befinden sich die Submenü und darin wiederum die SubSubmenü.

Somit bräuchtest du lediglich für den User, welcher das Menü umstrukturieren möchte zum eine ein eigenes Feld (z.B.: userMenu) und die Schlüssel für den Menüaufbau über ein ******isiertes Array.

Somit bleiben zum einen die Daten für den User gespeichert und durch den sortKey wäre das Menü direkt korrekt aufgebaut und bei Änderungen lediglich der sortKey für den User angepasst.

MrManko · 24.11.2009

AW: Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwa

Halli Hallo,

deine Überlegung verstehe ich zum größten Teil auch nur das Problem ist ja, ich habe Listen in Listen. Wenn ich mit dem Listener OnUpdate arbeite, dann wird mir ja immer ein Array mit der Reihenfolge geliefert, aber nur jeweils für die gerade bearbeitee Liste und Prototype scheint Listen in Listen nicht zu erkennen.

Mit meiner Funktion EnableDragAndDrop() mache ich ja erstmal alle Unterlisten sortierbar. Doch mein Problem ist jetzt, wie kann ich navi_list_1 und navi_list_2 getrennt voneinader überwachen ?

saila · 24.11.2009

AW: Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwa

MrManko schrieb:
Halli Hallo,

deine Überlegung verstehe ich zum größten Teil auch nur das Problem ist ja, ich habe Listen in Listen. Wenn ich mit dem Listener OnUpdate arbeite, dann wird mir ja immer ein Array mit der Reihenfolge geliefert, aber nur jeweils für die gerade bearbeitee Liste und Prototype scheint Listen in Listen nicht zu erkennen.

Mit meiner Funktion EnableDragAndDrop() mache ich ja erstmal alle Unterlisten sortierbar. Doch mein Problem ist jetzt, wie kann ich navi_list_1 und navi_list_2 getrennt voneinader überwachen ?

Kannst du mal den Request hier posten? Sprich - die Werte, welche prototype per Ajax erhält, wenn du die Navi veränderst.

Zu der Überlegung die Navi ändern zu können - das ist schon recht anspruchsvoll und so einfach ist das letztlich auch nicht. Im Grunde dürfte das prototype nicht jucken, wenn das eine Veränderung erfolgt, wichtig ist nur, was für welche Werte übergeben werden.
Also poste mal den Request.

MrManko · 24.11.2009

AW: Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwa

Einen Request kann ich dir nicht liefern, da ich keinen momentan erzeuge, da ich keine Ahnung habe, wie ich die Veränderung in z.B. navi_list_1 mitbekommen soll.

Wie ich einen Ajax Request erstelle und dann die DB update das ist alles kein Problem.

Dies ist mal ein Ausschnitt aus meinem Skript, wie du siehst, greift der Callback "updateOrder" nur wenn ich eine Oberkategorie verschiebe, halt Elemente aus der Liste mit der ID "navi_list"

PHP:

function dragAndDrop() {
    Sortable.create('navi_list', { onUpdate : updateOrder });
    for(key = 1; key < all_lists; key++) {
           Sortable.create('navi_list_'+key, { onUpdate : function() {alert(key);} });
    }
    document.getElementById("edit").innerHTML = "Bearbeitungsmodus AN <a href='javascript:dragAndDropEnd();'>[AUS]</a>";
    document.getElementById("navi_list").style.cursor = "move";
}

function updateOrder()
{
    document.getElementById("ajax").innerHTML = "Wird gespeichert";
    
    var options = {
        method : 'post',
        parameters : Sortable.******ize('navi_list'),
        onComplete : function(request) {
            document.getElementById("ajax").innerHTML = "";
        }

    };

    new Ajax.Request('engine/Ajax/processor.php', options);
}

saila · 24.11.2009

AW: Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwa

Das mit der Übergabe ist mir auch klar, nur was wird gespeichert. Du kannst doch sicherlich ausgeben lassen, was geändert wird. Sprich - wie ist der Speichervorgang bei einer Änderung und was genau wird gespeichert.

Wird lediglich das eine Object als Änderung gespeichert oder wird danach noch mal ausgelesen und somit eine neue Reihenfolge zuvor festgelegt - was ja eigentl. sein müsste.

MrManko · 25.11.2009

AW: Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwa

So, ich habe mir jetzt erstmal eine Notlösung "aus dem Ärmel geschüttelt"

Hier der Code:

PHP:

var Listener = Class.create({
  initialize: function(key) {
    this.key  = key;
  },

  speak: function() {
    alert("Ausgabe:"+this.key);
    var key = this.key;
    $('navi_list_'+this.key).observe('dblclick',
        function(event) {
            alert("Test"+key);
            document.getElementById("ajax").innerHTML = "Wird gespeichert";
    
            var options = {
                method : 'post',
                parameters : Sortable.******ize('navi_list_'+key)+"&key="+key,
                onComplete : function(request) {
                    document.getElementById("ajax").innerHTML = "";
                }
        
            };
        
            new Ajax.Request('engine/Ajax/subprocessor.php', options);
        }
    );
  }
});

function EnableDragAndDrop() {
    Sortable.create("navi_list", {/*handles : $$('#navi_list li div a .pic'),*/ onUpdate : updateOrder });
    for(i = 1; i < all_lists; i++) {
        Sortable.create("navi_list_"+i);
        var tester = new Listener(i);
        tester.speak();
    }
}

function updateOrder()
{
    document.getElementById("ajax").innerHTML = "Wird gespeichert";
    
    var options = {
        method : 'post',
        parameters : Sortable.******ize('navi_list'),
        onComplete : function(request) {
            document.getElementById("ajax").innerHTML = "";
        }

    };

    new Ajax.Request('engine/Ajax/processor.php', options);
}

Das Problem an dieser "Lösung" ist, dass der Request erst nach einem Doppelklick auf das Element ausgelöst wird und das ist nicht so ganz im Sinne des Erfinders. Mal schauen ob ich das iwie hinbekommen kann, das der nach jeder Bewegung des Menüs speichert.

Mfg und gute Nacht
MrManko

saila · 25.11.2009

AW: Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwa

Also soviel ich weis, wird bei einem mouseevent bei prototype per ajax ein GET-Parameter gesendet.

Du kannst mir auch das Script mit einem Teil der Navi senden und ich prüfe mal wo der Parameter steckt

MrManko · 25.11.2009

AW: Problem: Sortable Lists mit Scriptacolous und Prototype+wie mehrere Listen überwa

So, nun habe ich eine Lösung gefunden, die mich zumindest jetzt befriedigt. In meinem vorherigen Post bin ich das Problem einfach nur falsch angegangen.

Hier meine neue Lösung, vllt kann sie iwem nützlich sein (außer mir natürlich ^^)

PHP:

// Klasse die Unterpunkte sortable macht
// Noetig, da ich so mehrere Listen mit verschieden ID's ueberwachen kann
var MakeSortable = Class.create({
    initialize: function(key) {
        this.key  = key;
        Sortable.create("navi_list_"+this.key, { onUpdate : 
            function() {
                document.getElementById("ajax").innerHTML = "Wird gespeichert";
    
                var options = {
                    method : 'post',
                    parameters : Sortable.******ize('navi_list_'+key)+"&key="+key,
                    onComplete : function(request) {
                        document.getElementById("ajax").innerHTML = "";
                    }
            
                };
            
                new Ajax.Request('engine/Ajax/subprocessor.php', options);
            }
        });
    }
});
// Funktion macht Oberpunkte sortable, erstellt pro UNterliste ein neues Objekt
function EnableDragAndDrop() {
    Sortable.create("navi_list", { onUpdate : updateOrder });
    for(i = 1; i < all_lists; i++) {
        var tester = new MakeSortable(i);    
    }
}

function updateOrder()
{
    document.getElementById("ajax").innerHTML = "Wird gespeichert";
    
    var options = {
        method : 'post',
        parameters : Sortable.******ize('navi_list'),
        onComplete : function(request) {
            document.getElementById("ajax").innerHTML = "";
        }

    };

    new Ajax.Request('engine/Ajax/processor.php', options);
}

Mfg
MrManko