OnKlick für alle Objekte gleicher Art

[Smoothi]

Ich programmier derzeit mit JavaEE und verwende commandButton und commandLink.

Nun möchte ich eine Funktion verwenden für alle Objekte folgender Art:
input type="image" (commandButton)
input type="Button" (commandButton)
a href="#" (commandLink)

Da meine Anwendung aber haufenweise solcher Objekte hat, möchte ich es nicht überall ranschreiben.

Kann ich für genau diese Objekte ein onClick setzen, sodass meine Funktion immer aufgerufen wird?

 

[HimBromBeere]

Wer suchet, der findet: html - Get list of all `input` objects using JavaScript, without accessing a `form` object - Stack Overflow

 

[faetzminator]

Mit jquery kann man sowas gemütlich in ein paar Zeilen machen. Dort kannst du z.B. nach [c]$('input[type="image"]')[/c] selektieren, und dann mit [c]each()[/c] über alle Objekte laufen und onclick neu setzen.

 

[Smoothi]

@faetzminator
Ich hab nicht mehr allzuviel Zeit, dass ich mich mit JQuery beschäftigen könnte. Ich hab auch nur wenige kleine JS-Funktionen.

@HimBromBeere
Habe es so versucht:

<script type="text/javascript">  
for (var i = 0; current = document.getElementsByTagName('input')[i]; i++) {     
    current.addEventListener('click', showElements('inactive', 'loading'))
}
</script>

Problem 1:
Diesen Teil habe ich nun ganz am Ende meiner Seite gesetzt. Würde es gern in der externen js-Datei haben. Wenn ich die Größe der Liste ausgebe, dann kommt dabei 0. Ich denke, dass die DOM-Struktur noch nicht geladen ist, wärend er die Sache ausführt. Kann ich da as machen? Also die HTML-Seite zunächst laden lassen, bevor die Sache aktiv wird?

Problem 2:
Ich habe nun "click" übergeben. Trotzdem werden die beiden Elemente in der übergebenen Funktion sofort sichtbar, nachdem die Seite geladen wurde.... Ich möchte ja onclick-Events.

 

[HimBromBeere]

kann ich da as machen? Also die HTML-Seite zunächst laden lassen, bevor die Sache aktiv wird?

Schreib den Code doch einfach in eine Funktion rein und ruf sie dann per onclick, onload oder was weiß ich was auf...

 

[Smoothi]

Ja, dann brauch ich ja einfach nur showElements('inactive', 'loading')) aufzurufen. Jedoch habe ich so viele Links und Buttons, dass ich das gern nicht überall dranschreiben möchte. Deswegen such ich ja eine Möglichkeit, das für alle Links gleichzeitig zu lösen

 

[Gast2]

Einfacher als mit jQuery gehts nicht.

 

[Evil-Devil]

Um beim jQuery Beispiel zu bleiben:

function meineTolleFunktion() {
	alert("Hallo Welt");
}

