[Ajax] jQuery Sortable - Werte auslesen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von GaYlORd, 14. September 2011 .

Schlagworte:
  1. 14. September 2011
    jQuery Sortable - Werte auslesen

    Sees,

    ich habe 1 bis n Boxen, die jeweils ein Raum(Raum 1 ... Raum n) darstellen. Und eine Box, in der die Gäste stehen. Jetzt soll sich jeder Gast in einen Raum ziehen können. Das funktioniert noch alles. (Vorlage: Sortable | jQuery UI)
    Nachdem sich beispielsweise der Gast 1 in die Raum 3 gezogen hat, soll ein Eintrag in die Datenbank gemacht werden, mit den Werten Gast 1 und Raum 3.

    Allerdings schaffe ich es nicht ganz, die beiden Werte abzufragen.

    Nach einem Verschieben ruf ich mit update die Datei updateDB.php auf:
    PHP:
    ...
    update : function() {
        var      order  =  '&gaeste='  + $( this ). sortable ( 'toArray' ) +  '&action=refresh' ;
        $.     post ( "updateDB.php" ,  order , function( antwort ){
        $(     "#info" ). html ( antwort );
        });
    }
    ...
    Das funktioniert noch, bekomme dann alle Gäste im Raum zurück.

    Jetzt meine 2 Fragen:
    Gibt es eine Möglichkeit nur den verschobenen Gast zurückzugeben?
    Wie bekomme ich den Raum in den verschoben wurde?

    Gruß
    gl
     
    + Multi-Zitat Zitieren
  3. 14. September 2011
    AW: jQuery Sortable - Werte auslesen

    Code:
    
update: function(event, ui){}
    jetzt weiß ich nicht was event und ui dir zurück gibt.
    aber da ist sicher was dabei.
     
    + Multi-Zitat Zitieren
  4. 14. September 2011
    AW: jQuery Sortable - Werte auslesen

    Hm, da gibt er mir "[object Object]" zurück.
    Wo sehe ich denn, was es für Werte alles gibt? Hab "ui.sender" getestet, aber da kommt nur null oder [object Object] raus...
     
    + Multi-Zitat Zitieren
  6. 15. September 2011
    AW: jQuery Sortable - Werte auslesen

    nutz html5 und data-attribute. der liste gibst du die raum-id und dem item gibst du die gast-id.

    Code:
    update: function(event, ui) {
 var gid = ui.item.dataset("gast-id"),
 rid = ui.sender.dataset("raum-id");

 console.log("verschobener gast: ", gid);
 console.log("alter raum: ", rid);
 console.log("neuer raum: ", this.dataset("raum-id"));
}
    HTML:
    <ul data-raum-id="1234" class="droptrue ui-sortable">
 <li data-gast-id="12345">...</li>
 <li data-gast-id="12346">...</li>
</ul>
     
    + Multi-Zitat Zitieren
  7. 15. September 2011
    AW: jQuery Sortable - Werte auslesen

    Hilfe
    Entweder dein Script geht nicht oder ich steh völlig auf dem Schlauch ^^

    Hier die JS-funktion:
    PHP:
    $(function() {
     $(      ".selector"  ). sortable ({
             items :  'li.ui-state-highlight' ,
             connectWith :  'ul' ,
             opacity :  0.6 ,
             update : function( event , ui ) {
        var      gid  =  ui . item . dataset ( "gast-id" );   //Sobald ich die beiden Zeilen einfüge
             var  rid  =  ui . sender . dataset ( "raum-id" );     //gehts schon nicht mehr o_O
             var  order  =  '&gaeste='  +  gid  +  '&action=refresh'  +  '&raum='   +  rid ;
        $.     post ( "updateDB.php" ,  order , function( antwort ){
              $(     "#info" ). html ( antwort );
        });
          }
     });
     $(      "li.ui-state-default"  ). sortable ({
            disabled :  true
          });
    });
    Die Räume:
    HTML:
    <div id="div_con">
 Raum 1
 <ul id="sortable1" class='selector' data-raum-id="1">
 </ul>
</div>
.
.
.
    Die Gästeliste:
    HTML:
    <div id="div_con">
 G&auml;ste
<ul id="sortable3" class='selector' data-raum-id="0">
 <li data-gast-id="1" id="hans_1" class="ui-state-highlight">Hans</li>
 <li data-gast-id="2" id="peter_2" class="ui-state-highlight">Peter</li>
 <li data-gast-id="3" id="mechtild_3" class="ui-state-highlight">Mechtild</li>
 <li class="ui-state-default">Brunhilde</li>
 <li class="ui-state-default">Dietmar</li>
 <li class="ui-state-default">Hagen</li>
