Video tutorial illustrates the basics of JSON: Create Object, Arrays, Access Elements, Modify/Update the value etc.
JSON full form: JavaScript Object Notation.
JSON is a lightweight data-interchange format. It’s easy for humans to read and write. It’s easy for machines to parse and generate. So it’s more efficient at transferring data than XML.
We have a simple HTML structure, with a unorder list. We’ll fill the list items from the JSON data using jQuery.
JSON and jQuery my_script.js
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready( function() {
var v1 = { "name": "Satish", "age": 25, "company": "Technotip IT Solutions" };
var v2 = { "name": "Kiran", "age": 28, "company": "Oracle" };
var obj = { "obj1": v1, "obj2": v2};
var v3 = { "companies": [ "Microsoft", "Apple", "Google", "Oracle" ] };
$("ul").append("<li>"+obj["obj1"]["name"]+"</li>");
$("ul").append("<li>"+v3.companies[0]+"</li>");
});
$(document).ready( function() { var v1 = { "name": "Satish", "age": 25, "company": "Technotip IT Solutions" }; var v2 = { "name": "Kiran", "age": 28, "company": "Oracle" }; var obj = { "obj1": v1, "obj2": v2}; var v3 = { "companies": [ "Microsoft", "Apple", "Google", "Oracle" ] }; $("ul").append("<li>"+obj["obj1"]["name"]+"</li>"); $("ul").append("<li>"+v3.companies[0]+"</li>");
});
Object An object is a set of name/value pairs. An object begins with { and ends with }. Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
Array An array is an ordered collection of values. An array begins with [ and ends with ]. Values are separated by , (comma). Values in JSON can be string, number, array, objects, Boolean values or even null.
Fetch JSon Data From Object: Object_name.Key;
Fetch JSon Data From Array: Object_name.array_name[index_number];
We could nest objects inside objects or arrays inside objects or objects inside an array etc, upto any level of complexities. This is advantages for web applications like building menus with nested items, which are fetched from database.
Since, writing and fetching and parsing of JSON data is easy, most developers have stared using JSON over XML.
Video tutorial illustrates insertion of data into MySQL database using jQuery and PHP, using AJAX method i.e., $.post() method of jQuery.
There are 5 shortcuts for AJAX in jQuery, ultimately calling ajax method, and by default configured to have different parameters. $.get $.post $.getJSON $.getScript $.load
Tutorial Theme: Insert Data Into Database Without Refreshing Webpage
In this tutorial we’ll illustrate $.post method of jQuery.
Here we have a form with an id called myForm, which has 2 input box. A button with id sub. And a span tag with an id of result.
Once the user enters his/her name, age and hits Save button, the information will be sent to userInfo.php file present in the action field, via post method.
Using AJAX technique, we would make sure the form doesn’t redirect to userInfo.php file after the submission, and we’ll display appropriate message to the user on index.html file itself after the user entered values has been processed by userInfo.php file.
We connect our application to mysql server using the user name root( and we leave password field empty, as we haven’t set any password to it on our machine ). Also select the database called test.
Create Database called test. A table user inside the database test. user table has 2 fields called name and age.
Once the user hits the Save button of our form in index.html, the information is being sent to userInfo.php
Where the user entered values are being copied to local variables $name and $age. Next a simple MySQL query is formed to insert the data into the tableuser.
Using mysql_query() standard php function, the MySQL query is being processed. Using if else conditional statements, we check if the process was successful or failed. Based on which we echo the result.
Once the user clicks on the button with the id sub, $.post() method is invoked. $.post() is a shortcut to $.ajax() method.
General Syntax: $.post( ‘pass_data_to_this_url’, ‘data’, ‘callback_function’ );
We fetch the URL from myForm form, from its action attribute. Serialize all the user entered input’s. SerializeArray makes the input into property: value pair. After the data is passed to the url and is being processed, the result will be returned back to the callback function and is caught in info variable, and is inserted inside the span tag using html() method – which is similar to innerHTML() method of JavaScript.
jQuery code: Disable Form Redirection my_script.js
Select the form and make sure to return false upon submission.
jQuery code: Clear Input Fields my_script.js
1
2
3
4
5
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
function clearInput() {
$("#myForm :input").each( function() { $(this).val('');
});
}
Write a custom function. Select the input fields and set each of its value to none or empty. Call this function once the user clicks the submit button.
Video tutorial to read XML file using jQuery ajax method.
AJAX full form: Asynchronous JavaScript and XML We’ll also see the use of setTimeout() function.
Using AJAX technique, we fetch only the required data from the server without reloading the entire page.
In this video tutorial, we fetch the data present in XML format and display fetched content on the webpage and update it in real time, without reloading the html page.
HTML code index.html
1
2
3
4
5
6
7
8
9
10
<html>
<head><title>Reading an XML file using jQuery</title></head>
<body>
<ul></ul>
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/my_script.js" type="text/javascript"></script>
</body>
</html>
<html>
<head><title>Reading an XML file using jQuery</title></head>
<body> <ul></ul>
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/my_script.js" type="text/javascript"></script>
</body>
</html>
Here we have 1 ul tag. We’ll load the list items dynamically using jQuery, from XML file.
Here we have a base tag called corporate. Inside that we have employee details like name, age and company which is bound inside employee tag. Each employee will have his/her details inside separate/individual employee tag.
function corporateData() {
$.ajax({
url: "corporateData.xml",
dataType: "xml",
success: function(data) {
$("ul").children().remove();
$(data).find("employee").each( function() {
var info = '<li>Name: '+$(this).find("name").text()+'</li>
<li>Age: '+$(this).find("age").text()+'</li>
<li>Company: '+$(this).find("company").text()+'</li>';
$("ul").append(info);
});
},
error: function() { $("ul").children().remove();
$("ul").append("<li>There was an error baby!</li>"); }
});
}
function corporateData() {
$.ajax({ url: "corporateData.xml", dataType: "xml", success: function(data) { $("ul").children().remove(); $(data).find("employee").each( function() { var info = '<li>Name: '+$(this).find("name").text()+'</li> <li>Age: '+$(this).find("age").text()+'</li> <li>Company: '+$(this).find("company").text()+'</li>'; $("ul").append(info); }); }, error: function() { $("ul").children().remove(); $("ul").append("<li>There was an error baby!</li>"); } });
}
Here we write a custom jQuery function called corporateData. $.ajax() is a jQuery static method and it has a lot of properties. In this tutorial, we illustrate url, dataType, success and error properties. Specify the url from which the data has to be fetched, along with its data type. If the file gets parsed successfully, the function inside the success property gets executed. If there is an error, the error property function gets triggered.
Once the xml file gets parsed successfully, $.ajax method throws an object which contains xml file data. We catch this data with anonymous function present in success property. Next, we clear any previous data got attached to the unordered list of html document.
Using the object, we find each employee tags present inside the XML file, fetch individual name, age and company names and then append it to the unordered list.
Inorder to make sure our application fetches the fresh data from the XML file, we check the XML file after certain period of time. Using setTimeout() method of jQuery: setTimeout() takes two parameters, first one being the function names to be called and the second one being the time interval after which those functions has to be called.
using setTimeout() we have called itself( fetch() ) and corporateData() function. This makes sure, whenever the XML file gets updated, our application fetches the data and displays on our webpage, without refreshing the page.
jQuery File: call the functions to make it work my_script.js
Make sure to call both corporateData and fetch method once the page loads. This makes sure the XML data is fetched before fetch functions tries to re-fetch the things.
Note: Make sure you open the html file from a server(even from localhost), and not directly from a folder. XML and the files which are fetching XML data must be on the same server, otherwise XML data won’t be fetched.
Testing The Application To test this small application, open the index.html file from the server, and then add / modify / delete any entry. Once you save the XML file, the content of XML file must get updated on the html file immediately without the page(index.html) being reloaded.
function is a keyword, fun1 is a function name we have given. Once the webpage is loaded, fun1 function will be called, and Oracle is passed to it as parameter. Inside fun1(), the span tag is selected and the passed parameter is appended to the span tag. Since the function doesn’t return any value back, we have written return false.
jQuery code: Passing Parameter To Function And Returning Value my_script.js
1
2
3
4
5
6
7
8
9
10
$(document).ready( function() {
var d = fun1(10, 20);
$("span").append(d);
});
function fun1(a, b){
return(a+b);
}
$(document).ready( function() { var d = fun1(10, 20); $("span").append(d);
});
function fun1(a, b){ return(a+b);
}
Once the webpage is loaded, fun1 function will be called, and 10, 20 is passed to it as parameters. Inside fun1(), 10 and 20 are added and the resulting value is returned back to the calling function, where in it is stored in a variable called d, where we append it to the span tag.
Here, once the user clicks on the button(with an id name), the custom function software gets invoked. Since the function here doesn’t return any value, we have written return false;
jQuery code: Function Expression with Event Binding my_script.js
Main Purposes of writing a function: Re-usability of code. Reduce the number of lines of code. Cleaner looking code. We could easily trace, modify and maintain the code.
Helps in Object Oriented Programming, as the data is bind to methods. We could write the code in such a way that, we could pass different parameters to the same function and get desired results. Hence reducing a lot of code overhead and cost of writing extra useless codes!
Video tutorial illustrates the use of jQuery’s special type of variable called array.
Array variable stores multiple data with single name with different index. Indexing starts from zero in jQuery. This helps in storing and retrieving easily using some conditional looping.
In this example, we take a unordered list with some list items which has two type of class veg and nonveg. Another ordered list, with only 1 list item. Two buttons. One to detach the items from unordered list, which has a class called veg. Another button, to attach it to the ordered list.
Once the user clicks on the button with the id remove, we detach the list items with class veg from the unordered list and store it inside the special jQuery array variable. Next, when the user clicks on the button with the id of attach, we attach it to the ordered list using append(), after(), before() methods of jQuery, by passing the array variable to these methods.
Video Tutorial: Detach and Attach DOM Elements: jQuery Array
