display:none macht Probleme

[Tim]

Hallo,

ich habe eine Seite in Tabs unterteilt.

Leider macht das mit dem chosen-Plugin Probleme. Das rendert nämlich Elemente anscheinend nicht mit, die nicht sichtbar sind. Daher wäre es besser, die Seite zuerst komplett laden zu lassen und erst danach einige Tabs auf display:none zu setzen.

Oder fällt hier jemandem eine andere Lösung ein?

Tim

[MudGuard]

Hi,

Leider macht das mit dem chosen-Plugin Probleme. Das rendert nämlich Elemente anscheinend nicht mit, die nicht sichtbar sind.

Woran erkennst Du den Unterschied, ob ein unsichtbares Element gerendert wurde (was darauf rausläuft, daß nichts getan wird) oder nicht gerendert wurde (also nichts getan wird)?

cu,
Andreas

[1UnitedPower]

Meine Herren!

Leider macht das mit dem chosen-Plugin Probleme. Das rendert nämlich Elemente anscheinend nicht mit, die nicht sichtbar sind.

Hier von "rendern" zu sprechen ist äußerst missverständlich. Möchtest du uns mitteilen, dass die chosen-Funktionalität bei unsichtbaren Elementen nicht angewendet wird? Das kann ich mir fast nicht vorstellen, da das Plugin für die Selektion der Elemente die gewöhnliche jQuery-Selector-Engine (also Sizzle) nutzt. Ich glaube wir kommen hier nicht um ein Online-Beispiel herum.

[Tim]

Möchtest du uns mitteilen, dass die chosen-Funktionalität bei unsichtbaren Elementen nicht angewendet wird? Das kann ich mir fast nicht vorstellen, da das Plugin für die Selektion der Elemente die gewöhnliche jQuery-Selector-Engine (also Sizzle) nutzt. Ich glaube wir kommen hier nicht um ein Online-Beispiel herum.

Hallo an alle Antworter,

ich weiß nicht genau, wem ich antworten soll, deshalb antworte ich hier stellvertretend allen 3en.

Andere haben bzw. hatten aber genau dasselbe Problem.

Tim

[1UnitedPower]

Meine Herren!

Andere haben bzw. hatten aber genau dasselbe Problem.

Und andere haben unter den selben Quellen schon Lösungen vorgeschlagen. Hast du selbige schon ausprobiert?

[Tim]

Und andere haben unter den selben Quellen schon Lösungen vorgeschlagen. Hast du selbige schon ausprobiert?

Sorry. Sehr berechtigte Frage.
Ja, ich hatte alle Lösungen ausprobiert und nicht eine einzige hatte bei mir den gewünschten Erfolg.
Ja, doch: In den Css Einstellungen die Breite absolut oder relativ (d.h. width: 220px oder 95%) einstellen, das hat geholfen. Aber da ich viele verschiedene Breiten (von 110px bis 670px) benötigen würde, hat es dann halt doch nicht wie gewünscht geholfen.

Ich würde auch hier nicht fragen, wenn mir tatsächlich etwas ansatzweise geholfen hätte. Ich habe nur vergessen, es Euch mitzuteilen.

Tim

[M.]

Mahlzeit,

Oder fällt hier jemandem eine andere Lösung ein?

Wäre sinnvoll zu wissen, wie du die tabs erzeugst. Mit denen aus jQuery-UI z.B. wird erst das HTML geladen und dann die Tabs erzeugt.

[Tim]

Wäre sinnvoll zu wissen, wie du die tabs erzeugst. Mit denen aus jQuery-UI z.B. wird erst das HTML geladen und dann die Tabs erzeugt.

Gehen wir der Einfachheit selber mal von 2 Tabs aus.

Ich stecke beide Tabs in DIVs, mache davon Tab1 sichtbar (display:block) und Tab2 unsichtbar (display:none). Default wird also Tab1 angezeigt. Zugleich erzeuge ich den Link zu den beiden Tabs. Über ein Onclick Event auf den jeweiligen Link blende ich den einen Tab aus und den anderen ein.

