Best jQuery jSON Plugins & Tutorials with Demo

jQuery plugin for caching forms using HTML5 local storage

jQuery plugin for caching forms using HTML5 local storage

In this tutorial we’ll be utilizing the localStorage mechanism to store the current state of a form. This means that when the page is reloaded or the user re-opens the page after closing it the form will be populated with the previous values. For improved complexity, we’ll be storing the data as serialized JSON strings.

Wikipedia : jQuery Plugin for Wikipedia API

Wikipedia : jQuery Plugin for Wikipedia API

jQuery plugin for easy reloading of data from Wikipedia about Wikipedia API using JSON. invite must be passed to a Wikipedia page title. The second parameter can be a number of settings for the presentation to be made.

Reddit Image Browser with jQuery & Html5

Reddit Image Browser with jQuery & Html5

Reddit Image Browser is a client-side image browser for Reddit. The application uses jQuery to fetch and process unauthenticated JSONP. Some rendering is done with D3.js with the eventual goal of creating richer visualizations and user interactivity. HTML 5 Local Storage is used to maintain state.

Features:

  • Runs entirely in your browser.
  • Identifies post type (i.e. NSFW, videos, self) and displays content in an appropriate format.
  • Infinite scrolling with automatic asynchronous loading.
  • Hotkeys, such as j to go to next post and c to open comments page, enable fast browsing.
  • Your subreddit selections persist across sessions via HTML 5 Local Storage.
  • Local Storage support for IE provided by Remy Sharp’s storage polyfill.
  • Retries on load error.

Table-to-JSON jQuery Plugin

Table-to-JSON jQuery Plugin

A jQuery plugin that converts an HTML Table into a javascript object. Great for working with user-editable tables or accessing output from 3rd party tools.

jQuery Terminal Emulator : Creating Command line interpreters

jQuery Terminal Emulator : Creating Command line interpreters

jQuery Terminal Emulator is a plugin for creating command line interpreters in your applications. It can automatically call JSON-RPC service when user type commands or you can provide you own function in which you can parse user command. It’s ideal if you want to provide additional functionality for power users. It can also be used to debug your aplication.

Features:

  • You can create interpreter for your JSON-RPC service with one line of code.
  • Support for authentication (you can provide function when user enter login and password or if you use JSON-RPC it can automatically call login function on the server and pass token to all functions)
  • Stack of interpreters – you can create commands that trigger additional interpreters (eg. you can use couple of JSON-RPC service and run them when user type command)
  • Support for command line history it use Local Storage if posible
  • Include keyboard shortcut from bash like CTRL+A, CTRL+D, CTRL+E etc.

form2js : jQuery library for collecting form data

form2js : jQuery library for collecting form data

Convenient way to collect structured form data into JavaScript object. Because everything is better with jQuery, jQuery plugin added, check out jquery.toObject.js.

This is not a serialization library. Library used in example for JSON serialization is http://www.json.org/js.html Structure of resulting object defined by name attribute of form fields. See examples below. All this library doing is collecting form data and putting it in javascript object. Obviously you can get JSON/XML/etc string by serializing it, but it’s not an only purpose.

bootstrap-ajax : Adding declarative ajax functionality to your website

bootstrap-ajax : Adding declarative ajax functionality to your website

This plugin is designed to work with Twitter Bootstrap to enable declarative AJAX support.

No more writing the same 20 line $.ajax blocks of Javascript over and over again for each snippet of AJAX that you want to support. Easily extend support on the server side code for this by adding a top-level attribute to the JSON you are already returning called "html" that is the rendered content. Unlike a backbone.js approach to building a web app, bootstrap-ajax leverages server side template rendering engines to render and return HTML fragments.

jQuery Product Filtering and Categorization

jQuery Product Filtering and Categorization

Elegant way of product filtering and categorization. Easily editable json driven structure with smooth effects and visualisation.

Features:

  • Json driven readable database
  • Full screen or limited usage
  • Includes two themes as grey and sephia and psd files
  • Runtime image loading for performance
  • Commented and qualified javascript code with JSLint

Voting System Youtube Style With jQuery & PHP

Voting System Youtube Style With jQuery & PHP

Voting system can be important part of any website, especially if you want to keep track of user ratings. Let’s create a cookie based voting system, similar to YouTube like & dislike buttons (Thumbs up & Thumbs down), which can be applied to any content in php and jQuery.

MediaSlide : jQuery UI plugin to browse media items

MediaSlide : jQuery UI plugin to browse media items

MediaSlide is a jQuery UI plugin that allows you to browse a collection of media items (currently just images, but videos will be supported soon).

Features:

  • Media lists can contain thousands of items
  • Data can be loaded via JSON, XML or direct from Flickr
  • Images are only loaded as they are needed, conserving bandwidth
  • jQuery UI themes fully supported
  • API functions give you full control over the widget, so you can completely customize its look-and-feel
  • All current browsers supported
  • Completely free and opensource