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

loading-new-blogs

new-blogs

  • 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 = '<p><img class="textmiddle" src="'+loading_image+'" /> Loading '+box_id.replace(/-/g," ")+'...</p>';
    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 = '<p>Could not refesh data, try refreshing the page</p>'; }
    else {  alert("Content refreshed successfully!");   }
}

HTML code

Box Name

<div id="new-blogs-box" class="box">
<div id="new-blogs-controls" class="controls"><a href="javascript:loadboxcontent('new-blogs')"><img src="../images/page-images/refresh.png" alt="Refresh" /></a></div>
<h2>New Blogs</h2>
<div id="new-blogs"></div>
</div>

CSS code

.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; }

Images

  • Loader.gif
  • Refresh.png

loader

refresh

  • Tenzin

    Thanks a lot. Good tutorial.

  • ten

    i downloaded the demo and it’s not working

About the Author

Sam Deering

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others....View Profile

Get jQuery Stuff in your inbox!

scroll to top