Da auf beiden Tabs Formulare liegen, gibt es eine Besonderheit. Ich poste im Formular mit, aus welchem Tab die Hauptseite aufgerufen wird (also das Formular abgeschickt wird). So kann ich beim Laden der Seite erkennen, ob ich den Standarttab laden oder den 2.Tab laden muß. Sprich: Wird aus Tab2 das Formular abgeschickt, landet der User danach auch wieder im 2.Tab und nicht im ersten.

Befinden sich sowohl im 1. Tab als auch im 2. Tab "chosen-select-Felder", sind diese nur dann in voller Breite sichtbar, wenn sich der entsprechende Tab im "display:block) Modus befand, als die Seite geladen wurde. Befand er sich aber im "display:none-Modus" und wurde erst über den Tab2-Link per JS sichtbar gemacht, bleibt von chosen-select-Feld nurmehr ein kleines leeres Dropdown-Feldchen übrig. Das meine ich mit "es wurde nicht gerendert".

Tim

[ChrisB]

Hi,

Befinden sich sowohl im 1. Tab als auch im 2. Tab "chosen-select-Felder", sind diese nur dann in voller Breite sichtbar, wenn sich der entsprechende Tab im "display:block) Modus befand, als die Seite geladen wurde. Befand er sich aber im "display:none-Modus" und wurde erst über den Tab2-Link per JS sichtbar gemacht, bleibt von chosen-select-Feld nurmehr ein kleines leeres Dropdown-Feldchen übrig.

Wenn dieses “chosen”-Plugin die Breite, in der es Elemente rendert, per JavaScript auf Basis des vorhandenen Inhaltes zu ermitteln versucht, dann ist es nur logisch, dass das nicht funktioniert, wenn diese Inhalte per display:none ausgeblendet sind – dann haben sie nämlich keine Breite.

Da musst du also wohl entweder die Tabs erst dann „verstecken“, wenn das Plugin fertig intialisiert ist; oder andersherum, das Plugin erst für den jeweiligen Tab initialisieren, wenn dieser zum ersten mal sichtbar gemacht wurde.

MfG ChrisB

[Tim]

Hi Chris,

Wenn dieses “chosen”-Plugin die Breite, in der es Elemente rendert, per JavaScript auf Basis des vorhandenen Inhaltes zu ermitteln versucht, dann ist es nur logisch, dass das nicht funktioniert, wenn diese Inhalte per display:none ausgeblendet sind – dann haben sie nämlich keine Breite.

Ja, genau so ist es.

Da musst du also wohl entweder die Tabs erst dann „verstecken“, wenn das Plugin fertig intialisiert ist; oder andersherum, das Plugin erst für den jeweiligen Tab initialisieren, wenn dieser zum ersten mal sichtbar gemacht wurde.

Hm. An welcher Stelle wird das Plugin initiallisiert?

Tim

[M.]

Mahlzeit,

Hm. An welcher Stelle wird das Plugin initiallisiert?

Dort, wo du es willst. Da du immer noch keinen Quelltext zeigst, gehe ich davon aus, du willst keine genauere Antwort ;)

Grundsätzlich werden jQuery-Plugins entweder aktiviert sobald sie eingebunden sind oder wenn sie explizit aufgerufen werden. Im Fall deinem Fall nach einem Aufruf. Wo du den hast, kann, ausser dir, nur ein Hellseher wissen ;)

[Tim]

Grundsätzlich werden jQuery-Plugins entweder aktiviert sobald sie eingebunden sind oder wenn sie explizit aufgerufen werden. Im Fall deinem Fall nach einem Aufruf. Wo du den hast, kann, ausser dir, nur ein Hellseher wissen ;)

Hm. Habe nun versucht, das Plugin per Klick auf den "Tab-Link" nochmal zu initialisieren, aber das gelingt nicht.

  
$(\"#tab3\").click(function() {  
	$(\".chosen\").chosen({  
    no_results_text: \"leider nichts gefunden!\",  
    allow_single_deselect: true,  
    search_contains: true,  
    disable_search_threshold: 10,  
    placeholder_text_single: 'Bitte wählen...'  
  });  
...  
});  

Tim

[ChrisB]

Hi,

Hm. Habe nun versucht, das Plugin per Klick auf den "Tab-Link" nochmal zu initialisieren, aber das gelingt nicht.

