# Drag und Drop Dynamisch zufügen und Position bestimmen



## Bicko (7. August 2010)

Hi,

Ich probiere mich gerade an jQuery aus und bin nun auf die Drag and Drop Function gestossen. Als Übung versuche ich nun folgendes umzusetzen...

Ich bekomme aus der DB eine Reihe von Namen (Spielern) angezeigt, wenn ich nun einen Namen anklicke, wird dieser in den Spielerbereich verschoben und gleichzeitig wird eine Drag Function zugewiesen.

Sobald die max. Anzahl der Spieler erreicht wird, erscheinen die nächsten ausgewählten Spieler im "Auswechsel Spieler" Bereich.

Das klappt auch schon so weit. Doch nun möchte ich natürlich einen Auswechsel Spieler einwechseln können. Dafür möchte ich den Spieler hinter den Namen eines anderen Spieler ziehen dann sollte eine kleine Box erscheinen, wo ich noch die Zeit eintragen kann (input field) wenn alles fertig ist, speicher ich das Formular ab und die Informationen sollen zurück in die Datenbank.

Wie setze ich das nun am ehsten um? Meine Spieler sind momentan Listen Element, sollte ich das lieber als Tabelle machen? Sprich wenn ich auf einen Spieler klicke wird eine td erstellt, dort kommt der Spieler rein, danach eine weitere td die mit draggable versehen wird? Ich muss am Ende ja auch wissen, wo der Auswechselspieler abgelegt wurde, es muss also eine Verbindung zum Spieler geben.

Hat jemand eine Idee oder einen Ansatz wie man das am Besten umsetzen kann oder ist das am Ende gar nicht möglich?

Freue mich über jedes Feedback. Gruss Bicko


----------



## Sven Mintel (8. August 2010)

Moin,

eigentlich hast du ja alles selbst beschrieben, und generell geht soetwas.

Ich würde da allerdings gleich eine *sortable* List Nutzen, das versorgt dich mit allem Handwerkzeug, was du für die Umsetzung benötigst.

Schau dir sortable doch einfach mal an, und Frage, wenn du dort bei einem Detail nicht weiterkommst 

http://docs.jquery.com/UI/Sortable


----------



## Bicko (9. August 2010)

Moin,

Vielen Dank. Macht es denn Sinn eine Tabelle aufzubauen? Ich moechte ja den Spieler und den eingewechselten Spieler nebeneinander haben, da wuerde wohl am leichtesten mit einer Tabelle gehen. Soll dann <li> komplett weg? 

Mit der sortable Function muss ich wirklich mal schauen, denn ich will ja eigentlich keine Spieler an sich sortieren, sondern am Ende nur wissen:
1. Wer hat von Anfang an gespielt
2. Wer wurde fuer wen, wann eingewechselt

Passt da wirklich sortable? Ich habe den Nutzen davon sicherlich noch nicht voll erfasst, aber ich bin wirklich verunsichert ob das ueberhaupt dafuer geht.


----------



## Bicko (10. August 2010)

Hi,
Ich habe das Ganze jetzt doch ohne Tabelle gestaltet, stattdessen verwende ich jetzt Sortable + Portlet.

Eigentlich geht das schon soweit, nur habe ich jetzt ein Problem. Ich habe also meine Spieler und meine Ersatzspieler. Nehme ich nun einen Ersatzspieler, dann wird der in der 2. Spalte oben eingefuegt. Das geht natuerlich nicht, ich muss ja selber festlegen koennen, wo der erscheinen soll. Bisher habe ich noch keine Moeglichkeit gefunden das zu umgehen.

Hier erstmal mein Code den ich verwende um nach dem Click auf einen Spieler diesen in die Liste einzufuegen. Die ersten 11 werden also in ein sort1 div eingefuegt, die naechsten in sort2 div.

```
var inputElemente1 = $('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"><div class="portlet-header ui-widget-header ui-corner-all">'+name+'</div><div class="portlet-content"></div></div>');

$("#sort1").append(inputElemente1);
$("#sort2").append(inputElemente2);

$(function() {
	$(".column").sortable({
	connectWith: '.column'
});
```

Das ist vermutlich nicht besonders schoen geloest, mit den Klassen direkt reingeschrieben, aber ich bin schon froh das es ueberhaupt soweit funktioniert.

Doch wie bekomme ich es jetzt hin, dass ich die Position auswaehlen kann und es nicht einfach bei 1 anfaengt?


