Inline edit using Ajax in Jquery

What is Ajax ?

AJAX is a technology that kept evolving from java applet days. It was notably used in web development when Google started deploying it in Gmail and Google maps extensively.

AJAX stands for Asynchronous Javascript and XML. As the name suggests the request from the end user is made asynchronously to the server. The requests and responses for the ajax is in XML format.

A request that is sent asynchronously from a browser to the server and receives the response in an async mode, doesn’t require you to refresh the page to display the results on the page. In other words, the user doesn’t realize when the request is been sent and the response is received back.

Now let us see an example of ajax using Jquery.

Ajax in Jquery

Jquery provides a very powerful library for ajax operations. As part of this tutorial, we will see how to edit the contents of the table and store that in the database using php and jquery. Remember we will be performing the inline edits asynchronously.

Step 1:

Let us start with building a database. Create a test database and load some test data.

Next we need to connect to database from our php code. Let me call this php file config.php and make sure you don’t give public access to it, as you will be storing all your DB credentials in this file.

define('DBHOST','YOUR HOST');
define('DBUSER','USERNAME');
define('DBPASS','PASSWORD');
define('DBNAME','DBNAME');
/*code to follow*/

Step 2:

Now you can test your database connection and write a function to retrieve the contents from the test db you created in step1.

$conn = mysql_connect(DBHOST,DBUSER,DBPASS);
mysql_select_db(DBNAME,$conn);

function get_data()
{
	
	$sql = "select * from TABLENAME";
	
	$rs = mysql_query($sql);
	
	return $rs;
}

Step 3:

Let us build the HTML to display the contents in a table we just retrieved from db in step 2. I marked the class of the td element that I want to edit to say ‘edit’ followed by its tag and row number in the db for updating the respective record in db.

    
No
    
Name
    
Description
    
Price



'.$rows['id'].'
        
'.$rows['name'].'
        
'.$rows['description'].'
        
'.$rows['price'].'

Step 4:

Now the table can be styled.

body
{
	margin:0;
	padding:0;
	background:#f4f4f4;
}

h1{margin:80px auto 0;width:288px}

table
{
	margin:100px auto;
	width:500px;
	border:1px solid #646464;
	position:relative;
}

tr,td
{
	text-align:center;
	border: 1px solid #ccc;
}

tr
{
	background:#99F;
}

.heading{background:#ccc;}

.alt
{
	background:#C4C4FF;
}

Step 5:

So now we have come to the javascript portion of the tutorial that adds ajax to your table you built. I want to make the td element editable when a ‘click’ event is triggered on it. The javascript that is used for making it an editable item is below,

$('td.edit').click(function(){
$(this).addClass('ajax');
$(this).html('');										
$('#editbox').focus();
});

Step 6:

We also want the editable items to be switched around as we move clicking on other td elements. So I added a script that switches the ajax class among the editable elements. We can add this script to the click event function. Now the above code looks like this,

$('td.edit').click(function(){
							 
 $('.ajax').html($('.ajax input').val());
 $('.ajax').removeClass('ajax');

 $(this).addClass('ajax');
 $(this).html('');
										
$('#editbox').focus();								        
  
} );

Step 7:

Next we want the edits made to be passed on to the server to store it in DB. I want that to happen when user presses Enter key. How can that be achieved? First we have to check if a user has pressed Enter key and next if it is Enter key pressed on that particular editable element, we have to pass the value entered by the user to our server side code to handle the data storage.

$('td.edit').keydown(function(event){
    if(event.which == 13)
   { 
      $.ajax({    type: "POST",
      url:"config.php",
      data: //To be discussed in next step,
      success: function(data){
	   $('.ajax').html($('.ajax input').val());
	    $('.ajax').removeClass('ajax');
       }});
    }
								  
});

The above javascript tells the browser to look for the keydown event and if it is triggered it will check if the keypressed is ‘Enter key’ ( Enter key value ’13′). Once it passes the check it calls the ‘config.php’ (server-side code). Note it uses the POST method for the call.

On a successful callback the success function gets executed. I want to make the editable area back to the regular td element. So we will be again removing the ‘ajax’ class for that td element and pass the value of the editable box to the td element.

Step 8:

In the above step you would have noticed ‘data’ key value pair. We will discuss how we are going to construct the data that will be sent as request to the config.php .

In Step 3, I have mentioned that editable td elements will be marked with their corresponding tag (table column name) and row number of the table. We are going to use that to pass as data to server-side along with the edited value.

so now the above code looks like this with complete data construction.

$('td.edit').keydown(function(event){
	 arr = $(this).attr('class').split( " " );
	 if(event.which == 13)
	 { 
		$.ajax({    type: "POST",
			        url:"config.php",
				data: "value="+$('.ajax input').val()+
                                        "&rownum="+arr[2]+"&field="+arr[1],
				success: function(data){
					 $('.ajax').html($('.ajax input').val());
				         $('.ajax').removeClass('ajax');
			}});
		}
								  
	});

Step 9:

We have to write the function to handle the data that have been sent in the above step. Also this function will be called only if the data have been received from the browser.

//check if the data is received from the browser
//and calls the update function
if(isset($_POST['rownum']))
{
	update_data($_POST['field'],$_POST['value'],$_POST['rownum']);
}
/*php code*/
function update_data($field, $data, $rownum)
{

	
	$sql = "update TABLENAME set ".$field." = '".$data."' where id = ".$rownum;
	
	mysql_query($sql) or die("Couldn't connect to db");
	
	
}

So now your config.php should looks like this

define('DBHOST','YOUR HOST');
define('DBUSER','USERNAME');
define('DBPASS','PASSWORD');
define('DBNAME','DBNAME');

$conn = mysql_connect(DBHOST,DBUSER,DBPASS);
	
mysql_select_db(DBNAME,$conn);

if(isset($_POST['rownum']))
{
	update_data($_POST['field'],$_POST['value'],$_POST['rownum']);
}


function get_data()
{
	
	$sql = "select * from TABLENAME";
	
	$rs = mysql_query($sql);
	
	return $rs;
}

function update_data($field, $data, $rownum)
{

	
	$sql = "update TABLENAME set ".$field." = '".$data."' where id = ".$rownum;
	
	mysql_query($sql) or die("Couldn't connect to db");
	
	
}

Step 10:

Finally, I want to add the ‘blur’ event to the editable box, so that the editable box disappears when the focus is blurred out from it.

$('#editbox').live('blur',function(){
		$('.ajax').html($('.ajax input').val());
		$('.ajax').removeClass('ajax');
});

Note:
The above script uses ‘live’ keyword to bind the ‘blur’ event to the editable box, because the ‘editbox’ element is a dynamic one. It is been added dynamically when you click on any editable td element.

This completes the tutorial. Hope you enjoyed this tutorial and if you liked this tutorial consider sharing it.