Vermutlich „merkt“ es sich die Elemente, für die es sich bereits initialisiert hat – das ist eine übliche Vorgehensweise, um unnötige Arbeit bzw. unerwünschte Nebeneffekte bei „doppelter Anwendung“ zu vermeiden.

$("#tab3").click(function() {
$(".chosen").chosen({

  
Obwohl du es hier bei Klick auf den Tab aufrufst, selektiert $(".chosen") wohl alle in Frage kommenden Elemente im Dokument. Nutze also einen spezifischeren Selektor, der nur die Elemente innerhalb dieses Tabs anspricht. (Und bei der ursprünglichen Initialisierung für den bereits von vornherein sichtbaren Tab ebenso.)  
  
MfG ChrisB  
  

-- 
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/

[Tim]

Hi Chris,

Vermutlich „merkt“ es sich die Elemente, für die es sich bereits initialisiert hat – Nutze also einen spezifischeren Selektor, der nur die Elemente innerhalb dieses Tabs anspricht. (Und bei der ursprünglichen Initialisierung für den bereits von vornherein sichtbaren Tab ebenso.)

Ich habe es nun in eine eigene Klasse gepackt und diese dann über den Klick auf Tab3 selektiert.

  
$(\"#tab3\").click(function() {  
	$(\".chosen_tab3\").chosen({  
    no_results_text: \"Leider nichts gefunden!\",  
    allow_single_deselect: true,  
    search_contains: true,  
    disable_search_threshold: 10,  
    placeholder_text_single: 'Bitte wählen...'  
  });  
  

Hat so zumindest schonmal nicht geholfen. :(

Den Aufruf in Tab1 hatte ich unverändert gelassen. Entspricht aber im Prinzip Deinem Tip, oder?

Tim

[ChrisB]

Hi,

Entspricht aber im Prinzip Deinem Tip, oder?

Ja. Aber weiter im Nebel herum zu stochern bringt wohl eher wenig – es wird Zeit für ein (reduziertes) Online-Beispiel … z.B. auf http://jsfiddle.net/ o.ä.

MfG ChrisB

[Tim]

Hi Chris,

Ja. Aber weiter im Nebel herum zu stochern bringt wohl eher wenig – es wird Zeit für ein (reduziertes) Online-Beispiel … z.B. auf http://jsfiddle.net/ o.ä.

Ich habs mal versucht:

JSFiddle

Tim

[ChrisB]

Hi,

bitte zitiere sinnvoll, und nicht immer alles.

Ich habs mal versucht:

JSFiddle

http://jsfiddle.net/pg2aLoj8/1/ − versteckten Inhalt sichtbar machen, anschließend chosen initialisieren … voila.

MfG ChrisB

[Tim]

Hi Chris,

http://jsfiddle.net/pg2aLoj8/1/ − versteckten Inhalt sichtbar machen, anschließend chosen initialisieren … voila.

Alle Achtung, das war schnell. 4 Minuten.

Leider wars dann doch nicht ganz mein Beispiel, deshalb habe ich den Code nochmal neu angelegt.

Schaust Du da auch noch mal rein?

Tim

[ChrisB]

Hi,

Leider wars dann doch nicht ganz mein Beispiel,

Ach nee …

deshalb habe ich den Code nochmal neu angelegt.

Auch da sehe ich nichts davon, dass du versucht hättest, das was ich vorgeschlagen hatte umzusetzen – warum nicht?

Wenn du hier schon Ansätze geliefert bekommst - dann zeig bitte wenigstens, was du daraufhin versucht hast!

Schaust Du da auch noch mal rein?

http://jsfiddle.net/5u9h0x3c/2/

MfG ChrisB

[Tim]

Hi Chris,

Auch da sehe ich nichts davon, dass du versucht hättest, das was ich vorgeschlagen hatte umzusetzen – warum nicht?

Stimmt. Hätte ich machen sollen, grad auch, weil ich nebenher noch weitere Ansätze versucht habe.

Wenn du hier schon Ansätze geliefert bekommst - dann zeig bitte wenigstens, was du daraufhin versucht hast!

Einverstanden.

http://jsfiddle.net/5u9h0x3c/2/

Klasse Lösung, sogar mit Zusatzfunktion.

Ich habe die umgesetzt, aber leider hakt es immer noch. Ich habe inzwischen herausgefunden, warum es noch hakt, habe aber noch kein Mittel dagegen gefunden.

Ich verwende "chosen" in einigen Scripten, die alle einen gemeinsamen Header haben, der includet wird. In diesem Header initialisiere ich chosen. Das ist für alle Verwendungen von chosen auch ganz klasse, macht mir aber in besagtem Tab1/Tab2 Beispiel die übrig gebliebenen Probleme.

Wenn ich die Initialisierung im Header weg nehme, funktioniert das Tab1/Tab2 Beispiel sehr gut. Dafür natürlich alle anderen chosen-Verwendungen nicht mehr.

Lösungsmöglichkeiten sind, entweder um alle Verwendungen ein eigenes DIV legen (viel Arbeit) oder einen "alles außer - Selektor" (:not ?) zu finden, der chosen für alles initialisiert außer für Tab1 und Tab2. Gefällt mir beides nicht sonderlich.

Oder gibts noch einen besseren Weg, der mir grad nicht einfällt?

Tim

[ChrisB]

Hi,

Oder gibts noch einen besseren Weg, der mir grad nicht einfällt?

Die nicht-aktiven Tabs erst dann verstecken, wenn chosen sich initialisiert hat …?

MfG ChrisB

[Tim]

Hi Chris,

Die nicht-aktiven Tabs erst dann verstecken, wenn chosen sich initialisiert hat …?

Nenee, das nicht.

Ich habs mit dem :not-Operator versucht.

Aber ich glaube, ich habe ihn falsch angewendet:

  
$(function(){  
    $(".chosen:not(#tab3 .chosen)", ".chosen:not(#tab1 .chosen)")({  
    no_results_text: "Oops, nichts gefunden!",  
    allow_single_deselect: true,  
    search_contains: true,  
    disable_search_threshold: 10,  
    placeholder_text_single: 'Bitte wählen...'  
  });  
</script>  

Ich wollte alle Elemente der chosen-Klasse selektieren, die nicht innerhalb eines Elementes mit der id "tab1" oder "tab3" sind selektieren.

Was habe ich hier falsch gemacht?

Tim

[ChrisB]

Hi,

Was habe ich hier falsch gemacht?

Im gezeigten Code konkret – das hast du chosen dann nicht mal mehr aufgerufen …

MfG ChrisB

[Tim]

Im gezeigten Code konkret – das hast du chosen dann nicht mal mehr aufgerufen …

Stimmt.

Mal eine andere Frage. Du hast das initialisieren in .data(...) gespeichert und nur dann neu initialisiert, wenn das noch nicht bereits geschehen war. Hatte das Performancegründe oder hast Du Komplikationen vermutet, falls mehr als 1 x initialisiert werden würde?

Tim

[ChrisB]

Hi,

Mal eine andere Frage. Du hast das initialisieren in .data(...) gespeichert und nur dann neu initialisiert, wenn das noch nicht bereits geschehen war. Hatte das Performancegründe oder hast Du Komplikationen vermutet, falls mehr als 1 x initialisiert werden würde?

Sowohl als auch. Wie schon gesagt, normalerweise kümmern sich solche Plugins selber um sowas – da ich mir chosen aber nicht genauer angeschaut habe, habe ich das einfach mal selbst reingebaut. Zumal hier ja der Fall vorliegt, dass der Auslöser – Wechsel hin zum zweiten Tab – vermutlich öfter als einmal passieren kann/wird. Selbst wenn das Plugin das also selbst erkennt, ist es unter Performance-Gesichtspunkten vermutlich nicht verkehrt, es gar nicht erst dazu kommen zu lassen, dass es das selber prüfen muss.

Komplikationen würde das sicherlich ergeben bei Plugins, die neue Elemente ins DOM einfügen – wenn dann ein zweiter Aufruf auf bereits „verarbeiteten“ Elementen nicht von irgendwem abgefangen würde, hättest du plötzlich den Kram doppelt, der eigentlich nur einfach vorhanden sein soll.

MfG ChrisB