JQuery-Mobile with AngularJS and Angular-Route (ngRoute)


The following details how JQuery-Mobile and AngularJS can play together seamlessly. Angular-Route (ngRoute) is used for navigation. A simple Angular directive invokes JQuery-Mobile styling and enhancements as each page is loaded. This includes pages loaded via  ng-include

A working example is available here as a Plunker http://plnkr.co/edit/RPbJfWX84XkzWlvPFMvX?p=info

Continue reading “JQuery-Mobile with AngularJS and Angular-Route (ngRoute)”

AngularJS – isolate scope – ‘&’ (function reference)


This blog demonstrates how to pass a reference to a function to an angular directive/template.

The way in which the child directive/template calls the parent is also demonstrated.

The example is available as a working JSFiddle here.

This tutorial details creating directive/templates in general (without an isolated scope).

This tutorial demonstrates passing values by value to angular directives/templates (@).

This tutorial demonstrates passing values by reference to angular directives/templates (=).

Continue reading “AngularJS – isolate scope – ‘&’ (function reference)”

Hibernate-Search Multiple-value Facet-Counts


The hibernate-search facet search API is pretty amazing but it lacks a little on the following:

  • Facet-Count values are incorrect where a facet matches a fields that have multiple values. I.e. the facet-counts are correct where the facet has a 1-to-many relationship with result-set items but the facet-counts are entirely incorrect where the facet has a many-to-many relationship with result-set items.
  • The facet-count values are that of the number of matched result-set items within the result-set as distinct from the number of matched result-set items that will be merged into the result-set if the facet is applied. This is highly undesirable where more than one facet-group is used conjunctively. Let’s explain…
    • Facet-counts are available before any facets are applied. Adjusted facet-counts are available after facets are applied. This is great because it facilitates two different usages. With the former, the facet-counts can remain static as facets are selected and deselected. With the latter, applying one facet will reduce the facet-count for other facets. In fact, the other facet-counts can reduce to zero. This zero count does not necessarily mean no result-set items will result from applying the facet. Consequently, we don’t know if clicking on the facet will yield new results or not. If a facet yields no results, and it is used in conjunction with facets from another facet group, this can lead to a zero-results situation. Confused? no problem Ok, allot of detail, description, example and analysis is provided in this blog.
  • These issues are identified in the following discussion threads:
  • This blog delivers a comprehensive solution to all issues surrounding facet-counts in hibernate-search. The solution is derived from the information provided here: http://sujitpal.blogspot.ie/2007/04/lucene-search-within-search-with.html. A java class that delivers the solution is provided. There is also a fully working maven project demonstrating the solution in action.

Continue reading “Hibernate-Search Multiple-value Facet-Counts”

Understanding Faceted Searching


Tony Russell-Rose describes faceted searching in great detail in these posts:





They’re well worth a read before even contemplating developing a faceted search.

There are many types of faceting techniques available. This blog focuses on a facet-search where the facets and results remain on a single page. Facets dynamically reduce and expand the result-set on the same page. A good comparable might be the faceted people search on LinkedIn.com. This one is also a really good example: http://www.bikersbest.dk/en-gb/shop/accessories/fenders-etc

We’re going to describe faceted searching and its oddities through example. The examples proliferate in complexity towards an end result which hopefully will yield an understanding of how faceted searching can (or dare I indulge, should work). Some rules for development/behavior will emerge; these will be emphasized and summarized throughout. At the end there is some rambling and a solution for a hibernate-search implementation but for the first 99% of the blog there is no focus on implementation; the focus is exclusively on the following.

  • What exactly a faceted search really is.
  • The behavior of the result-set in response to applying or removing facet selections.
  • What the numbers beside the facets (facet-counts) really mean (cardinality).
  • The different relationships between facets and result-sets e.g. 1-to-Many V.s. Many-to-Many.

The examples used throughout are simple to understand but they will provoke allot of thought because filtering results by facets is not as straight forward a process as may seem at an initial glance. It can be extremely confusing. Each example is a fully working jsFiddle.

Continue reading “Understanding Faceted Searching”

Resolving AngularJS minimization / obfuscation issues

AngularJs uses Dependency Injection (DI) to supply objects/variables during configuration.
Variables that begin with the $ character tend to be injected, therefore if a minimizor and/or obfuscater changes the variable name, the DI will not be performed.

This Angular Crash Course provides a detailed intro on AngularJS.

This blog details a common solution to the problems arising from minimization / obfuscation.

Continue reading “Resolving AngularJS minimization / obfuscation issues”

AngularJS – A crash course – in processing AJAX JSON

I’ve recently started using AngularJS http://angularjs.org/ . It’s very impressive. It’s extremely useful for handling/processing AJAX JSON results.

This blog demonstrates the following:

  1. Setting up an AngularJS “application”.
  2. Binding (dynamic) JSON data to the view. I.e. processing an AJAX callback.
  3. Invoking an AngularJS Controller function externally from outside the AngularJS scope.


  1. The above is demonstrated with a simple html page that loads some JSON asynchronously (using AJAX). The code is available for download below.
  2. The result is something of a crash course on AngularJS.

Continue reading “AngularJS – A crash course – in processing AJAX JSON”

Asp.NET html <button> element onclick and onserverclick -> client-side validation

The problem solved here is that an asp.net <button> element (html = <button runat=”server” > or <asp:HtmlButton )  doesn’t support a onclientclick event. This prevents performing client side validation ahead of the onserverclick event.

Here’s more on the problem.


Continue reading “Asp.NET html <button> element onclick and onserverclick -> client-side validation”

input and textarea html5 ‘placeholder’ attribute support in IE (or other non compliant browsers)–jQuery plugin

Which results in


Where the text ‘Search Products’ disappears on focus and reappears on blur if the field is still empty. This text is not the ‘value’ of the field.

In addition:

  • If the value of the field is set to empty programmatically (using JS) the placeholder will appear (and vice versa when text is programmatically applied).
  • When the form is submitted with a placeholder visible, the value of the placeholder is not submitted.

Continue reading “input and textarea html5 ‘placeholder’ attribute support in IE (or other non compliant browsers)–jQuery plugin”

jQuery-UI – Rich Autocomplete component

A problem with the out-of-box jQuery-ui autocomplete component is that:

  • Only text is shown in the dropdown
  • That same text populates the field upon list selection.

Thankfully, this does not have to be the case. Images and other markup can easily be rendered in the suggestion list. Consequently, the text that populates the autocomplete field upon selection is fully customizable.



Continue reading “jQuery-UI – Rich Autocomplete component”

Force IE out of compatibility mode

Add this to within the <head>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

This forces IE out of compatibility mode. IE will ignore compatibility mode settings from the ‘(F12) Developer Tools’ facility.

Here’s some code that will allow testing.

Done using ‘IE Tester’ http://www.my-debugbar.com/wiki/IETester/HomePage

IE7 and IE8 will render this differently. IE8 in compatibility view mode will render it as IE7 does.


Comments welcome…..




CSS – Removing the (new-line) spaces between inline elements


Observe the gap between the checkbox and the label on the second instance!

This is a “feature” with inline (or inline-block) elements on a page. A new-line /carriage-return in the code is treated as white space between inline elements.

While good advice would be to work with this rather than against it as someone mentioned on stackoverflow; there are still times when you need to get rid of the spaces.

Continue reading “CSS – Removing the (new-line) spaces between inline elements”

Flexible Size, Flexible Color Icons for jQuery-UI

Different Icon Size, Different Icon Colors for jQuery-UI
Different Icon Size, Different Icon Colors for jQuery-UI

Achieving different size, different color icons in jQuery-ui and non-jQuery-ui web apps.

This tutorial reveals how FontAwesome icons can be used rather than trying to resize existing jQuery-ui icons.

I initially wanted jQuery-UI icons to be available in different sizes, for example:

<span class=”ui-icon ui-icon-pencil”></span> A Pencil Icon (existing)

<span class=”ui-icon ui-icon-pencil large red”></span> A large, red Pencil Icon (ideal, read on…)

The solution I found does not require jQuery or jQuery-UI but works perfectly seamlessly with it regardless.

Continue reading “Flexible Size, Flexible Color Icons for jQuery-UI”

jQuery-UI : change the color of a button using CSS classes

In many web applications it’s necessary to have more than one color button, primary and secondary for example.

Changing the color of jQuery-UI buttons using CSS
Changing the color of jQuery-UI buttons using CSS

This tutorial demonstrates how to achieve this using only CSS.

Continue reading “jQuery-UI : change the color of a button using CSS classes”

jQuery-UI : Specifying different Button Icon colors using only CSS classes

Doing this:

Results in

Specifying Button Icon colors using CSS only rather than using custom JavaScript
Specifying Button Icon colors using CSS only rather than using custom JavaScript

This tutorial demonstrates how changing the icon color can  be achieved.

Continue reading “jQuery-UI : Specifying different Button Icon colors using only CSS classes”

jQuery-UI : Applying an Icon to a button using CSS classes

This tutorial simply demonstrates a generic reusable JavaScript snipped which will allow you to specify Button Icon’s using only CSS classes. I.e. no need to apply Icons using JS anymore.

Adding icons to buttons using CSS only
Adding icons to buttons using CSS classes in the same way as using icons in general

Continue reading “jQuery-UI : Applying an Icon to a button using CSS classes”