Imediava's Blog

Just another WordPress.com site

Tag Archives: jquery ajax

Show additional information about an html table row with JQuery

In webpages HTML tables are often used to show information about a list of items. Sometimes we need to allow the user to get additional information about an item by clicking on its row. In this post, I am going to show with a really simple example how to create this interesting effect with JQuery, AJAX, and HTML5 data attributes.

The flow of information for this sample it’s similar to any AJAX request:

Flow of information for an AJAX request

  • When the user clicks on a row it fires a JavaScript event that is captured by a JavaScript function (1).
  • Our function request the additional information about our item to a webserver (2)
  • Finally the function receives the response and modifies the HTML with it (3).

Next, I am going to get into the details for every step of the process in our example:

1. Capturing click event

First, we use JQuery to add to every row in our table and event listener in charge of handling the click event.

$(document).ready(function() {

	$('tr').click(function () {

		});

	});

});

Then we need a way to identify the exact row that has fired the click event. For this task I have used HTML5 data attributes. For a really good explanation on HTML5 data attributes there’s a great explanation available at Jhon Resig’s blog. For a shorter explanation let’s say that this attributes allows us to add custom attributes to an HTML element. Every row in the HTML or our sample has a data-code attribute:

<tr data-code="smith">

				

		    <td>John</td>

	

		    <td>Smith</td>



		    <td>john-smith@doesnt-exist.com</td>

		

		    <td>555-045678</td>

				

</tr>

Thanks to that we can get the item code with JQuery, doing:

$(document).ready(function() {

	$('tr').click(function () {

	  	var codigo = $(this).data("code")
		});

	});

});

2. Requesting user’s information with AJAX

Now to get the item’s additional information we can use its code, and use it to make a request on our webserver. To make the request we use JQuery’s ajax function:

$(document).ready(function() {

	$('tr').click(function () {

	  var codigo = $(this).data("code")

	  $.ajax({

		  url: codigo + ".html",

		  dataType: "text",

		  cache: false,

		  success: function(html){

		  }

		});

	});

});

In the code we can see that the request uses the item’s code to ask the webserver explicitly about the clicked item.

3. Updating the webpage with the additional information

Finally when we receive the response from the webserver, we use it to show it in our panel for additional information with JQuery’s html function.

$(document).ready(function() {

	$('tr').click(function () {

	  var codigo = $(this).data("code")

	  $.ajax({

		  url: codigo + ".html",

		  dataType: "text",

		  cache: false,

		  success: function(html){

		    $("#add-info-panel").html(html);

		  }

		});

	});

});

PS: For the full code of our example just click here.

Advertisements
%d bloggers like this: