Category: jQuery

Introduction

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 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.

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”

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

Java

1

2

3

publicclassPersonListContainer{

privateList personList;

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.

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.