#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
#2 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
#3 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
#5 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
#6 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ä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
#7 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
#8 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
#9 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
#10 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
#11 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
#12 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
#13 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
#14 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
#15 15. Oktober 2011 AW: jQuery Sortable - Werte auslesen ja, dataset(...) ist falsch. nutz .data(...) + Multi-Zitat Zitieren
#16 15. Oktober 2011 AW: jQuery Sortable - Werte auslesen kommt bei: PHP: this . data ( "gast-id" ); + Multi-Zitat Zitieren
#17 15. Oktober 2011 AW: jQuery Sortable - Werte auslesen $(sender).data(...) ein wenig eigeninitiative darf es dann schon sein + Multi-Zitat Zitieren
#18 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
#19 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
#20 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
#21 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