----------



## Sven Mintel (10. August 2010)

Das liesse sich besser beantworten, wenn du das genutzte Portlet-Plugin spezifizierst, es wird da sicher mehrere geben.


----------



## Bicko (10. August 2010)

Ich verwende kein Plugin. Ich habe das Beispiel auf der jQuery UI Seite (Portlet) in meinen Source Code uebernommen und etwas angepasst, mehr nicht.


----------



## Sven Mintel (11. August 2010)

Ahso, dachte du hättest da was spezielles genommen, dieses "Portlet" ist ja für sich nur ein Anwendungsfall von sortable.

Das sollte gehen, wenn du die Sache von Spalten auf Reihen umstellst, also für jeden Spieler ein Div.
Mit diesen div's müsstest du die Reservistenliste connecten.

Mal sehen, das hört sich recht interessant an, vielleicht probier ich das mal aus, wie man es en Detail anstellen kann


----------



## Bicko (11. August 2010)

Oh je, ich glaube ich habe mich da wirklich festgebissen. Was ich immer noch nicht verstehe ist warum "sortable" und nicht "drag und drop". Sortable klingt fuer mich wirklich nach Reihenfolge sortieren, doch es ist es ja keine Liste die einfach sortiert werden soll. Im Prinzip ist es ja

Spieler 1
Spieler 2  (Auswechsel Spieler 2, 30.min)
Spieler 3
Spieler 4
Spieler 5 (Auswechsel Spieler 1, 10.min)

Also mein HTML sieht nun so aus:


```
<div id="spieler" class="groupWrapper column ui-sortable">

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler1</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler2</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler3</div>
    </div>
</div>


<div id="reservist" class="groupWrapper column ui-sortable">

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">R Spieler1</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">R Spieler2</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">R Spieler3</div>
    </div>
</div>
```

Es kann also auch sein, dass R Spieler 3 gar nicht eingesetzt wird, obwohl das macht es nochmal komplizierter und vielleicht sollte ich wirklich nur die in der Reservisten Liste habe, die dann auch zum Einsatz gekommen sind, aber wie gesagt, das bekomme ich auch schon nicht hin. Geht das wirklich mit sortable?


----------



## Sven Mintel (11. August 2010)

Bicko hat gesagt.:


> Sortable klingt fuer mich wirklich nach Reihenfolge sortieren



Das kann aber auch heissen, von einer Liste in eine andere sortieren


----------



## Bicko (11. August 2010)

Da koenntest Du Recht haben, nur ist es fuer mich immer noch nicht ersichtlich ob es wirklich funktionieren kann. Wenn ich mir nun oben meine beiden div container ansehe, wuerde ich sagen das ich noch einen weiteren div container brauche, bzw ich wuerde eigentlich versuchen das folgende zu erreichen:

```
<div id="spieler" class="groupWrapper column ui-sortable">

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler1</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler2</div>
        <div class="reservist">R Spieler2</div>
    </div>
```

Ist dieser Gedankengang richtig und wenn ja, muss bzw. kann ich dann ueberhaupt Sortable nehmen?


----------



## Quaese (11. August 2010)

Hi,

ich hab jetzt schon länger mitgelesen und es hat mir ebenfalls unter den Nägeln gebrannt, mich an einer Umsetzung zu versuchen.

Meine Vorgehensweise:

Ich würde für jede Position ein sortable Element erstellen und dieses mit der Ausgangsliste an Spielern verbinden.
Jedes solches Positionsfeld kann zwei Spieler aufnehmen.
Das Positionsfeld kann mittels Drag/Drop auf einem entsprechenden Element platziert werden.
Die Spieler können aufgrund der Verbindung der sortable Elemente in beide Richtungen ausgetauscht werden

Zur Demonstration habe ich hier eine kleine Anwendung erstellt.

Ciao
Quaese


----------



## Bicko (11. August 2010)

Boh, das ist ja der Hammer. Ich quaele mich rum und Du erstellst in der Zwischenzeit mal eben diese geniale Demo? Hut ab !

Ich muss mir das Ganze mal in Ruhe anschauen und hoffentlich verstehe ich auch alles was ich sehe. Vielen Dank das Du aufgezeigt hast, dass es machbar ist. Ich war wirklich am Verzweifeln.

Gruss Bicko


----------



## Bicko (14. August 2010)

Hi alle zusammen,

