Du hast ein HTML oder JavaServer Faces Projekt? Eine hinterlegte JavaScript-Funktion wird nicht ausgeführt? Ein Button führt die gewünschte Aktion nicht aus? Vielleicht hat sich die ID oder die Styleklasse verändert und die jQuery-Selektion läuft ins Leere. Dafür habe ich das jQuery Empty Result Warning – Add-On geschrieben.
In einem unserer umfangreichen JavaSaver Faces-Projekte werden verstärkt eigene JavaScript-Implementierungen eingesetzt. Teils ergänzen wir nur die UI-Steuerung in der JSF-View, um beispielsweise Dialoge separat zu öffnen oder schließen. Zusätzliche schreiben wir jedoch ganze UI-Komponenten selbst in JavaScript.
Dabei bin ich öfters darauf gestoßen, dass bestimmte Funktionen oder Button-Aktionen nicht “wie durch diesen Selektor definiert” ausgelöst wurden. Beim Inspizieren zeigte sich, dass oft die Bindung überhaupt fehlte. Im JSF-Baum verändern sich die verketteten IDs bekanntlich, je nach Schachtelung der JSF-Komponenten. Wird daran etwas verändert, überprüft zwar JSF alle Referenzen der JSF-Komponenten, aber das separate JavaScript bleibt dagegen ungeprüft.
Eine Warnung, dass nichts gebunden werden konnte, würde helfen.
Leider konnte ich keine passende jQuery Erweiterung finden. Darum habe ich jQuery Empty Result Warning – Add-On geschrieben.
Beispielausgabe in der Webconsole:
jquery-empty-result-warning.js.jsf:23: empty result: $('.two-pane-container')
jquery-empty-result-warning.js.jsf:23: empty result: $('#schedule-delete-dialog_dialog_modal')
jquery-empty-result-warning.js
[code language=”javascript”]
/**
* jQuery Empty Result Warning – AddOn
* Add On to warn, if a selection returns empty.
* @author Daniel Suess
* @mail daniel.suess@akquinet.de]
* @version 0.1 alpha
*/
;
(function ( jQuery ) {
"use strict";
if ( jQuery && window.console && window.console.log && window.console.warn ) {
console.log( ‘### Loading jQuery Empty Result Warning – AddOn’ );
// backup
var initOri = jQuery.fn.init;
// replace
$.fn.init = function ( sel, ctx, rootjQuery ) {
var result = initOri.apply( this, arguments );
//var result = initOri(sel);
if ( sel === undefined ) {
// avoid warnings for undefined
return null;
}
if ( result.length === 0 ) {
console.warn( ’empty result: $(\” + sel + ‘\’)’ );
}
return result;
};
// reset prototype for $ constructor
jQuery.fn.init.prototype = jQuery.fn;
}
}( jQuery ));
[/code]
Ziel war eine sofortige Validierung ohne alle vorhandenen Code-Stellen mit $( … ) im Projekt zu verändern – das wäre nicht praktikabel. Daher kam eine Definition eines PlugIns nach jQuery Style Guide wie
$( ... ).notEmpty().weitereKaskadierteFunktion()
nicht in Frage.
Hier gehts zur Live-Preview auf jsFiddle.
Initialisiert wird es am Besten nach dem jQuery – Import und vor anderen Verwendungen von $.
[code language=”html”]
<head>
<!– 1. jQuery itself –>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!– 2. the add on –>
<script src="/scripts/jquery-empty-result-warning.js"></script>
<!– 3. all other scripts depending on jQuery –>
<script src="/scripts/bootstrap/bootstrap-datetimepicker.min.js"></script>
</head>
[/code]
Aktuell ist dies eine Alpha-Version und läuft mit den aktuellen jQuery Versionen 1.11 und 2.x. Es hat mir bereits geholfen, fehlerhafte Selektionen schneller zu finden und zu korrigieren.
Hat Dir dieses Add On geholfen oder du kennst ein vorhandenes? Dann schreibe bitte einen Kommentar. Auch Anmerkungen und Fehlerhinweise sind gerne gesehen.
Happy coding