Drag-and-Drop with jQuery: Your Essential Guide

Drag-and-Drop with jQuery: Your Essential Guide

Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.

Tutorial: Play Framework, JPA, JSON, jQuery, & Heroku | James Ward

Tutorial: Play Framework, JPA, JSON, jQuery, & Heroku

If you are a Java developer then you really need to give Play Framework a try. It is really refreshing to take a few minutes, step out of the legacy-feeling world of traditional Java web app development and into something modern and fun. I want to walk you through a very simple tutorial where we will build a web application with Play Framework. The application will use JPA for persistence and expose access to the data through a JSON over HTTP interface. The client-side of the application will be built with jQuery. Lets get started.

jQuery Drop Down Menu | Javascript-Array

jQuery Drop Down Menu - Simple JavaScript Plugin

So, I present to you the simple drop-down menu. The peculiarity of this menu is that these 20 lines of code and absence of various cumbersome mouse events within html code. This script requires the jQuery library. There's a version that does not require jQuery.

Grails - Best Calendar plugin?

Grails - user - Best Calendar plugin?

I'm looking for a simple way to add some calendar views to my application. I need to render blocks of time on a monthly, weekly and daily view. The primary use case is a read-only view, so I don't really care about editing/creating abilities.

FullCalendar - Full-sized Calendar jQuery Plugin

FullCalendar - Full-sized Calendar jQuery Plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source and dual licensed under the MIT or GPL Version 2 licenses.

Enhancing HTML tables using a JQuery DataTables plugin | CodeProject

Enhancing HTML tables using a JQuery DataTables plugin - CodeProject

In this article is shown how you can enhance plain HTML table with JQuery DataTables plugin

User Interface Programming in the (Near) Future | Bruce Eckel

User Interface Programming in the (Near) Future

In my article on JavaScript, I observed that we need a new language that generates good and safe JavaScript, so that you no longer have to think about either JavaScript issues or cross-browser problems. Little did I know that the solution(s) had already appeared in the form of JQuery and CoffeeScript.

jQuery datatable with FancyBox and auto refresh - Shaun McCran

The blog of Shaun McCran - JQuery datatable with added FancyBox and auto refresh

Recently I've had a few questions about how to use the datatables plugin to display data, and also integrate a pop up or lightbox function. The pop up would have an edit form in it, and when the user completes the edit the light box goes away and the datatable refreshes.
This is relatively straightforward to do, but there are several key concepts to getting everything working correctly, so I've broken it down into a few chunks.
You can see an example of a datatable with added FancyBox here.

DataTables editing example | datatables.net

DataTables example

Using DataTables in-combination with the excellent jEditable plugin for jQuery allows you to produce a table which can have individual cells edited. The table can then be updated such that filtering, sorting etc. will all work as expected. This is showing in the demo below.

Adding jQuery Mobile to an Existing Grails App | Greg Stephens Blog

Adding jQuery Mobile to an Existing Grails App | Greg Stephens Blog

Grails + jQuery UI + GAE - Startup Guide Part One | INhouse 32

Grails + jQuery UI + GAE - Startup Guide Part One

This tutorial shows the steps required to create a simple Grails application with jQuery UI, the Grails AppEngine plugin and the GORM-JPA plugin. The tutorial will also point out criticals steps that require special attention.

Using jQuery DataTables In Grails | leapingmind

Using jQuery DataTables In Grails | leapingmind

DataTables (a table plug-in for jQuery) helps you add tables with dynamic content and behavior to your web applications. You get features like column sorting, content paging, filtering, etc. In this post I’ll show you an example of how to use DataTables to present data.

More jQuery DataTables: Showing Row Details | leapingmind

Aaron commented on my last blog post that he’d like to see an example of how to click on a row in a jQuery DataTable to show that row’s details in a jQuery UI dialog. In this post I’ve created a sample Grails application which does just that. Some of the things you’ll learn how to do are:

• Hide columns in a DataTable
• Add a click event handler to each row in a DataTable
• Use AJAX to retrieve data from the server
• Display that data in a jQuery UI modal dialog

You can either download the source code from GitHub, or create your own Grails app and follow along.

Better Scaffolding with jQuery - Part I | Groovy Zone

Better Scaffolding with jQuery - Part I | Groovy Zone

Grails scaffolding works great out of the box. Today I want to see how we can improve adding data to the many side of a one-to-many relationship using jQuery, jQueryUI's Dialog, and some Ajax.

Grails, JQuery, and AJAX | AlexDuan.com

Grails, JQuery, and AJAX | AlexDuan.com

Grails out of the box uses Prototype for its JavaScript framework, which means that developers have a number of GSP taglibs available which will automatically generate Prototype code to make AJAX-y calls.
Unfortunately, I “grew up” using JQuery, and thus feel more comfortable using JQuery as my JS framework. Luckily, Grails “has a plugin for that.” This means that if you’ve been using the Grails taglibs to generate your remote calls, you can install the plugin and it will generate JQuery code instead. Great for when you switch out your JS frameworks midstream…am I right?

jQuery UI - Configure your download

jQuery UI - Configure your download

Customize your jQuery UI download by selecting the version and specific modules you need in the form below or select a quick download package. A range of current and historical jQuery UI releases are also hosted on Google's CDN.

Grails, jQuery & the jQuery Grid

Grails, jQuery & the jQuery Grid - Part One
Grails, jQuery & the jQuery Grid - Part Two
Grails, jQuery & the jQuery Grid - Part Three 
Grails, jQuery & the jQuery Grid - Part Four
Grails, jQuery & the jQuery Grid - Part Five - Cell Editing

My target for these tutorials are not just for beginners to Grails but for anyone looking for quick how-to instructions to use Grails with various Ajax features such as displaying data in a jQuery grid, ajax filtering of data.

Downloading jQuery - jQuery JavaScript Library

Downloading jQuery - jQuery JavaScript Library

This is the recommended version of jQuery to use for your application. The code in here should be stable and usable in all modern browsers.

jQuery Grid Plugin » Downloads

jQuery Grid Plugin » Downloads

Customize your jqGrid download by selecting the specific modules you need in the form below.

Using The JQuery UI – Part 1 | GrasshopperPebbles.com

Using The JQuery UI – Part 1 | GrasshopperPebbles.com

Although I have used some of the JQuery UI widgets in the past, I really began to explore the JQuery UI in a recent project. One of the reasons that I like using the UI widgets is that I can standardize on a set of components (plugins) that have a consistent look and feel as well as a consistent coding standard.

Grails - Plugin - Resources

Grails - Plugin - Resources

This plugin represents a new way of declaring and linking to static resources in your application and plugins. Resource dependencies can be declared (e.g. jQuery UI requires jQuery) and pages simply indicate which resource modules they require. The plugin does the rest, and provides a processing pipeline for advanced optimisations.