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

CORS Stateless REST Service with detached HTML5 client


This blog will detail in precise steps how to create a stateless REST service that is consumed by a HTML5 client on another domain. The HTML5 client could easily be a Cordova or Phonegap app.

The HTML5 client is simple and basic just for demonstration purposes. It shows the characteristics necessary for Cross-Origin-Resource-Sharing (CORS) communication.

The REST service is also simple. It demonstrates how to enable CORS on the server application.

While both Client and Server projects are proliferated throughout this blog, the completed artifacts are available for download at the bottom of this page.

Related Posts

Authenticating a REST Service using Facebook authentication http://outbottle.com/cors-stateless-rest-service-with-facebook-authentication/

Adding JSON Web Token (JWT) enhancements to “Authenticating a REST Service using Facebook authentication” http://outbottle.com/json-web-token-jwt-with-cors-stateless-rest-service-with-facebook-authentication/

Continue reading

A jQuery plugin: delayedClickAction

A jQuery plugin to allow an element to be clicked many times before a specified action is performed. The action/event-handler will be invoked after a specified delay.


Example: Increment a qty multiple times by clicking before an ajax call is made.

Applies to any jQuery query. i.e. a bunch of elements can be involved in the delayed response.

Continue reading

jQuery hasAttr() has Attribute plugin

Straight from here:



Use as so:


Where the attribute being checked for is ‘rel’.


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

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

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

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

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 : 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 : 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 : Changing the color of an icon

This quick tutorial demonstrates how to change the color of jQuery UI icons.


changing the color of jQuery-UI icons
different colored jQuery-UI icons

will result in red and blue icons respectively

Continue reading

Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method)

Edit 10-Feb-2015

A much better approach to this problem is simply to use JSON. A number of comments below are in regard to nested lists. The solution detailed here does not readily facilitate nested lists. The solution outlined in this blog does: http://outbottle.com/spring-4-web-mvc-json-handling/. JSON is the recommended way of achieving “Adding Objects to a List element on the fly”

End Edit

Edit 12-Feb-2015

Alternatively, this blog also demonstrates the solution:

Spring 4 Web MVC with AngularJS


The project downloadable below is an answer to a question repeated in this blog (Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method))

“How can I submit nested lists of objects?”

The answer is AJAX and JSON.

A very good approach to this is with AngularJS and Spring as demonstrated here.

End Edit


ok, hard to describe this one and hard to find stuff on google so here’s an image explaining.

Add and Remove Items from List Dynamically in Spring 3 Web MVC
Add and Remove Items from List Dynamically in Spring 3 Web MVC

When clicked, the ‘Add’ and ‘Remove’ links in the image generate JavaScript events which add and remove the HTML elements dynamically client-side. The idea is to allow a Java List Object to have elements added and removed dynamically on form submission.

A Generic JavaScript library is provided. It makes the process of dynamically adding List elements (rows or Person objects in this example) effortless for any situation. The JavaScript library provides callabacks thus facilitating an AJAX implementation with little effort.

The Netbeans project and the JavaScript file are available for download at the bottom of the page.

Continue reading

Spring 3 Web MVC – Exception Handling – incorporating AJAX

Spring 3 Web MVC Exception Handling with AJAX
Spring 3 Web MVC Exception Handling

This tutorial demonstrates how to handle exceptions in Spring 3 Web MCV.
Emphasis is given to Handling  exceptions that occur during AJAX requests. I.e. in the event of an exception during an AJAX request,  it is not desirable to redirect to an error page, instead JavaScript error handling code should be invoked with relevant information passed in.


A Netbeans project is available for download at the bottom of this page.

Continue reading

jQuery load() – dynamically loaded content scripts are accessible and can access parent scripts?

The answer is yes actually.


The scripts on the existing page can call the dynamically loaded scripts and the dynamically loaded scripts can call the existing static scripts.
Continue reading