Wikizone - Benutzerbeiträge [de]

JQuery - Probleme lösen (Troubleshooting)

2011-10-04T19:38:43Z

178.2.227.179: /* jQuery Scope in anonyme Funktion */

== jQuery mit anderen Libaries nutzen ==
Manchmal gibt es Probleme wenn andere Skripte ebenfalls das Dollar ($) Symbol nutzen.

Typische Fehler sind dann z.B. “$().ready is not a function” “$(document) doesn’t support this property or method”. Oder: “null is null or not an object”

Hier gibt es 2 Möglichkeiten die man probieren kann:
=== No Conflict Mode ===
Hier wird das $ Zeichen mit einem anderen frei wählbaren Zeichen ersetzt. Es gibt aber auch ähnliche Möglichkeiten wie beim nächsten Beispiel.

http://api.jquery.com/jQuery.noConflict/

=== jQuery Scope in anonyme Funktion ===

Hierbei wird der Code innerhalb einer Anonymen Funktion ausgeführt und in dieser gilt wiederum ein lokaler jQuery Scope. Sie wird also unabhängig vom Rest der Skripte ausgeführt. Dies funktioniert auch wenn jQuery schon im no conflict Mode läuft und zwar ohne Anpassung der Skripte.

<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>

Quelle: [[http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems]] Zugriff 10/2011
</pre>

=== JavaScript Debug Infos auf die Konsole ausgeben ===
Mit der log Funktion des Konsole Objekts kann man Debug Infos direkt auf die JavaScript Konsole ausgeben.

jQuery Beispiel:

<pre>
// Nach Kindern der Klasse .myClassName suchen und deren Objekte, ids und Klassen ausgeben
var $kids = $('.myClassName').children().each(function(){
var kid = $(this);
console.log(kid, kid.attr('id'), kid.attr('class'));
});
// "Test" ausgeben ;-)
console.log("test");
</pre>

JQuery - Probleme lösen (Troubleshooting)

2011-10-04T18:51:50Z

178.2.227.179: /* jQuery Scope in anonyme Funktion */

JQuery - Probleme lösen (Troubleshooting)

2011-10-04T12:32:31Z

178.2.227.179: /* No Conflict Mode */

== jQuery mit anderen Libaries nutzen ==
Manchmal gibt es Probleme wenn andere Skripte ebenfalls das Dollar ($) Symbol nutzen.

Typische Fehler sind dann z.B. “$().ready is not a function” “$(document) doesn’t support this property or method”. Oder: “null is null or not an object”

Hier gibt es 2 Möglichkeiten die man probieren kann:
=== No Conflict Mode ===
Hier wird das $ Zeichen mit einem anderen frei wählbaren Zeichen ersetzt. Es gibt aber auch ähnliche Möglichkeiten wie beim nächsten Beispiel.

http://api.jquery.com/jQuery.noConflict/

=== jQuery Scope in anonyme Funktion ===

Hierbei wird der Code innerhalb einer Anonymen Funktion ausgeführt und in dieser gilt wiederum ein lokaler jQuery Scope. Sie wird also unabhängig vom Rest der Skripte ausgeführt. Dies funktioniert auch wenn jQuery schon im no conflict Mode läuft und zwar ohne Anpassung der Skripte.

<pre>
<script type="text/javascript">
( function($) {
// we can now rely on $ within the safety of our “bodyguard” function
$(document).ready( function() { alert("nyah nyah! I’m able to use '$'!!!!"); } );
} ) ( jQuery );

//this will fail
$(document).ready( function() { alert('fail?'); } );
</script>

Quelle: [[http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems]] Zugriff 10/2011
</pre>

JQuery - Probleme lösen (Troubleshooting)

2011-10-04T12:31:55Z

178.2.227.179: Die Seite wurde neu angelegt: „== jQuery mit anderen Libaries nutzen == Manchmal gibt es Probleme wenn andere Skripte ebenfalls das Dollar ($) Symbol nutzen. Typische Fehler sind dann z.B. …“

JQuery

2011-10-04T12:23:38Z

178.2.227.179: /* Testen ob jQuery geladen ist */

==Quickstart==

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Gut durchlesen, hier werden die meisten Basics angesprochen.

== Links ==
Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors

Ereignisse: http://docs.jquery.com/Events

Gute Tools out of the Box:

http://flowplayer.org/tools/index.html

Oder in Kurzform hier: [[JQuery Tools (flowplayer.org)]]

==Einbinden==
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.

===Über Google===
Beispiel:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

ui steht für User Interface (Plugins)

=== Über jQuery Server ===
Beispiel:
<script src="http://code.jquery.com/jquery-latest.js"></script>

=== Libary auf eigenem Server ===
==== Geo-bit webmynet ====
ToDo -> Idee ist verschiedene libs auf tools.webmynet.de vorzuhalten ähnlich wie sie auf dem Google Server liegen.
Zweck: einfache Einbindung, Statistik, Testing

=== Typo3 ===
siehe JavaScript Frameworks nutzen

== Der Beginn ==
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:

$(document).ready(function() {
// do stuff when DOM is ready
});

Oder Abgekürzt

$(function() {
// do stuff when DOM is ready
});

== Reagieren auf Klick ==
<pre>
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

</pre>
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren

Früher hat man das so gelöst:
<a href="" onclick="alert('Hello world')">Link</a>
Das funktioniert, allerdings muß man hier bei jedem Link den Schnipsel einfügen.

== Zugriff auf Elemente ==
Old School:
document.getElementById("orderedlist")
Mit JQuery analog zu obigem Beispiel
<pre>
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

</pre>
Hier wird noch eine Klasse eingebaut

'''Weitere Beispiele:'''

$("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
#orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
<pre>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
</pre>
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.

== Elemente manipulieren, hinzufügen, entfernen ==

== Weitere Funktionen ==
find()
addClass()
removeClass()
hover()
each()
append()

== Ereignisse ==

== Weitere Beispiele ==
<pre>
// Find some li s and append Text
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});

$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});

// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});

// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});

// Find li elements that does NOT have a parent ul
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});

// Find elements with a name attribute
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});

// Grab the parent
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});

</pre>

=== Testen ob jQuery geladen ist ===
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen

<pre>
jQuerySrc = 'fileadmin/js/jquery-min.js';

// only load jQuery if not present
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
}

// if Google is down
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"" + jQuerySrc + "\"></"+"script>");
}
</pre>

== Troubleshooting - Probleme Lösen ==
[[jQuery - Probleme lösen (Troubleshooting)]]