Nach nun einigen Tagen des ausprobierens muss ich leider feststellen, dass ich es so doch nicht hinbekomme. Die Lösung von Quaese ist zwar sehr interessant, aber vielleicht doch zu komplex für meine Zwecke. Eines der Probleme wäre sicherlich das ich die Information, wo sich ein Spieler befindet (im Sturm, Verteidigung) nicht so einfach eausbekomme. Ich habe zwar Koordinaten, aber damit rauslesen, welche Position er spielt? Ich hatte es ja so gedacht, dass ich meine Aufstellung zusammenklicke, wer hat gespielt, wer wurde eingewechselt und wann und das geht dann in die DB. 

Ich möchte also nur 11 Felder haben und dort dann Auswechselspieler jeweils neben den Namen des auszuwechselnen ziehen können. Wie gesagt, Quaese's Lösung ist genial, es übersteigt jedoch meinen Wissenstands um dieses weiter auszubauen. Ich habe also versucht das Ganze zu verstehen und umzubauen. Doch leider scheitere ich daran.

Hier mal mein Gedankengang:


Ich habe meine Liste an Spielern:


```
<ul id="spieler_liste">
	<li class="cl_head_li">TORWART</li>
	<li id="torwart_id">
  	  <ul class="sort_list">
    	    <li class="cl_tw"><div id="sp_01">Torwart 1</div></li>
    	    <li class="cl_tw"><div id="sp_02">Torwart 2</div></li>
          </ul>
        </li>
	<li class="cl_head_li">ABWEHR</li>
	<li id="abwehr_id">
  	  <ul class="sort_list">
    	     <li class="cl_aw"><div id="sp_03">Abwehr 1</div></li>
	     <li class="cl_aw"><div id="sp_04">Abwehr 2</div></li>
	     <li class="cl_aw"><div id="sp_05">Abwehr 3</div></li>
         </ul>
       </li>
</ul>
```

Ich habe mein 11 Positionsfelder, dort werden die Spieler reingezogen (am Besten wäre, es wird auf den Namen des Spieler geklickt und dieser erscheint im  ersten Positionsfeld)



```
<div id="spielfeld">
    <ul></ul> // Dies 11 mal
    <ul></ul>
</div>

$(function(){
    $('#spielfeld >ul').addClass('cl_new_pos 
     ui-draggable ui-draggable-dragging sort_list ui-sortable'); 
})
```

 Nun wird die Spielerliste draggable gemacht


```
// -- Positionsliste draggable machen?
  $('.sort_list li').draggable({
    helper: 'clone',
    revert: 'invalid',
    opacity: 0.8,
    grid: [10, 10],
    stop: function(evt, ui){
    	$(this).empty();
    }
  });
```


 Nun werden die Positionsfelder droppable gemacht, damit ein Spieler abgelegt werden kann



```
// -- Spieler kann auf Position abgelegt werden
  $('.cl_new_pos').droppable({
  	accept: '.sort_list li',
        drop: function(evt, ui){
        }
});
```

