Load Box Content Dynamically using AJAX

This is how you can create page box elements that are loaded via AJAX and can be refreshed instantly without a whole page reload. It uses a combination of jQuery and JavaScript code. It’s kinda like the facebook content box loader but i coded it myself from scratch.

Advantages of using this AJAX method

• The page loads faster because it loads the content boxes after the DOM is ready
• The content in the box can be reloaded without the whole page reloaded
• All websites are moving towards doing it such as facebook, twitter, odesk etc…
• New boxes can added without the need for any further CSS or JavaScript coding

How it works

• After the web page loads jQuery calls a AJAX function for each box to load
• A loading message is displayed
• A server side script (such as PHP) file returns the HTML for the box
• The content is loaded into the box on the web page
• The content can easily be reloaded when the user hovers the box the refresh image will appear and once clicked the content will refresh

See Live Demo
Download Source Files

How is it a dynamic?

Each box is a div that contains an id attribute that uniquely identifies that box. Each element inside this div is named with that id of the div. The jQuery picks up this id and uses it to match against a server side script (such as PHP) matches the id of the box and is loaded. This makes it dynamic because all variables are created based upon the id of the box.

jQuery code

This function loads after the web page is loaded and initialises the boxes for use attaching events.

jQuery(document).ready(function($) {
	//event to show the box controls when the mouse hovers the box
	//applies to all elements with class="box"
	$('.box').mouseover(function(){
		//replace string "box" with "controls"
		var dyn_var = "#" + this.id.replace("box","controls");
		$(dyn_var).show();
	});

	//initialize box controls
	$('.box .controls').hide(); //hide all box controls

//hide box when mouse exits box
	$('.box').mouseout(function(){
		$('.box .controls').hide();
	});

	//load box content (loads after page loads)
	loadboxcontent('box-id1');
	loadboxcontent('box-id2');
	//etc...
});

This function takes the id of the div and loads content into a child div with id = box_id parameter. It can be applied to any box control as it dynamically creates the js variables to pickup the objects.

div container id = box_id
php script name = box_id.php

function loadboxcontent(box_id){
	//perform an initial check to see if box_id has been supplied
	if (box_id == '') { return false; }

//show loading image
	var loading_image="/images/loader.gif"; //Full URL to "loading" image.
	var loading_text = '
 Loading '+box_id.replace(/-/g," ")+'...
';
	var script_path = "../php/"; //path to server side script
	var box_container = document.getElementById(box_id);
	box_container.innerHTML = loading_text;

	//record the result of the AJAX request
	//(async = false) they load in order and wait until the previous is finished
	//(async = true) they all load at the same time
	var result = false;
    $.ajax({
      url: script_path+box_id+".php",
      type: 'POST',
      async: true,
      data: {blogs: 30},
      success: function(data) {
      	 result = true;
      	 document.getElementById(box_id).innerHTML = data;
      }
    });
    if (result == false) { document.getElementById(box_id).innerHTML = '
Could not refesh data, try refreshing the page
'; }
    else {  alert("Content refreshed successfully!");   }
}

HTML code

New Blogs

.box { text-align:left; min-height:50px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border:1px #FFFFFF groove; }
.box:hover { background-color:#F2F2F2; border:1px #E4DFF4 groove; }
.box h2 { margin:0; padding:5px 0px 5px 10px; background-color:#8973C8; color:white; text-shadow:1px 1px 1px #A999D7; }
.box h2 a img { vertical-align:middle; }

/* BOX CONTROLS */
.box .controls { float:right; position:relative; top:5px; right:5px; }
.box .controls a { opacity:0.8; }
.box .controls a:hover { opacity:1.0; }