Automatically Load Content and Refresh Div Using jQuery

Automatically loading content and displaying it without refreshing the page is an important feature any websites could have. Especially for news website and blog must have this feature to display most recent news/posts. Even top social websites have these features to display latest posts/tweets. You can also implement this feature easily using jQuery. You can directly display content in your website from database and automatically change it after fixed interval of time (I recommend five seconds).

auto load div jquery


Let’s see how you can achieve this:  

Main part of this tutorial is the jQuery code ‘load.js’ which is pretty simple:

function show_data()</p>
setInterval('show_data()', 5000);

Content.php file is responsible for what data is to be displayed. You can either fetch data from your database tables or from any other file. In my case I have stored my tutorial details in an associative array and passing it to load.js randomly.

Code for content.php:

$i_1="<li><a href=''>Create Drag and Drop Multiple File Upload using PHP and Dropzone.js</a></li>";
$i_2="<li><a href=''>Easily Create Notification Bar For Website Using jQuery</a></li>";
$i_3="<li><a href=''>Install WordPress on Amazon EC2- Part2</a></li>";
$i_4="<li><a href=''>Dynamically Add Input Fields And Submit To Database With jQuery and PHP</a></li>";

$display_content = array(



Its very easy so you can implement it in just minutes in your website. please share if you like this simple and useful tutorial.

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

4 Responses so far.

  1. Hi nice scripts. It works well, but I have a problem. I would like to refresh the div each minute, I do not need to refresh it each 5 seconds. The problem that I have with your scripts is that when I open the page or when I reload the page it takes 1 minutes until I see the content. Originally appears blank, after I minute I can see the content and start refreshing each minute. Is there a way to show the content immediately when I open the page or when I reload it manually and then start refreshing each minute?
    Thank you.

    1. Any idea? Probably it is really easy, but I am a beginner in JQuery and I can not find the solution. I would appreciate if anybody can suggest me what to do. Thank you in advance 🙂

      1. I found the solution by myself. In case anyone is looking for it. This script load the div immediately and then it reload it each 50 seconds

        function show_data()
        setInterval(‘show_data()’, 50000);
        // start the cycle

Comments are closed.