JQuery - Probleme lösen (Troubleshooting)

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.

<script type="text/javascript">
/*<![CDATA[*/
<!--
( 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

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:

// 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");

Testen welche Tools bei jQuery Tools geladen sind

Konsole:

console.dir($.tools);