This workshop is for you, if:<\/p>\n
Quick Introduction<\/strong> Jquery:<\/em> JSON:<\/em> Requirements<\/strong><\/p>\n 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.<\/p>\n Solution<\/strong><\/p>\n We identify and describe each element necessary for implementing the above mentioned requirement.<\/p>\n Data storage:<\/strong> We maintain two different json files.<\/p>\n \u00a0<\/p>\n The below code snippet shows a snapshot of the two JSON. We could have created single JSON for maintaining both the data. Also, we could have structured it in a different way, but our aim here is to understand the interaction of JSON with Jquery… so let us move on.<\/p>\n Web page<\/strong><\/p>\n We need to create a simple html page in which all the action takes place. By\u00a0action we mean,\u00a0selecting one dropdown causing another dropdown to be displayed and so on. List of things to be done in this page are given below:<\/p>\n Let us go through each of the task in detail to finish off this workshop. Here we go….<\/p>\n 1. Adding three html\u00a0DIV\u00a0elements<\/p>\n Note the last two\u00a0DIV\u00a0elements are marked as hidden for starters by setting the style as ‘display:none’. Have you noticed the missing\u00a0onChange<\/em>\u00a0on each of the select\/options element? Not sure, how all these are going to work!<\/p>\n 2. Adding link to Jquery library:<\/p>\n We need to create a folder structure. We maintained the html as jquery_json.html in the root directory. We created a static folder inside it and add the jquery and JSON.<\/p>\n Wait there! There is no link added to json file. Interesting! The JSONs are not used directly as javascript variables. We will have Jquery look up for it and convert it into an object. Hang on, you will see.<\/p>\n 3. Writing Jquery code:<\/p>\n Welcome to the fun side of\u00a0this workshop!<\/p>\n We start by adding script tag in our page just the way we add for writing any javascript in page. We then use the jquery check for document readiness.<\/p>\n We write all the code inside the ready block. It checks, if the page is loaded in the browser completely before other events start firing. Get used to the }); syntax and you will start enjoying too!\u00a0<\/p>\n Now, we need to write something which is similar to a javascript onChange. But the best part here is that you do not have to attach an onchange into your html select.<\/p>\n The\u00a0pound (#)\u00a0symbol refers to the id attribute value of the html element. Jquery also provides option of accessing by class name of the element and element itself. Like $(\u00e2\u201a\u00ac\u00c5\u201c.class\u00e2\u201a\u00ac\u009d) and $(‘div’). Refer to Jquery documentation (http:\/\/docs.jquery.com\/<\/a>) for more details.<\/p>\n Getting back to our example, all the code for on selection of a section should go inside the above change function.<\/p>\n We may have lots of logic but one thing worthwhile to look at is how the JSON is accessed from Jquery. See the snippet below:<\/p>\n $getJSON is one of the functions in Jquery. It is basically an AJAX implementation. This means, you can also call a JSP, Servlet or PHP which returns a JSON object. Well, do not worry, it will not be left as homework. We will be writing\u00a0another article with these details.<\/p>\n So, we are just pointing to the JSON and passing it a callback function. There are other parameters which can be passed into this function but we are only using two here. The callback function gets the JSON as a variable which we can have fun with. See the inline comments describing all the fun I’ve had with it.<\/p>\n On selection of category, a list of articles\u00a0is displayed in the same way. The source is bundled into zip and can be downloaded by clicking here (jquery_json.zip<\/a>).<\/p>\n
A\u00a0brief introduction of the two technologies used in this workshop are given below.<\/p>\n
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\u00a0http:\/\/www.jquery.com\/<\/a>. You can also download the latest Jquery library from their website.<\/p>\n
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\u00a0JSON<\/a>\u00a0for more details.<\/p>\n
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.<\/p>\n\n
{\r\n \"java_programming\": [\r\n {\r\n \"ky\": \"java_basics\", \/\/Used for select options value to be passed\r\n \"val\": \"Java Basics\" \/\/Used for dropdown value to be displayed\r\n \r\n },\r\n {\r\n \"ky\": \"jsp_servlets\",\r\n \"val\": \"JSP & Servlets\"\r\n },\r\n {\r\n \"ky\": \"javascripts\",\r\n \"val\": \"Javascripts\"\r\n }\r\n ], \r\n ...\r\n\r\n \r\n\r\n{\r\n \"java_basics\": [\"Java Hello World - Tech Programmer\", \"Java Hello World using Eclipse IDE - Tech Programmer\",\r\n \"Reading Java API documents - Tech Programmer\",\r\n \"Common Java Exception and Error reference catalog - Tech Programmer\"],\r\n \"jsp_servlets\": [\"First JSP\/Servlet Workshop - Tech Programmer\", \"Integrating Eclipse with Tomcat - Tech Programmer\",\r\n \"Session Based Shopping Cart - Tech Programmer\"],\r\n ...<\/code><\/pre>\n\u00a0<\/pre>\n
\n
<div style=\"position: absolute; top: 50px; left: 5px\">Section: <select id=\"section\" name=\"section\">\r\n<option value=\"select\">Select<\/option>\r\n<option value=\"java_programming\">Java Programming<\/option>\r\n<option value=\"market_analysis\">Market Analysis<\/option>\r\n<\/select>\r\n<\/div>\r\n\r\n<div id=\"divCategory\" style=\"position: absolute; top: 80px; left: 5px; display:none\">\r\n Category: <select id=\"category\" name=\"category\"><\/select>\r\n<\/div>\r\n<div id=\"divArticles\" style=\"position: absolute; top: 120px; left: 5px; display:none\">test\r\n<\/div><\/code><\/pre>\n<script type=\"text\/javascript\" src=\"static\/jquery-1.3.1.js\"><\/script><\/code><\/pre>\n<script type=\"text\/javascript\">\r\n $(document).ready( function() {\r\n\r\n });\r\n<\/script><\/code><\/pre>\n $(\"#section\").change( function () {\r\n\r\n }<\/code><\/pre>\n $.getJSON(\"static\/site_category.json\", function(json) {\r\n var catJson = json[sSec];\/\/Fetch content for appropriate section\r\n var options = \"<option value=\\\"select\\\">Select<\/option>\";\/\/A variable which we build\r\n for(i=0;i<catJson.length;i++) {\/\/iterating contents for the selected section\r\n \r\n options +=\"<option value=\\\"\"+catJson[i].ky+\"\\\">\"+catJson[i].val+\"<\/option>\";\/\/generate option for each category\r\n }\r\n $(\"#category\").html(options);\/\/inject options into select tag\r\n $(\"#divCategory\").show();\/\/Magic! show the category div \r\n });\r\n }<\/code><\/pre>\n