[Ajax] jQuery Sortable - Werte auslesen

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

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #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.
     
  4. #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...
     
  5. #4 15. September 2011
    AW: jQuery Sortable - Werte auslesen

    Niemand eine Idee?
     
  6. #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>
     
  7. #6 15. September 2011
    AW: jQuery Sortable - Werte auslesen

    Hilfe :D
    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
     
  8. #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
     
  9. #8 15. September 2011
  10. #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?
     
  11. #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^^
     
  12. #11 17. September 2011
    AW: jQuery Sortable - Werte auslesen

    welche fehler treten denn bei meiner lösung auf? zur not mit trry/catch arbeiten
     
  13. #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
     
  14. #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
     
  15. #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
     
  16. #15 15. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    ja, dataset(...) ist falsch. nutz .data(...)
     
  17. #16 15. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    kommt bei:
    PHP:
    this . data ( "gast-id" );
     
  18. #17 15. Oktober 2011
    AW: jQuery Sortable - Werte auslesen

    $(sender).data(...)

    ein wenig eigeninitiative darf es dann schon sein ;)
     
  19. #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
     
  20. #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
     
  21. #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
     });
    
    });
     
  22. #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
     

  23. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Ajax jQuery Sortable
  1. Antworten:
    6
    Aufrufe:
    1.608
  2. Antworten:
    6
    Aufrufe:
    1.021
  3. Antworten:
    0
    Aufrufe:
    912
  4. Antworten:
    1
    Aufrufe:
    540
  5. Antworten:
    4
    Aufrufe:
    865
  • Annonce

  • Annonce