Using Jquery with JSON

Article Index

1 1 1 1 1 1 1 1 1 1 Rating 3.00 (2 Votes)

This workshop is for you, if:

  • You would like to know how Jquery and JSON work together
  • You are trying to create series of dependent dropdowns based on data present in client side

Quick Introduction
A brief introduction of the two technologies used in this workshop are given below.

Jquery:
Jquery is a Javascript library. It provides useful functions for css and html elements manipulation. It has a weird }); syntax all over the place, but once you understand it, you can quickly develop the javascript stuffs with little pain. It serves as a wrapper over the basic javascript elements. It also provides a wrapper over the AJAX api. For more details visit http://www.jquery.com/. You can also download the latest Jquery library from their website.

JSON:
JSON which stands for JavaScript Object Notation, is a client side data structure to store and exchange data similar to XML. Check out our article on JSON for more details.

Requirements

We would like to create a series of dropdown for our website. The first dropdown will provide a list of sections (i.e. Java Programming and Market Analysis). On selecting, it should display another dropdown with list of categories (like Java Basics, JSP & Servlets etc). On selecting the category, it should display a bullet list of articles under this selection. We do not want our page to get refreshed on each select. However, for this example, we assume that we maintain the data in a static file in the client side instead fetching data from server side.

Solution

We identify and describe each element necessary for implementing the above mentioned requirement.

Data storage:
As per the requirement, we would like to store the data in a static file. We generally have three options viz. Properties file, XML file and JSON file. Since we need to handle everything from client side using Jquery, JSON would be the best bet.

We maintain two different json files.

  • site_category.json – Maintains data related to sections and categories
  • site_articles.json – Maintains the data related to categories and articles

 


Joomla SEO by MijoSEF