[Erledigt] Jquery -> Dynamische Liste erweitern

da.eXecutoR · 29.10.2010, 15:33

Hey Jungs

Ich bilde eine Ordnerstruktur anhand einer JSON abfrage ab und will diese als Listenelement darstellen. Beim klick auf einen Ordner werden dann die Unterordner nachgeladen. Funktioniert alles!

Lediglich lassen sich die <li> Elemente nicht in das neu erstellte <ul> Objekt einfügen. Ich muss den DOM Baum soviel ich weiss ja nicht manuell refreshen um auf die neuen Nodes zuzugreiffen oder?

PHP-Code:

  $(document).ready(function(){

    $("#folderTree > li").live('click',function(){

        var id = $(this).attr("id");

        if($('#' + id).hasClass('folderClosed')){

            $.ajax({

                url: "libs/php/ajax/documents/treeHandler.php",

                type: "POST",

                cache: false,

                dataType: "json",

                data: "treeNode=" + id,

                success: function(data){

                    $('#' + id).removeClass('folderClosed');

                    $('#' + id).addClass('folderOpen');

                    $('#' + id).after('<ul id="#' + id + '-list">');

                    $.each(data, function(){

                        var folder = '<li id=' + this.ID + ' class="folderClosed">' + this.folderName + '</li>';

                        $("#" + id + "-list").appendTo(folder);

                    })

                    $('#' + id).after('</ul>');

                }

            })

        }else{

            $('#' + id).next("ul").remove();

            $('#' + id).removeClass('folderOpen');

            $('#' + id).addClass('folderClosed');

        }

    })

})

Vielen Dank für die Inputs!

eXe

TZP · 29.10.2010, 15:54

Was machst du denn mit der var folder am Ende? Ich bin mir nich ganz sicher aber auf den ersten Blick sieht es so aus, als machst du in deiner $.each jedes Mal eine neue var folder, füllst diese, hängst dann noch das

$("#" + id + "-list")

dran und lässt sie dann liegen.

Paul.Schramenko · 29.10.2010, 16:47

Also ich entdecke auf die schnelle keinen Fehler. Aber eine Frage, warum baust du dir nicht zuerst den neuen Baum zusammen und fügst den dann als gesamtes hinzu, anstatt erst die <ul> und dann die einzelnen <li>'s

sowas in der Art:

PHP-Code:

  /* ... other code ... */
success: function(data){
    $('#' + id).removeClass('folderClosed');
    $('#' + id).addClass('folderOpen');
                    
    var newFolderTree = '<ul id="#' + id + '-list">';
    $.each(data, function(){
        newFolderTree = newFolderTree + '<li id=' + this.ID + ' class="folderClosed">' + this.folderName + '</li>';
    })
    newFolderTree = newFolderTree + '</ul>';
    $(newFolderTree).appendTo('#' + id);
}
/* ... other code ... */

da.eXecutoR · 29.10.2010, 18:03

Zitat:

Zitat von TZP

dran und lässt sie dann liegen.

Das ist meines wissens so nicht richtig, ich verarbeite es hiermit:

PHP-Code:

  $("#" + id + "-list").appendTo(folder);

@Paul: Ich füge diese einzeln hinzu weil ich dazu gern einen Effekt haben möchte der dann eines nacheinander schnell einblendet, darum

Hmm... komische Sache. Vielleicht noch eine andere Idee?

da.eXecutoR · 29.10.2010, 18:07

Ah ein Fehler ist mal sicher folgendes:

PHP-Code:

  $("#" + id + "-list").appendTo(folder);

müsste so heissen:

PHP-Code:

  $("#" + id + "-list").append(folder);

Funktioniert aber trotzdem nicht

da.eXecutoR · 29.10.2010, 19:21

Ist ja dämlich, da war ein # zu viel.

So funktioniert der Code falls es jemand interessiert:

PHP-Code:

  $(document).ready(function(){ 

    $("#folderTree > li").live('click',function(){ 

        var id = $(this).attr("id"); 

        if($('#' + id).hasClass('folderClosed')){ 

            $.ajax({ 

                url: "libs/php/ajax/documents/treeHandler.php", 

                type: "POST", 

                cache: false, 

                dataType: "json", 

                data: "treeNode=" + id, 

                success: function(data){ 

                    $('#' + id).removeClass('folderClosed'); 

                    $('#' + id).addClass('folderOpen'); 

                    $('#' + id).after('<ul id="' + id + '-list">'); 

                    $.each(data, function(){ 

                        var folder = '<li id=' + this.ID + ' class="folderClosed">' + this.folderName + '</li>'; 

                        $("#" + id + "-list").append(folder); 

                    }) 

                    $('#' + id).after('</ul>'); 

                } 

            }) 

        }else{ 

            $('#' + id).next("ul").remove(); 

            $('#' + id).removeClass('folderOpen'); 

            $('#' + id).addClass('folderClosed'); 

        } 

    }) 

})