Und nun scheitert jeglicher Versuch. Die Idee das man einen 2. Spieler auf ein Feld ziehen kann, dieses sich dann vergrössert und man nach klick auf den Spieler noch eine Zeit eingeben kann finde ich eigentlich ganz gut. Doch wenn ich den gesamten Bereich der Ursprünglich $('#spielfeld').droppable({ war auf cl_new_pos ändere geht es natürlich nicht so einfach. Ich kann ganz im Gegenteil so viele Spieler wie ich will auf mein cl_new_pos legen. if($(this).find('li').length>2) wird ignoriert, ich denke sogar das der überhaupt nicht soweit kommt. 

Das ist wirklich eine harte Nuss für einen Anfänger, aber ich würde es so gerne umsetzen. Wie geht Ihr an eine solche Sache? Was muss ich dabei bedenken und wo liegen vielleicht meine Gedankenfehler? Ich versuche eine Linie reinzubekommen, an der ich mich orientieren kann. Ich hoffe nochmal ein paar Tips von Euch zu bekommen.

Vielen Dank im Voraus !! Gruss Bicko


----------



## Sven Mintel (19. August 2010)

Moin,

etwas spät, aber nicht vergessen 

Mal ein paar Gedankenansätze:

*sortable's kann man löschen und neu anlegen.
*Markup kann man ändern.

Du musst also nicht gleich beim 1x alles fertig implementieren.

Zuerst reichen ja 2 einfache Listen, eine mit allen Spielern, und eine leere.
Da kannst du von A nach B sortieren.

Hast du das 11x gemacht, kannst du eine neues sortable initiieren.

Angenommen, die Liste mit den 11 ausgewählten Spielern hätte nicht eine einfache Struktur wie jene:
	
	
	



```
<ul><li>Spieler</li></ul>
```

...sondern so:

```
<ul><li><ul><li>Spieler</li></ul></li></ul>
```
...dann hättest du schon mal einen grossen Schritt getan. Du könntest nämlich die innere <ul/> sortierbar machen. Dort wird der Einwechselspieler hereingeschoben.

Ändern kannst du diese Struktur per *wrapInner()*, das kapselt einen Knoten in eine neue übergeordnete Struktur ein.

Wie bekommst du nun raus, wer rein ist und wer raus soll?
Gebe den Spielern Klassen!

Beim 1. Sortable gebe den aufgestellten Spielern irgendeinen Klassennamen.

Beim 2. Sortable(Auswechslung)  entferne aus dem Elternknoten des einsortierten Spielers den Spieler, der den besagten Klassennamen hat, und gebe dem neu einsortierten Spieler danach wiederum den Klassennamen.

Fertig 

Wie das en Detail geht, kannst du hier mal beobachten.

http://doktormolle.de/temp/364622/

 ...ich hab die wichtigen Sachen im Skript kommentiert. Falls Fragen sind, frag


----------



## Bicko (21. August 2010)

Hi Sven,

Vielen Dank für Dein Script. Deine Lösung klappt wirklich sehr gut. Ich habe mich jetzt rangemacht das Ganze mit AJAX zu erweitern, es klappt zwar noch nicht so ganz, aber ich wollte mich mal melden und wenigstens mitteilen, dass ich mich mit Deiner Lösung auseinandersetze.

Ich muss ja mehrere Daten übertragen. 

1. Alle 11 Spieler der Anfangsformation
2. Wer kam rein und wer ging raus

Für den Punkt 1 habe ich überlegt das der AJAX Aufruf passieren sollte, sobald die 11 Spieler ausgewählt wurden. 

```
if($(this.wrapper).find('.ingame .player').length==11)
{
  var playerList = {}
  playerList.playername = $('.ingame').text();
  
$.ajax({
            url: 'ajax.php',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: playerList,
            success: function(data) {
                               alert('OK.');
                         }
         });

//nur für die Optik
   $(this.wrapper)
      .find('.ingame')
      .addClass('ready');
```

Ich Prinzip brauche ich dafür ja alle Listenelemente der Klasse ingame. So wie ich es jetzt jedoch mache, werden die Daten als String übertragen, das ist schlecht, denn in meinem PHP Script wäre es sicherlich einfacher das Ganze als Array zu empfangen.

Daran sitze ich momentan also noch und versuche rauszubekommen, wie ich eine komplette Liste in ein Array bekomme oder ist der Gedankenansatz völlig verkehrt?

Nochmal vielen Dank für Deine Hilfe !!

Gruss Bicko


----------



## Sven Mintel (22. August 2010)

Ich hab das mal in die Demo eingebaut, du findest dort folgende Sachen:

Zeile 222:

```
//MAP:Aufstellung
```

und weiter unten Zeile 263

```
//MAP:Auswechslung
```

der nachfolgende Code(bis zum alert) erzeugt jeweils ein Objekt namens "map" mit den notwendigen Daten.
Das kannst du per AJAX verschicken


----------



## Bicko (23. August 2010)

Hi Sven,

Oh man, darauf haette ich wirklich selber kommen muessen, wobei ich das sogar mal angedacht hatte... in PHP wuerde ich mir ein Array ja auch ueber eine Schleife zusammenbauen. Schoen bloed. 

Ich wuesste gar nicht, was ich ohne Deine ausgiebige Hilfe machen wuerde. Mir ist das zwar wirklich peinlich, aber ich muss zugeben, dass man so eine Menge lernen kann. 

Na ja, nun bin ich wieder dran, Dein Script zu erweitern und fuer jeden der es verfolgt, hier meine Fortsetzung die hoffentlich zu gebrauchen ist. 

1. Den Ajax Part um das Ganze in die DB zu bekommen:


```
$.ajax({
             url: 'ajax.php',
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             data: map,
             success: function(data) {
                alert('OK.');
             }
         });
```
In der ajax.php benutze ich dann eine foreach Schleife fuer das Array

2. Dann fuege ich jetzt noch einen Muelleimer ein, falls man mal den falschen Spieler ausgewaehlt hat. Dafuer habe ich mir gedacht als erstes in der "Funktion für Aufstellung" den Spieler draggable zu machen:


```
//Funktion für Aufstellung
nominate:function(player)
{
   //für Wechsel Spieler mit einer weiteren <ul> umschliessen,
   // die dann auch Auswechselspieler aufnimmmt
                player.wrapInner($('<ul><li/></ul>'))
                  .find('li')
                    .addClass('player');

// Spieler draggable machen, damit dieser in den Trash verschoben werden kann
// aber nur erstes li und nicht .player von li
$(this.wrapper)
    .find('.ingame li').not('.player')
       .draggable();
```

3. Dann folgt der Muelleimer:

```
// Mülleimer
              $('#trash_id').droppable({
              	accept: '.ingame li',
                drop: function(evt, ui){
                     // Klasse entfernen, da der Spieler ja wieder in Auswahlliste zurueck soll
                     ui.draggable.find('li').removeClass('player');
                     // Spieler zurueck in the Auswahlliste
                     ui.draggable.find('li').appendTo('.pool');

                     ui.draggable.fadeOut(250, function(){
                  	  window.setTimeout(function(){ui.draggable.remove();}, 800);
                    });
                }
              });
```

Das scheint alles soweit zu funktionieren oder sieht jemand noch einen Denkfehler?

Obwohl habe gerade selber noch etwas gefunden, wenn alle 11 Spieler ausgewaehlt wurden und dann 1 Spieler entfernt wird, wird dies ignoriert, bedeutet wenn ich einen weiteren Spieler in die Aufstellung ziehe ist dies nun ein Auswechselspieler. Ich werde weiter daran arbeiten und diesen Post updaten, sobald ich dafuer eine Loesung habe. Ich muss dann ja auch nochmal per AJAX die DB updaten, falls sich etwas nach den 11 Spielern geaendert hat.

Update folgt also, hoffe das ist okay.

Nochmal vielen Dank an Sven !


----------



## Sven Mintel (23. August 2010)

Bicko hat gesagt.:


> Obwohl habe gerade selber noch etwas gefunden, wenn alle 11 Spieler ausgewaehlt wurden und dann 1 Spieler entfernt wird, wird dies ignoriert, bedeutet wenn ich einen weiteren Spieler in die Aufstellung ziehe ist dies nun ein Auswechselspieler.


 
Das klingt zumindest vom spieltechnischen Aspekt her logisch.

Sobald 11 Spieler aufgestellt wurden, wird ja da nichts mehr rumgewurschtelt...es wird entweder ausgewechselt oder gibt eine rote Karte, und im letzteren Fall würde da ja nicht wieder auf 11 aufgefüllt. Genauso in dem Fall, dass das Limit an Auswechselungen erreicht wurde und jemand sich verletzt verabschieden muss.


----------



## Bicko (25. August 2010)

Hi,

So, ich hoffe Ihr langweilt Euch nicht mit diesem Thema, aber es gibt ein weiteres Update und eine neue Frage...

1. Ich habe einen "Fertig" Button und erst wenn man den klickt, wird die Mannschaft via AJAX in die DB geschrieben (Das Ganze auch in einer eigenen Function)

2. Ich habe den ausgewaehlten Spielern einen "Doppelclick" Event zugewiesen. Das Ganze habe ich so versucht:


```
//initialisierung
init:function()
{
    $(this.wrapper).find(".ingame .name").live('dblclick', function(event,ui){
          _this.addGoals(this);
    });
```

Dann habe ich meine addGoals Function

```
// Funktion für Tore zufuegen (Aus dem 1. Script)
addGoals:function(player)
{

    var strInsert = $(player).find('span').html();
    strInsert = (strInsert!=null)? strInsert.replace(/[ \(\)\.]/g, "") : "";
    var strGoal = prompt("Wieviele Tore geschossen?", strInsert);
    // entferne den vorherigen span tag, gilt wenn erneut doppelclick
    $(player).find('span').remove();
    if(strGoal==null || strGoal=="") return;

    $(player).append($('<span>').html(" ("+strGoal+"Tor(e))"));
},
```

Damit kann ich nun also Tore hinzufuegen. Klappt auch... fast. Der span tag wird in den span tag vom spieler geschoben also so: 
<span class="name">Gomez <span>2 Tore</span></span>
Mmh, habe alles Moegliche probiert aber komme einfach nicht drauf, wie ich es in den div tag bekomme. Ist der Ansatz ueberhaupt richtig? Bin ja noch sehr unerfahren mit jQuery.

**
Loesung gefunden:


```
$(player).parent("div").append($('<span class="goal">').html(" ("+strGoal+"Tor(e))"));
```


Nun muss ich noch rausfinden wie ich aus meiner  saveFinalTeam:function(player) auf die Information ueber die Auswechslungen zugreifen kann, das wird vermutlich nochmal schwierig.


Gruss Bicko


----------



## Quaese (26. August 2010)

@Sven

Bei der Analyse deines Scripts sind mir zwei Sachen aufgefallen:

1. Syntaxfehler beim Objekt *map* für Auswechslungen
Du schliesst die Komponente *_in* mit einem Komma ab, was der IE mit einer Fehlermeldung quittiert.

2. Globale Variable in der Methode *substitute*
Du deklarierst die Variable *playerOut* global. Wenn ich es richtig überblicke, würde eine lokale ausreichen.

Ciao
Quaese


----------



## Sven Mintel (26. August 2010)

Erwischt, habs korrigiert :-(


----------



## Sven Mintel (26. August 2010)

Bicko hat gesagt.:


> Nun muss ich noch rausfinden wie ich aus meiner  saveFinalTeam:function(player) auf die Information ueber die Auswechslungen zugreifen kann, das wird vermutlich nochmal schwierig.



Du könntest das Objekt (this) um einen Member erweitern, in dem du die Auswechselungen(map in Funktion substitute() ) speicherst, so hast du jederzeit Zugriff auf alle Auswechselungen.


----------



## Bicko (27. August 2010)

Vielen Dank fuer den Tip. Ich habe das jetzt so umgesetzt, habe jedoch Probleme das Ganze wieder rauszuziehen. Ich habe also nun folgendes Format:


```
({substitution:{
_out:{nr:"3", name:"Badstuber"}, 
_in:{nr:"6", name:"Schweini"}}})
```


```
var map={lineup:[],subs:[]};

 $.each($(this.wrapper).find('.ingame .player'), function(key, node) {
     map.lineup.push({fixtureID: $('.fixtureID').attr('id'),
     id:$(node).find('.nr').text(),name:$(node).find('.name').text(), 
     goal:$(node).find('.goal').text()});
});

// Nun schiebe die Subs rein
 $(this.sub).each(function(key,node) {
     map.subs.push({name:$(node).find('_out').text()});
 });
```

Das ist offentsichtlich voellig verkehrt, aber egal was ich bisher ausprobiert habe, komme ich einfach nicht an die Werte. Hoffentlich stelle ich mich nicht wieder viel zu bloed an. Ich bin mir noch nicht mal sicher ob das ueber find ueberhaupt geht, aber dies war nun mein letzter Versuch es doch noch hinzubekommen, aber mehr faellt mir einfach nicht mehr ein.

Habt Ihr nochmal einen Tip?

Vielen, vielen Dank !


----------



## Sven Mintel (27. August 2010)

```
var map={lineup:[],subs:[]};
```

Du erstellst map als locale Variable in irgendeiner Funktion, du bräuchtest sie aber als Member des Objektes(in den Funktionen per *this*verfügbar)
Das kannst du gleich von vornherein einbauen: (ich nenne es im folgenden mal protocol, damit deutlich ist, was was ist):

....

```
var _this={
              
              wrapper:'#'+ns,
                //erlaubte auswechselungen
              substitutions:5,
                //Aufstellungsprotokoll
              protocol:{lineup:[],subs:[]},
```
.....

Darauf kannst du jetzt per *this.protocol* zugreifen, es aulesen oder erweitern.
Einzige Ausnahme ist *$.each()*
Innerhalb von *$.each()* bezieht sich* this* auf den aktuellen Knoten(Element des Objektes, das du durchläufst). Dort verwende stattdessen  *_this.protocol* 

Dies ist so möglich, weil das ganze Objekt eingangs unter dem Namen _this als lokale Variable gespeichert wurde....

```
var _this={
```

Falls dich diese Technik näher interessiert: http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures

Ich habe das mal in meine Demo eingebaut.
Sobald du 11 Spieler aufgestellt hast, erscheint dort oben ein Button, indem du dir die in protocol gespeicherten Sachen anschauen kannst.


----------

