Are you working on an HTML or JavaServer Faces project? Do you have problems with a JavaScript function not being triggered? Or a button that does not execute the defined action? Maybe an ID or style class has been changed and the jQuery selection now gets an empty result. This is why I coded jQuery Empty Result Warning – Add-On.
In one of our large JavaServer Faces projects, we are using our own JavaScript implementations more and more. Sometimes we just need to customize elements of an existing JSF view, e.g. to open or close dialogues separately, but we are also developing complete UI components in JavaScript.
I started noticing that sometimes a function or a button was not executed ‘as defined by this selector’. Further inspection showed that the binding was missing completely. In a JSF tree, IDs are generated by concatenating prior IDs, due to nesting of JSF components. If something is modified, JSF will validate all references on JSF components, but custom JavaScript remains unchecked.
A warning to say that something could not be bound would help. Unfortunately, I could not find a suitable jQuery extension, so I developed jQuery Empty Result Warning – Add-On.
Sample output in the web console:
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
/**
* 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 ));
The goal of this add-on was instant validation without having to change all existing $( … ) lines of code in the project, which would not be practical. This is why a plug-in definition following the jQuery Style Guide, e.g.
$( ... ).notEmpty().nextCascadedFunction()
was not an option.
See the Live-Preview at jsFiddle.
It is best to initialize the add-on directly after importing jQuery and prior to all other uses of $.
<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>
Currently this is an alpha version and runs with current jQuery versions 1.11 and 2.x. It has already helped me a lot by bringing wrong selections to my attention, so that I can fix them more quickly.
Did you find this add-on useful or do you know of an existing one? Please leave a comment below. Notes and bug reports are always welcome, too.
Happy coding
Filed under: All