Für Optimierung bin ich immer zu haben

Danke für eure Zeit, hoffe ich kann mich mal revanchieren.

Gruss

eXe

TZP · 29.10.2010, 22:43

Ah, jetzt kapier ich das. Ich hab die ganze Zeit gesucht, wo folder irgendwo angebracht wird aber mit dem ajax-post gibst du das ganze Gedöns weiter. Wieder was gelernt.

appendTo hätte auch funktioniert, da ist "nur" die Syntax anders. Trotzdem lustig, was es alles so gibt.

nikosch · 29.10.2010, 23:06

Zitat:

Für Optimierung bin ich immer zu haben

Du forderst ständig den DOM-Selector-Zugriff auf id erneut auf, statt das Objekt einfach in einer Variable zu speichern. Erst recht ist das in Fällen wie:

Code:

            $('#' + id).next("ul").remove(); 
            $('#' + id).removeClass('folderOpen'); 
            $('#' + id).addClass('folderClosed');

unnötig, weil Du dort ganz einfach

Code:

            $('#' + id).next("ul").remove()
                       .removeClass('folderOpen') 
                       .addClass('folderClosed');

notieren kannst.

Das

Code:

        var id = $(this).attr("id"); 
        if($('#' + id).hasClass('folderClosed')){

finde ich auch merkwürdig. Du fordest über this die ID an, nur um über die ID das Element - also this - anzusprechen..

rudygotya · 30.10.2010, 00:38

Zitat:

unnötig, weil Du dort ganz einfach
Code:

PHP-Code:

              $('#' + id).next("ul").remove()
                       .removeClass('folderOpen') 
                       .addClass('folderClosed');

notieren kannst.

Das traversing dann aber am Ende

PHP-Code:

  $('#' + id).removeClass('folderOpen') 
           .addClass('folderClosed')
           .next("ul").remove();

Zitat:

PHP-Code:

  $("#folderTree > li").live('click',function(

wäre besser:

PHP-Code:

  $("#folderTree").delegate('li', 'click.namespace' ,function(

Die success-function kannste auch chainen.

da.eXecutoR · 30.10.2010, 12:47

Zitat:

Zitat von nikosch

Das

Code:

        var id = $(this).attr("id"); 
        if($('#' + id).hasClass('folderClosed')){

finde ich auch merkwürdig. Du fordest über this die ID an, nur um über die ID das Element - also this - anzusprechen..

Das mach ich weil ich dieses Element später im Code auch wieder ansprechen will ( weiterunten mit id ), und spätestens in der $.each schlaufe bekommt this einen anderen Wert.

@rudygotya: Danke für den hinweis mit delegate(), kannte ich noch nicht obwohl ich das jquery cheatsheet immer vor mir liegen habe

Einziges Problem das ich noch habe ist dass das Script im IE8 nicht ganz korrekt funktioniert. Die Unterverzeichnisse bleiben stehen, er kann das <ul> remove irgendwie nicht verarbeiten.

Muss ich mal heute Abend reinschauen.

Danke für eure Tipps und Inpust, ist Goldwert! Ich werde das ganze wenns fertig ist nochmal reinstellen damit auch andere davon noch profitieren können.

Vielen Dank und schöns Weekend!

eXe

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
JQuery Upload mittels Array/hiddenfields	Das_Pfau	JavaScript, Ajax und mehr	7	13.03.2010 11:03
[Erledigt] Liste im Array(?) vervollständigen	coram	PHP Tipps 2010	10	04.02.2010 17:30
[Erledigt] dynamische Liste Abfragen verknüpfen und ausgeben.	abi	PHP Tipps 2009	3	13.05.2009 11:46
[S] Hilfe zu JS Textbox Liste	b@n@ne	JavaScript, Ajax und mehr	0	01.05.2009 17:39
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
jQuery: Parameter an onclick Event	ecomeback	HTML, Usability und Barrierefreiheit	1	08.04.2008 11:23
Javascript Select liste verdoppeln	dsmcg	HTML, Usability und Barrierefreiheit	8	19.10.2006 16:56
Php liste per E-Mail?		PHP Tipps 2005-2	2	21.07.2005 09:43
Dropdown-Menü nach klick in Liste füllen		PHP Tipps 2005-2	0	13.06.2005 09:33
[Erledigt] Top 10 Liste		Datenbanken	9	20.04.2005 22:32
dynamische liste		PHP Tipps 2005	6	15.03.2005 20:44
[Erledigt] Liste in Textarea einfügen		HTML, Usability und Barrierefreiheit	0	03.01.2005 19:16

29.10.2010, 15:33
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Jquery -> Dynamische Liste erweitern Hey Jungs Ich bilde eine Ordnerstruktur anhand einer JSON abfrage ab und will diese als Listenelement darstellen. Beim klick auf einen Ordner werden dann die Unterordner nachgeladen. Funktioniert alles! Lediglich lassen sich die <li> Elemente nicht in das neu erstellte <ul> Objekt einfügen. Ich muss den DOM Baum soviel ich weiss ja nicht manuell refreshen um auf die neuen Nodes zuzugreiffen oder? PHP-Code: $(document).ready(function(){ $("#folderTree > li").live('click',function(){ var id = $(this).attr("id"); if($('#' + id).hasClass('folderClosed')){ $.ajax({ url: "libs/php/ajax/documents/treeHandler.php", type: "POST", cache: false, dataType: "json", data: "treeNode=" + id, success: function(data){ $('#' + id).removeClass('folderClosed'); $('#' + id).addClass('folderOpen'); $('#' + id).after('<ul id="#' + id + '-list">'); $.each(data, function(){ var folder = '<li id=' + this.ID + ' class="folderClosed">' + this.folderName + '</li>'; $("#" + id + "-list").appendTo(folder); }) $('#' + id).after('</ul>'); } }) }else{ $('#' + id).next("ul").remove(); $('#' + id).removeClass('folderOpen'); $('#' + id).addClass('folderClosed'); } }) }) Vielen Dank für die Inputs! eXe __________________ It's not a bug. It's a feature!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.10.2010, 15:54
TZP Erfahrener Benutzer Registriert seit: 17.08.2010 Beiträge: 152 PHP-Kenntnisse: Anfänger	Was machst du denn mit der var folder am Ende? Ich bin mir nich ganz sicher aber auf den ersten Blick sieht es so aus, als machst du in deiner $.each jedes Mal eine neue var folder, füllst diese, hängst dann noch das $("#" + id + "-list") dran und lässt sie dann liegen.

29.10.2010, 16:47
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	Also ich entdecke auf die schnelle keinen Fehler. Aber eine Frage, warum baust du dir nicht zuerst den neuen Baum zusammen und fügst den dann als gesamtes hinzu, anstatt erst die <ul> und dann die einzelnen <li>'s sowas in der Art: PHP-Code: /* ... other code ... / success: function(data){ $('#' + id).removeClass('folderClosed'); $('#' + id).addClass('folderOpen'); var newFolderTree = '<ul id="#' + id + '-list">'; $.each(data, function(){ newFolderTree = newFolderTree + '<li id=' + this.ID + ' class="folderClosed">' + this.folderName + '</li>'; }) newFolderTree = newFolderTree + '</ul>'; $(newFolderTree).appendTo('#' + id); } / ... other code ... / __________________ "My software never has bugs, it just develops random features."* "Real programmers don't comment. If it was hard to write, it should be hard to understand!" Positive Bewertungen sind nicht unwillkommen...

29.10.2010, 18:07
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Ah ein Fehler ist mal sicher folgendes: PHP-Code: `$("#" + id + "-list").appendTo(folder);` müsste so heissen: PHP-Code: `$("#" + id + "-list").append(folder);` Funktioniert aber trotzdem nicht __________________ It's not a bug. It's a feature!

29.10.2010, 19:21
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Ist ja dämlich, da war ein # zu viel. So funktioniert der Code falls es jemand interessiert: PHP-Code: $(document).ready(function(){ $("#folderTree > li").live('click',function(){ var id = $(this).attr("id"); if($('#' + id).hasClass('folderClosed')){ $.ajax({ url: "libs/php/ajax/documents/treeHandler.php", type: "POST", cache: false, dataType: "json", data: "treeNode=" + id, success: function(data){ $('#' + id).removeClass('folderClosed'); $('#' + id).addClass('folderOpen'); $('#' + id).after('<ul id="' + id + '-list">'); $.each(data, function(){ var folder = '<li id=' + this.ID + ' class="folderClosed">' + this.folderName + '</li>'; $("#" + id + "-list").append(folder); }) $('#' + id).after('</ul>'); } }) }else{ $('#' + id).next("ul").remove(); $('#' + id).removeClass('folderOpen'); $('#' + id).addClass('folderClosed'); } }) }) Für Optimierung bin ich immer zu haben Danke für eure Zeit, hoffe ich kann mich mal revanchieren. Gruss eXe __________________ It's not a bug. It's a feature!

29.10.2010, 22:43
TZP Erfahrener Benutzer Registriert seit: 17.08.2010 Beiträge: 152 PHP-Kenntnisse: Anfänger	Ah, jetzt kapier ich das. Ich hab die ganze Zeit gesucht, wo folder irgendwo angebracht wird aber mit dem ajax-post gibst du das ganze Gedöns weiter. Wieder was gelernt. appendTo hätte auch funktioniert, da ist "nur" die Syntax anders. Trotzdem lustig, was es alles so gibt.