[Erledigt] Nutzen von document.ready() bei jquery

Igäl · 30.06.2011, 00:26

Salut Leute

Nach langer PHP-Abstinenz bin ich wieder in der Welt der Codes und Snipets angelangt. Dabei habe ich jquery für mich entdeckt und mich jetzt schon ein paar Stunden damit befasst. Nun habe ich eine grundlegende Frage an die Cracks unter euch:

Code:

$(document).ready(function() {[...]});

So wie ich das über jquery Dokumentierte glesen und verstanden habe, wird alles was im obigen Codeschnipsel anstelle von [...] geschrieben steht im Browser erst interpretiert, NACHDEM das DOM-Gerüst feststeht, jedoch BEVOR irgendwelche Angaben über Styling übermittelt worden sind. Soweit richtig?

Das heisst, ich muss nur die Funktionen innerhalb dieses Codeschnippsels schreiben, welche von ANFANG AN auf das Styling meiner Website zugreifen. Für alles andere kann ich ohne schlechtes Gewissen normale Java-Script-Funktionen schreiben, welche dann ihrerseits NACH dem Laden der Seite auf die Stylingelemente zugreifen.

Habe ich das soweit richtig verstanden? Benutzt ihr auch noch "normale" Funktionen? Weil der oben Genannten kann man ja keine Parameter mitgeben, was reichlich unpraktisch ist. Oder habe ich eine Möglichkeit übersehen?

Danke und Gruss

Igäl

rudygotya · 30.06.2011, 01:19

Zitat:

So wie ich das über jquery Dokumentierte glesen und verstanden habe, wird alles was im obigen Codeschnipsel anstelle von [...] geschrieben steht im Browser erst interpretiert, NACHDEM das DOM-Gerüst feststeht, jedoch BEVOR irgendwelche Angaben über Styling übermittelt worden sind. Soweit richtig?

Nein, nicht unbedingt. Im IE feuert der Event (zumindest bis zur Version 8, IE9 weiss ich nicht) erst, wenn auch alle Bilder geladen sind.
Merk dir einfach, dass das dein frühestmöglicher Zeit-/Startpunkt ist, um auf Elemente im globalen Dokument zugreifen zu können.

fab · 30.06.2011, 07:14

Zitat:

Zitat von Igäl

Habe ich das soweit richtig verstanden? Benutzt ihr auch noch "normale" Funktionen? Weil der oben Genannten kann man ja keine Parameter mitgeben, was reichlich unpraktisch ist. Oder habe ich eine Möglichkeit übersehen?

Woher sollte denn an dieser Stelle ein selbstdefinierter Parameter kommen? Und was hat das ausführen von Initialisierungs-Code mit dem generellen Nutzen von Funktionen zu tun? Vielleicht erklärst du mal, wobei genau du dich eingeschränkt fühlst...

tr0y · 30.06.2011, 07:28

Das ist ein Closure, eine Anonyme Funktion. Du kannst dort auch normale funktionen mitgeben, die meisten Closures die du an JQuery-Objekte übergibst werden mit paramentern aufgerufen. Das DocumentReady-Event ruft das Closure z.b. mit dem argument event auf ( als ersten Parameter ) das wiederum ein Objekt mit Event-Daten ist.

Code:

$(document).ready(function(event) {
   alert(event.type);
});

Wenn du dich mit den jQuery-Event(hooks) beschäftigst wirst du merken das dort immerwieder argumente mit übergeben werden. Das da in aller regel aber keine "normale Funktion" übergeben wird, liegt daran das die notierung der gewünschten Funktionen per Closure einfach kürzer ist, statt sie vorher durch 3 Milliarden Zeilen Code alle zu definieren.

wenn du Events selbst triggerst ( .trigger() ), kannst du sogar noch eigene Argumente übergeben, in dem Fall allerdings hast DU das event ausgelöst, nicht der browser.

Igäl · 30.06.2011, 10:39

Zitat:

Zitat von fab

Woher sollte denn an dieser Stelle ein selbstdefinierter Parameter kommen? Und was hat das ausführen von Initialisierungs-Code mit dem generellen Nutzen von Funktionen zu tun? Vielleicht erklärst du mal, wobei genau du dich eingeschränkt fühlst...

Konkretes Beispiel:

Code:

    function show_popup(popup_id, width, height, top, bg_trigger)    {
        if(popup_status == 0)    {
            if(bg_trigger != 0)    {
                $("#popup_bg").css({
                    "opacity" : "0.7"
                });
            $("#popup_bg").fadeIn('slow');
            }
            
            $("#" + popup_id).fadeIn('slow');

            popup_status = 1;

            set_popup_position(popup_id, width, height, top, bg_trigger);
        }
    }

