Alle Artikel mit dem Schlagwort: jQuery

Social Coding mit GitHub

Was kommt dabei heraus, wenn man Open-Source-Ideen, moderne Versionierungskonzepte und die mächtige Kommunikationsinfrastruktur eines sozialen Netzwerks in einen Topf wirft und gut umrührt? Natürlich eine der spannendsten und populärsten Entwicklerplattformen der Welt. Gastautorin Ninja Lamberty über den Social-Coding-Dienst github, der kürzlich seinen vierten Geburtstag feierte und als Hoster von Projekten wie Joomla!, jQuery, Linux Mint, Perl, PHP oder Ruby kaum noch wegzudenken ist. Ein großer Vorteil bei der Entwicklung von Open-Source-Software besteht darin, dass man eine große Anzahl von Entwicklern zur Verbesserung und Weiterentwicklung der Software anzapfen kann. Weil jeder den Quellcode der Projekte einsehen kann, werden nicht nur Bugs schneller gefunden, sondern auch schneller gefixt.  Neue Features können von jedem hinzugefügt werden, der sich beteiligen möchte. Projekte wie Linux, Apache oder MySQL,  die das Herzstück vieler Internetseiten bilden, sind Produkte der Open Source Community. Das Gatekeeper-Problem Das gemeinsame Entwickeln hat allerdings nicht nur Vorteile: Wenn jeder zu einem Projekt beitragen kann, wird die zielgerichtete Weiterführung und Qualitätskontrolle nicht gerade einfacher. Üblicherweise wird dieses Problem dadurch gelöst, dass einige sogenannte “Trusted Developers” bestimmt werden, die …

jQuery-Rezept: Textfelder automatisch vervollständigen

Problem Es gibt zwei HTML-Eingabefeld-Typen, bei denen ein Anwender einen Wert aus einer Liste bestehender Werte auswählen kann: Radio Buttons und Selects. Radio Buttons sind für Listen mit bis zu acht Einträgen sinnvoll, während Selects bis zu 30 oder 150 Einträgen noch gut anwendbar sind – abhängig von der Art der Daten. Wenn der Anwender aber auch einen neuen Wert eintragen kann, helfen sie nicht weiter – meist wird ihnen dann ein Feld »Andere« beigestellt. Wird die Liste richtig groß – 500 oder sogar 500.000 Einträge, dann sind auch sie nicht mehr verwendbar. Lösung Das Autocomplete-Widget von jQuery UI kann die verschiedenen Situationen abdecken, in denen ein Select nicht ausreichend ist. Im einfachsten Fall sind die anzuzeigenden Daten in einem JavaScript-Array verfügbar: Wählen Sie einen Monat aus: var months = [’Januar’, ’Februar’, ’März’, ’April’, ’Mai’, ’Juni’, ’Juli’, ’August’, ’September’, ’Oktober’, ’November’, ’Dezember’]; $(“#month”).autocomplete({ source: months }); Hier wenden wir das Autocomplete-Plugin auf ein Eingabefeld für einen Monat an, wobei die Daten in einem einfachen JavaScript-Array bereitgestellt werden. Sind die Daten noch nicht auf Client-Seite vorhanden, …

Ist das ein Bug von jQuery?

Problem Sie nutzen jQuery-Code, um ein verborgenes Element anzuzeigen und dessen HTML-Inhalt nach einer Zeitverzögerung zu setzen, die Sie mit setTimeout() erzeugen: function delayLog(text) { setTimeout( “$(’#log’).show().html(text)”, 1000); } // Irgendwo weiter unten im Code delayLog(’Hello’); Der Aufruf von .show() funktioniert, aber der von .html(text) führt nicht zum gewünschten Ergebnis. Die Firebug-Konsole zeigt, dass die Variable text nicht definiert ist. Der gleiche jQuery-Code funktioniert, wenn er nicht per setTimeout() aufgerufen wird. Gibt es ein Problem, wenn jQuery zusammen mit setTimeout() genutzt wird? Lösung Eine Möglichkeit, herauszufinden, ob jQuery die Ursache des Problems ist, ist das Ersetzen Ihres jQuery-Codes durch anderen JavaScript-Code, der kein jQuery verwendet. In diesem Beispiel können wir den jQuery-Code durch ein einfaches alert() austauschen: function delayLog( text ) { setTimeout( “alert(text)”, 1000 ); } Wenn wir diese Version des Codes auszuprobieren, taucht das gleiche Problem auf – es gibt keinen Alert und Firebug meldet wieder, dass text nicht definiert ist. Damit haben wir das Problem zwar noch nicht gelöst, es aber deutlich eingeschränkt. Es ist ganz offensichtlich nicht jQuery (sofern nicht die …

Arrays mit jQuery.grep filtern

Wenn man über jQuery spricht, geht es häufig um die Hauptkonzepte – das Bearbeiten des DOM und der Styles sowie die Events. Es gibt aber noch eine ganze Reihe weiterer “Core”-Features und Hilfsfunktionen, die dem Entwickler entgegenkommen. Dies ist eine der nicht so bekannten Hilfsmethoden von jQuery. Problem Sie müssen Elemente in einem Array filtern und entfernen. Lösung (function($) { $(document).ready(function() { var months = [ ‘Januar’, ‘Februar’, ‘März’, ‘April’, ‘Mai’, ‘Juni’, ‘Juli’, ‘August’, ‘September’, ‘Oktober’, ‘November’, ‘Dezember’]; months = $.grep(months, function(value, i) { return ( value.indexOf(‘J’) == 0 ); }); $(‘#months’).html( ‘<li>’+ months.join (‘</li><li>’) + ‘</li>’); }); })(jQuery); Diskussion Dieses Rezept nutzt die Methode $.grep(), um das Array months so zu filtern, dass es nur Einträge entält, die mit dem Großbuchstaben J beginnen. Die Methode $.grep gibt das gefilterte Array zurück. Der vom Entwickler definierten Callback-Methode werden zwei Argumente übergeben. Sie muss den Booleschen Wert true zurückgeben, wenn ein Element beibehalten werden soll, oder false, wenn es verworfen werden kann. Das erste Argument ist der Wert des Array-Elements (in diesem Fall der Monat), während …