$(document).ready(function() {
	$('.command').bind('click', meineTolleFunktion);
}

Die Funktion meineTolleFunktion liegt zb. im externen Skript.
Am Ende der Seite muss lediglich das Document Ready eingebunden werden.
Alternativ würde das iirc sogar im externen Script funktionieren.

Und was wird hier gemacht? Hier wird jedes DOM Element das eine "command" Styleclass gesetzt bekommen hat der Funktion im onClick verknüpft.

Anstatt .command hätte man auch input schreiben können. Dann wären alle input Felder betroffen gewesen.
Weiterführende Beispiele für zb. Parameter Übergabe bitte der jQuery Doku entnehmen.

 

[Smoothi]

Ok ich hab das nun so übernommen.

Jedoch meckert er von wegen "Objekt nicht gefunden" in Zeile 70 Zeichen 1.

$(document).ready(
    function() {
        $('input').bind('click', showElements('inactive', 'loading'));
    }
)

Zeile 70 wär

$(document).ready(

Also wird dieses $ nicht gefunden. Muss ich jQuery irgendwie separat bereitstellen? In meiner Template-Datei ist es jedenfalls drin.

 

[Evil-Devil]

Natürlich musst du jQuery bereit stellen. Ist schließlich eine Javascript Lib.
http://code.jquery.com/jquery-1.7.1.min.js

Entweder direkt verlinkt einbinden oder downloaden und im Projekt mitliefern.

 

[Smoothi]

Wie gesagt, in meiner Template-Datei (JSF) ist es drin. Habs gedownloaded und dem Projekt beigelegt...

Is schon klar, dass er die Funktionen nicht aus der Luft nimmt ;D

<h:outputScript library="javascript" name="jquery-1.7.1.min.js" />

Die Datei befindet sich in resources/javascript, wie die andere JavaScript-Datei auch. Also beim Pfad sollte es keine Probleme geben.


Nee nee ich meinte, muss ich in meiner aufrufenden JavaScript-Datei nochetwas machen?

 

[faetzminator]

Nee nee ich meinte, muss ich in meiner aufrufenden JavaScript-Datei nochetwas machen?

Eigentlich nicht, nein... Wenn das JS richtig eingebunden ist, dann läufts

 

[Evil-Devil]

Nee nee ich meinte, muss ich in meiner aufrufenden JavaScript-Datei nochetwas machen?

An sich nichts. Das Document Ready schreibt man normalerweise rein, da es imho eher selten ist so eine globale Funktion zu haben.

 

[Smoothi]

ok, ich habe die Funktion spaßenshalber an das Ende der Templatedatei gesetzt und siehe da...keine Fehler mehr, dafür funktioniert die jQuery-Funktion trotzdem nicht.

Selbst wenn ich Klassen übergeb, die es in meiner Anwendung nicht gibt (in Beispiel ".test123")

<script type="text/javascript">
$(document).ready(
    function() {
    $('.test123').bind('click', showElements('inactive', 'loading'));
    }
)
</script>

Die Funktion wird immer direkt gestartet. :/

Unverträglichkeit zwischen JSF und jQuery? Wobei genau das gleiche Problem schon bei der Nicht-jQuery-Lösung aufgetaucht ist

 

[Evil-Devil]

Weil dein Aufruf so falsch ist. Du kannst bind() so nicht nutzen.

Wechseln inactive und loading oder sind die konfigurierbar?

 

[Smoothi]

"loading" ist nur eine Lade-Box und "inactive" ist eine halbtransparente Box über die gesamte Seite.

Die werden nur auf sichtbar gesetzt, da es manchmal etwas länger dauern kann mit dem Seitenaufbau. Die Dinger sind so lange sichtbar, bis die andere Seite geladen ist, dann wird ja sowieso neu "gezeichnet" und die Boxen sind standardmäßig wieder unsichtbar. Hatte, wenn ichs direkt ran schreib, jedenfalls super funktioniert

 

[Evil-Devil]

Dh. deine komplette Seite ist an sich erst halbtransparent überlegt und dann zeigt sie noch einen Ladeschirm an?
Und dieser soll verschwinden wenn die Seite fertig ist?

 

[Smoothi]

Es ist ja so, dass die alte Seite so lange angezeigt wird, bis die neue geladen ist.

Sobald ich einen Button klicke, der mich auf eine andere Seite weiterleitet, wird einfach nur meine Ladebox mit dem halbtransparenten Hintergrund angezeigt.

Wenn die neue Seite geladen ist, ist diese Sichtbarkeit ja wieder weg, da wieder die Werte aus der CSS-Datei entnommen werden

Habs hinbekommen:

function loading() {
    showElements('inactive', 'loading')
}            
            
$(document).ready(
    function() {
    $('input').bind('click', loading);
    }
)

Ich glaub das meintest du, dass die bind() so nicht verwendet werden kann.

Leider muss ich die Zeilen an das Ende meiner Template-Datei schreiben, da sonst die Objekte nicht gefunden werden.