aufgerufen durch

Code:

onClick="show_popup('login_popup', 350, 150, 200, 1);"

Diese Funktion kann ich, so wie ich das verstanden habe, nicht innerhalb von ready() platzieren. Die Frage ist: Muss ich das denn überhaupt? Eigendlich ist ja bereits alles fertig geladen, wenn der User die Gelegenheit bekommt, die verlinkte Grafik anzuklicken. Dennoch gibt es während des Ladens Phasen, in welchen ich kein Popup zu sehen bekomme, wenn ich sie aufrufen will (wohlgemerkt: während des Ladens der Seite). Wenn ich verhindern will, dass ein Popup aufgerufen werden kann, bevor die Seite geladen ist, müsste ich das Popup ja per Code innerhalb von ready() aufrufen. Dann kann ich aber Parameter wie Höhe und Breite nicht mitgeben. Verstehst du was ich mit der "Einschränkung" meine?

Jedoch werde ich mit ziemlicher Sicherheit etwas übersehen haben. Darum habe ich diese Frage auch gestellt. Ich werde mal mit tr0y's Tipps etwas experimentieren.

Ist es überhaupt nötig, solche, wie oben skizzierte, Funktionen in der ready() Funktion zu definieren? Oder kann ich eigentlich auch ohne $(document).ready() eine gut funktionierende Anwendung mit jQuery machen?

Danke für die Feedbacks, übrigends

Gruss Igäl

rudygotya · 30.06.2011, 10:44

Onclick-Attribute machen eine Applikation schwer bwartbar. Bitte mach dich mit Event Handlern vertraut.

fab · 30.06.2011, 11:02

Es ist kein sauberer Stil, die Funktion einfach mit "function show_popup" global zu definieren aber du kannst es ruhig erstmal so machen, die Definition der Funktion platzierst du dann weiterhin außerhalb des document.ready Handlers (der ready() Funktion wie du es nennst).

Den Klick-Event Handler fügst du dagegen erst innerhalb des document.ready Handlers dynamisch hinzu. Mit jQuery:

Code:

function show_popup(popup_id, width, height, top, bg_trigger) {
    // ...
}

document.ready(function() {
    // ...
    $("#loginbutton").click(function () { 
        show_popup('login_popup', 350, 150, 200, 1);
    });
    // ...
});

Und anstelle von onclick:

Code:

<button id="loginbutton">Login</button>

Der nächste Schritt wäre dann vielleicht, show_popup in einem Namespace und/oder einer Klasse zur Verfügung zu stellen. Beides sind Konzepte die JavaScript nicht nativ unterstützt aber leicht simuliert werden können, bei Interesse solltest du dazu einiges im Netz finden.

Igäl · 30.06.2011, 11:14

@rudygota: Kannst du mir das etwas näher erläutern? Onclick-Event Handler sind doch fester Standard in HTML 4.0 respektive XHTML 1.0. Solange ich sie als Attribut in dafür vorgesehenen Tags verwende. Oder was erschliesst sich mir hier nicht?

@fab: Genau hier geht aber mein Problem wieder weiter. Ich kann nicht mehr dynamisch x-beliebig viele Popups erzeugen, weil ich sie nicht referenzieren kann. Mit der globalen Funktion kann ich den Namen des Popups (respektive des div-Elements das angezeigt werden soll) als Parameter mitgeben. Wenn ich mehrere Popups auf einer Seite habe, würde ich das diverse Male wiederholen:

Code:

document.ready(function() {
    // ...
    $("#loginbutton").click(function () {
    show_popup('login_popup', 350, 150, 200, 1);

    $("#beispielbutton").click(function () {
    show_popup('login_popup', 350, 150, 200, 1);

    $("#examplebutton").click(function () {
    show_popup('login_popup', 350, 150, 200, 1);
});

Das wäre an sich ja kein Problem, wenn ich dann nicht ALLE Buttons der ganzen Webapplikation dort einbinden müsste. Gibt es also keine Möglichkeit, auf $("#beispielbutton") dynamisch einzuwirken?

fab · 30.06.2011, 11:17

Genau diese Wiederholungen hast du aktuell in deinen onclick-Attributen und beschwerst dich auch nicht draüber. Prinzipiell lassen sich natürlich Wiederholungen eliminieren, das hängt im konkreten Fall aber davon ab, wie sich die Buttons unterscheiden. Definiere doch mal was du mit "dynamisch einwirken" meinst.

Igäl · 30.06.2011, 11:34

Sagen wir mal, wir haben eine statische Liste mit Einträgen und nun für jeden Eintrag einen Button.
Per Klick auf den Button würde ein Popup geöffnet, welches mir Details zu den entsprechenden Einträgen anzeigt.
Je nach Eintrag verändert sich die Liste der angezeigten Parameter (mal mehr mal weniger Content).
Die Buttons würden sich in den Attributen "id" (z.B. id="eintrag_1" || id="eintrag_2" || id="popup_login" || id="etwasganzanderes") und "onClick" [welches ich später gemäss euren Empfehlungen noch zu eliminieren versuche] unterscheiden. Im onClick unterscheiden sie sich, weil jedes Popup verschieden gross ist und ich die Abmessung im Funktionsaufruf als Parameter mitgeben möchte.

Der Grund, warum ich euch damit nun so auf den Wecker gehe ist derjenige, dass ich schlechten Stil möglichst eliminieren will. Deshalb muss ich jetzt herausfinden, wie guter Stil aussehen soll. Sonst mag ich meinen eigenen Code nicht mehr

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
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
Einfaches JQuery resize und scoll läuft nicht	smilla	JavaScript, Ajax und mehr	5	08.02.2011 20:44
Zwei verschiedene jQuery Aktionen	Electrofreak	JavaScript, Ajax und mehr	3	14.01.2011 14:40
jQuery, einem DOM-Knoten eine Payload anhängen	Chriz	JavaScript, Ajax und mehr	6	22.12.2010 15:31
jQuery ":not" selektor	Paul.Schramenko	JavaScript, Ajax und mehr	13	03.12.2010 17:11
jQuery - Text an Cursorposition einfügen	Koala	JavaScript, Ajax und mehr	5	11.11.2010 21:28
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35

30.06.2011, 00:26
Igäl Erfahrener Benutzer Registriert seit: 16.08.2007 Beiträge: 702 PHP-Kenntnisse: Anfänger	[Erledigt] Nutzen von document.ready() bei jquery Salut Leute Nach langer PHP-Abstinenz bin ich wieder in der Welt der Codes und Snipets angelangt. Dabei habe ich jquery für mich entdeckt und mich jetzt schon ein paar Stunden damit befasst. Nun habe ich eine grundlegende Frage an die Cracks unter euch: Code: $(document).ready(function() {[...]}); So wie ich das über jquery Dokumentierte glesen und verstanden habe, wird alles was im obigen Codeschnipsel anstelle von [...] geschrieben steht im Browser erst interpretiert, NACHDEM das DOM-Gerüst feststeht, jedoch BEVOR irgendwelche Angaben über Styling übermittelt worden sind. Soweit richtig? Das heisst, ich muss nur die Funktionen innerhalb dieses Codeschnippsels schreiben, welche von ANFANG AN auf das Styling meiner Website zugreifen. Für alles andere kann ich ohne schlechtes Gewissen normale Java-Script-Funktionen schreiben, welche dann ihrerseits NACH dem Laden der Seite auf die Stylingelemente zugreifen. Habe ich das soweit richtig verstanden? Benutzt ihr auch noch "normale" Funktionen? Weil der oben Genannten kann man ja keine Parameter mitgeben, was reichlich unpraktisch ist. Oder habe ich eine Möglichkeit übersehen? Danke und Gruss Igäl __________________ Das Recht auf Dummheit gehört zur Garantie der freien Entfaltung der Persönlichkeit. Mark Twain Geändert von Igäl (30.06.2011 um 00:32 Uhr).


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

30.06.2011, 07:28
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Das ist ein Closure, eine Anonyme Funktion. Du kannst dort auch normale funktionen mitgeben, die meisten Closures die du an JQuery-Objekte übergibst werden mit paramentern aufgerufen. Das DocumentReady-Event ruft das Closure z.b. mit dem argument event auf ( als ersten Parameter ) das wiederum ein Objekt mit Event-Daten ist. Code: $(document).ready(function(event) { alert(event.type); }); Wenn du dich mit den jQuery-Event(hooks) beschäftigst wirst du merken das dort immerwieder argumente mit übergeben werden. Das da in aller regel aber keine "normale Funktion" übergeben wird, liegt daran das die notierung der gewünschten Funktionen per Closure einfach kürzer ist, statt sie vorher durch 3 Milliarden Zeilen Code alle zu definieren. wenn du Events selbst triggerst ( .trigger() ), kannst du sogar noch eigene Argumente übergeben, in dem Fall allerdings hast DU das event ausgelöst, nicht der browser. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

30.06.2011, 10:44
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Onclick-Attribute machen eine Applikation schwer bwartbar. Bitte mach dich mit Event Handlern vertraut. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

30.06.2011, 11:02
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Es ist kein sauberer Stil, die Funktion einfach mit "function show_popup" global zu definieren aber du kannst es ruhig erstmal so machen, die Definition der Funktion platzierst du dann weiterhin außerhalb des document.ready Handlers (der ready() Funktion wie du es nennst). Den Klick-Event Handler fügst du dagegen erst innerhalb des document.ready Handlers dynamisch hinzu. Mit jQuery: Code: function show_popup(popup_id, width, height, top, bg_trigger) { // ... } document.ready(function() { // ... $("#loginbutton").click(function () { show_popup('login_popup', 350, 150, 200, 1); }); // ... }); Und anstelle von onclick: Code: <button id="loginbutton">Login</button> Der nächste Schritt wäre dann vielleicht, show_popup in einem Namespace und/oder einer Klasse zur Verfügung zu stellen. Beides sind Konzepte die JavaScript nicht nativ unterstützt aber leicht simuliert werden können, bei Interesse solltest du dazu einiges im Netz finden. __________________ PHP Blog + Library CSS Effects + Tools

30.06.2011, 11:14
Igäl Erfahrener Benutzer Registriert seit: 16.08.2007 Beiträge: 702 PHP-Kenntnisse: Anfänger	@rudygota: Kannst du mir das etwas näher erläutern? Onclick-Event Handler sind doch fester Standard in HTML 4.0 respektive XHTML 1.0. Solange ich sie als Attribut in dafür vorgesehenen Tags verwende. Oder was erschliesst sich mir hier nicht? @fab: Genau hier geht aber mein Problem wieder weiter. Ich kann nicht mehr dynamisch x-beliebig viele Popups erzeugen, weil ich sie nicht referenzieren kann. Mit der globalen Funktion kann ich den Namen des Popups (respektive des div-Elements das angezeigt werden soll) als Parameter mitgeben. Wenn ich mehrere Popups auf einer Seite habe, würde ich das diverse Male wiederholen: Code: document.ready(function() { // ... $("#loginbutton").click(function () { show_popup('login_popup', 350, 150, 200, 1); $("#beispielbutton").click(function () { show_popup('login_popup', 350, 150, 200, 1); $("#examplebutton").click(function () { show_popup('login_popup', 350, 150, 200, 1); }); Das wäre an sich ja kein Problem, wenn ich dann nicht ALLE Buttons der ganzen Webapplikation dort einbinden müsste. Gibt es also keine Möglichkeit, auf $("#beispielbutton") dynamisch einzuwirken? __________________ Das Recht auf Dummheit gehört zur Garantie der freien Entfaltung der Persönlichkeit. Mark Twain

30.06.2011, 11:17
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Genau diese Wiederholungen hast du aktuell in deinen onclick-Attributen und beschwerst dich auch nicht draüber. Prinzipiell lassen sich natürlich Wiederholungen eliminieren, das hängt im konkreten Fall aber davon ab, wie sich die Buttons unterscheiden. Definiere doch mal was du mit "dynamisch einwirken" meinst. __________________ PHP Blog + Library CSS Effects + Tools

30.06.2011, 11:34
Igäl Erfahrener Benutzer Registriert seit: 16.08.2007 Beiträge: 702 PHP-Kenntnisse: Anfänger	Sagen wir mal, wir haben eine statische Liste mit Einträgen und nun für jeden Eintrag einen Button. Per Klick auf den Button würde ein Popup geöffnet, welches mir Details zu den entsprechenden Einträgen anzeigt. Je nach Eintrag verändert sich die Liste der angezeigten Parameter (mal mehr mal weniger Content). Die Buttons würden sich in den Attributen "id" (z.B. id="eintrag_1" \|\| id="eintrag_2" \|\| id="popup_login" \|\| id="etwasganzanderes") und "onClick" [welches ich später gemäss euren Empfehlungen noch zu eliminieren versuche] unterscheiden. Im onClick unterscheiden sie sich, weil jedes Popup verschieden gross ist und ich die Abmessung im Funktionsaufruf als Parameter mitgeben möchte. Der Grund, warum ich euch damit nun so auf den Wecker gehe ist derjenige, dass ich schlechten Stil möglichst eliminieren will. Deshalb muss ich jetzt herausfinden, wie guter Stil aussehen soll. Sonst mag ich meinen eigenen Code nicht mehr __________________ Das Recht auf Dummheit gehört zur Garantie der freien Entfaltung der Persönlichkeit. Mark Twain