</ul>
</div>
    Es sollen nur die oberen drei, also class="ui-state-highlight" verschoben werden können. Das funktioniert auch alles.
    Sobald ich aber in den JS-Teil die Variablen rig und gid definiere, tut sich nichts mehr -.- Gibt es da eine Art Anzeige für Fehler?

    Gruß
    gl
     
    + Multi-Zitat Zitieren
  8. 15. September 2011
    AW: jQuery Sortable - Werte auslesen

    hol dir mal das dataset plugin für jquery. manche browser unterstützten das noch nicht.

    firefox: ff-button -> web-entwickler -> firebug (falls installiert) oder web-konsole
    chrome: werkzeug -> tools -> entwicklertools -> console
     
    + Multi-Zitat Zitieren
  9. 15. September 2011
    AW: jQuery Sortable - Werte auslesen

    Hab das grade eingebunden: http://www.orangesoda.net/javascript/jquery.dataset.js
    Keine Veränderung. Getestet in Chrome und FireFox.
     
    + Multi-Zitat Zitieren
  10. 15. September 2011
    AW: jQuery Sortable - Werte auslesen

    Habe mit jQuery nie gearbeitet, aber mit Mootools Sortables geht das ganz einfach. Da kannste bekommste bei dem Event onComplete(element) das verschobene Element und kannst dir mit getParent() die Liste holen, in die es verschoben wurde.
    Kp ob dir das weiterhilft.

    Gruß,
    Figger

    //Edit: Ich glaub irgendwie hab ich dein Problem nciht verstanden. Woran hängt es denn jetzt genau?
     
    + Multi-Zitat Zitieren
  11. 17. September 2011
    AW: jQuery Sortable - Werte auslesen

    Doch doch, hast mich richtig verstanden. Genau das soll gemacht werden. Nur hätte ich halt gerne jQuery benutzt. Das muss damit ja auch irgendwie möglich sein!

    Wenn wer ne Lösung findet, bitte posten^^
     
    + Multi-Zitat Zitieren
  12. 17. September 2011
    AW: jQuery Sortable - Werte auslesen

    welche fehler treten denn bei meiner lösung auf? zur not mit trry/catch arbeiten
     
    + Multi-Zitat Zitieren
  13. 17. September 2011
    AW: jQuery Sortable - Werte auslesen

    Habe das vor einiger Zeit mit jQuery sehr einfach lösen können, habe den Code leider nicht mehr.

    Kurze Google-Recherche liefert schonmal folgenden Ansatz
     
    + Multi-Zitat Zitieren
  14. 18. September 2011
    AW: jQuery Sortable - Werte auslesen

    Ich versteh das Problem immer noch nicht.
    Laut Doku bekommt dein update-event mit ui.item das verschobene element übergeben. Da dieses event erst getriggert wird, wenn das element verschoben wurde, müsstest du mit ui.item.parent() die Liste bekommen, in die es gedropt wurde.
    Hast du es so schon versucht? Wenn ja, wo haperts denn? Installier dir auf jeden Fall mal Firebug und die Web-Developer-Toolbar (sofern du mit Firefox arbeitest), damit sollte sich die Fehlersuche um einiges angenehmer gestalten.

    Gruß,
    Figger
     
    + Multi-Zitat Zitieren
  15. 15. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    Sry für meine späte Antwort...war die letzten Wochen im Urlaub.

    Also hab jetzt die Fehlerkonsole für Chrome gefunden (danke murdoc^^).
    Folgende Zeile funktioniert und da zeigt er mir auch das richtige Element an:
    Code:
    var gid = ui.item.dataset("gast-id");
    Jetzt fehlt noch die entsprechende Box.
    Da hab ich ja:
    Code:
    var rid = ui.sender.dataset("raum-id");
    Was zu diesem Fehler führt:
    Laut Doku gibt sender aber eh die Box zurück, aus der das Element kommt.
    Ich mag ja den Empfänger haben. Finde aber nicht, wie ich den bekomme :-/

    Danke schonmal

    Gruß
    gl
     
    + Multi-Zitat Zitieren
  16. 15. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    ja, dataset(...) ist falsch. nutz .data(...)
     
    + Multi-Zitat Zitieren
  17. 15. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    kommt bei:
    PHP:
    this . data ( "gast-id" );
     
    + Multi-Zitat Zitieren
  18. 15. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    $(sender).data(...)

    ein wenig eigeninitiative darf es dann schon sein
     
    + Multi-Zitat Zitieren
  19. 15. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    Hehe, ist ja nicht so, dass ich nicht auch das ein oder andere versuche und google und so. Aber das hier bekomm ich einfach nicht hin -.-
    $(sender).data("gast-id") funktioniert auch nicht: Uncaught ReferenceError: sender is not defined

    Aber wie oben schon gesagt, gibt ja laut Doku sender die id von der Box zurück aus der das Item genommen wurde und nicht in die es verschoben wurde.
    Hier mal meine komplette Datei, vllt. hab ich ja sonst wo nen Fehler drin, den ich einfach überseh.

    PHP:
    <! DOCTYPE html > 
    <     html > 
    <     head > 
        <     title > Drag n Drop </ title > 
        
            <     link rel = "stylesheet"  href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"  type = "text/css"  media = "all"  /> 
                <     script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"  type = "text/javascript" ></ script > 
                <     script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"  type = "text/javascript" ></ script > 
                <     script src = "http://www.orangesoda.net/javascript/jquery.dataset.js"  type = "text/javascript" ></ script > 

        <     style >
             #div_con{ width:153px; background-color: #000; color: #fff; float: left; margin-right: 10px; }
        #sortable1, #sortable2, #sortable3 { cursor:move; list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
        #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
             </ style >
        <     script >
        $(function() {
                $(      ".selector"  ). sortable ({
                         items :  'li.ui-state-highlight' ,
                         connectWith :  'ul' ,
                         opacity :  0.6 ,
                         update : function( event , ui ) {
                        var      rid  = $( sender ). data ( "raum-id" );
                        var      gid  =  ui . item . dataset ( "gast-id" );
                        var      order  =  '&gaeste='  +  gid  +  '&action=refresh'  +  '&raum='  +  rid ;
                             console . log ( "Gast ID: " ,  gid );
                         console . log ( "Raum ID: " ,  this . data ( "raum-id" ));
                        $.     post ( "updateDB.php" ,  order , function( antwort ){
                            $(     "#info" ). html ( antwort );
                        });
                    }
                });
            
            $(      "li.ui-state-default"  ). sortable ({
                     disabled :  true
                 });

        });
        </     script >
    </     head > 
    <     body id = "demos" > 
        
        <     div id = "info" > bla </ div >

        <     div  class= "demo" >
    <     div id = "div_con" >
             Raum 1
     < ul data - raum - id = "1"  id = "sortable1"  class= 'selector' >
    </     ul >
    </     div >

    <     div id = "div_con" >
             Raum 2
     < ul data - raum - id = "2"  id = "sortable2"  class= 'selector' >
    </     ul >
    </     div >

    <     div id = "div_con" >
             G & auml ; ste
     < ul data - raum - id = "3"  id = "sortable3"  class= 'selector' >
        <     li data - gast - id = "1"  id = "hans"  class= "ui-state-highlight" > Hans </ li >
        <     li data - gast - id = "2"  id = "peter"  class= "ui-state-highlight"  style = "cursor:default;" > Peter </ li >
        <     li data - gast - id = "3"  id = "mechtild"  class= "ui-state-highlight" > Mechtild </ li >
        <     li data - gast - id = "4"  class= "ui-state-default" > Brunhilde </ li >
        <     li data - gast - id = "5"  class= "ui-state-default" > Dietmar </ li >
        <     li data - gast - id = "6"  class= "ui-state-default" > Hagen </ li >
    </     ul >
    </     div >

    <     br clear = "both"  />

    </     div >
    </     body > 
     
    </     html >
    Sry, dass ich da so weiter nerv. Muss das für die Uni machen sonst hätt ich mir schon ne alternative zu dem drag n drop gesucht^^

    Gruß
    gl
     
    + Multi-Zitat Zitieren
  20. 17. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    Sorry, aber push. Komm immer noch nicht weiter und nächster Montag ist Abgabe.

    Brauche nach wie vor die ID von dem Raum "<ul>" in der das Item <li> gedropped wurde. Mein letzter Ansatz ist im obigen Post.
    Hab schon x-verschiedene Varianten für
    PHP:
    var  rid  = $( sender ). data ( "raum-id" );
    versucht, erfolglos.

    Gruß
    gl
     
    + Multi-Zitat Zitieren
  21. 17. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    Code:
    $(function() {
 $( ".selector" ).sortable({
 items: 'li.ui-state-highlight',
 connectWith: 'ul',
 opacity: 0.6,
 
 update: function(event,ui) {
 var rid = $(sender).data("raum-id"),
 gid = $(ui.item).data("gast-id");
 
 console.log("Gast ID: ", gid);
 console.log("Raum ID: ", this.data("raum-id"));
 
 var data = { 
 raum: rid
 gaeste: gid, 
 action: "refresh"
 };
 
 $.post("updateDB.php", data, 
 function(antwort){
 $("#info").html(antwort);
 }
 );
 }
 });

 $( "li.ui-state-default" ).sortable({
 disabled: true
 });

});
     
    + Multi-Zitat Zitieren
  22. 17. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    WOW, danke murdoc. Endlich funktioniert es!!! DANKE!!!

    $(sender), sagt er mir aber, dass es das nicht gibt. Hab das aber mit der entsprechenden Zeile aus console.log ausgetauscht und jetzt funktioniert es:
    PHP:
    var  rid   = $( this ). data ( "raum-id" );
    Juhuuu =)

    Nochmal tausend Dank für die Geduld & Hilfe.

    Gruß
    gl
     
    + Multi-Zitat Zitieren
  23. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten