Display JSON data using jquery/ajax

JSON –  Javascript Object Notation, is one of the beautiful techniques for parsing data. It’s beautiful primarily because it is light weight!

Here, I’m going to demonstrate how to display JSON data using ajax and jquery.

Let’s read some sample json data that is available in a file called json.test.js

 "LinuxID":"1","LinuxDist":"Debian","Company":"Debian Project"<br>
 "LinuxID":"2","LinuxDist":"Ubuntu","Company":"Canonical Ltd."<br>
 "LinuxID":"3","LinuxDist":"Fedora","Company":"Fedora Project"<br>

Now let’s write the html and javascript to display these results:

We call this file called displayjson.html:

<!DOCTYPE html>
<title>Display JSON data</title>
<div id="results"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var obj=jQuery.parseJSON(data);
for(var i=0;i<obj.length;i++){
$("#results").append("Linux ID: "+obj[i].LinuxID).hide().fadeIn(500);
$("#results").append("<br>Linux Distribution: "+obj[i].LinuxDist).hide().fadeIn(500);
$("#results").append("<br>Company: "+obj[i].Company).hide().fadeIn(500);


Check out examples at Fun with JSON.
That’s it folks, enjoy!

Web Design made easy – Twitter Bootstrap

Do you really think you are bad at web design, but excellent working with the backend and have sound knowledge web development? Do you always search and spend most of your time designing a web page layout or browse for web templates? Well not to worry! Twitter has introduced Bootstrap that is a css file with excellent styling and layouts where in you can modify the code and ou are free to use. It also includes essential javascripts like popup boxes, tool tips etc that you often use in your website.

You are free to use bootsrap and modify the source.


This is available at http://twitter.com/bootstrap

You can also pull my project code from my github repository designed in twitter bootstrap. You can get it from https://github.com/swaroopsm/cellbay/

Insert data into MySQL using php, jquery, Ajax

This is a simple example for inserting data into a mysql database using php as the server-sided programming language.. This uses ajax via jquery for inserting the records… For those of you who do not know what jquery is – jquery is a javascript library with a lot of functions which lets u write less code, which is highly efficient .. You can download this latest version at the jquery.com website… So let’s get started…

  • Construct Database:
We Create a Database called zwaroop. Add a new table myTable with fields: ID as INT, Name as VARCHAR(50),    Email as VARCHAR(50).
For those who are using LAMP, WAMP, XAMPP etc.. this is straight forward… Go ahead to your web browser and navigate to http://localhost/phpmyadmin, which is a GUI that allows you to construct your database as quickly as possible.

So far we have.,

Database Name: zwaroop

Table Name: myTable

Field Names: ID, Name, Email

  • Create home.php file
This is our basic html page that the user will be viewing it…
<title>zwaroop's home</title></pre>
<!-- include jquery library file-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<label>ID: </label> <input id="ID" type="text" />
<label>Name: </label> <input id="Name" type="text" />
<label>E-Mail: </label> <input id="Email" type="text" />
<a id="insert" title="Insert Data" href="#">Push into mysql</a>
 <!-- For displaying a message -->

<div id="message"></div>
  • Create insert.php file:
Create a page called insert.php, this page include all the server-sided code for inserting data into our mysql database. Assume our front-end html page consists of 3 input boxes that takes the ID, Name and Email… So here we go,