javascript - how to refresh a particular div content when page is loading through ajax load() function

this is my html code:

<body onload="fun1()">
<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" id="m_blink" onclick="fun1()">Tab1</a></li>
    <li><a href="#" id="d_blink" onclick="fun2()">Tab2</a></li>
    <li><a href="#" id="k_blink" onclick="fun3()">Tab3</a></li>

</ul>
</body>
<div id='home'></div>

this the script loading the page content in a 'home' div , and if i click 'tab1' that particular 'tab1.php' loading in 'home' div and when i click 'tab2' particular tab2.php is loading in 'home' div and when i click tab3 particular tab3.php is loading in home div,

 <script>
    function fun1(){

        $("#home").load("tab1.php",{},function(){});
    }


    function fun2(){

            $("#home").load("tab2.php",{},function(){});
    }

    function fun3(){

            $("#home").load("tab3.php",{},function(){});
    }


    </script>

when i click on the tab1 page is loaded in home div and this home div has to refresh for every 5 seconds when tab2 page is loaded in home div and this home div has to refresh for 5 seconds and same as tab3

please check the 'onload' function is for body tag!

and i tried using setInterval(function() {}); like this :

function fun1(){
               setInterval(function(){
                $("#home").load("tab1.php",{},function(){});
            },5000);
        }     
     function fun2(){
               setInterval(function(){
                $("#home").load("tab2.php",{},function(){});
            },5000);
        }

     function fun3(){
               setInterval(function(){
                $("#home").load("tab3.php",{},function(){});
            },5000);
        }

And the problem is when i called the page through ajax load() function than whole body of the page is loading, so i dont want to load whole page i want to refresh the page of particular div home div only, please suggest how to solve this problem.

please check onload() function i have used to call the default page tab1.php

this is my html code:

<body onload="fun1()">
<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" id="m_blink" onclick="fun1()">Tab1</a></li>
    <li><a href="#" id="d_blink" onclick="fun2()">Tab2</a></li>
    <li><a href="#" id="k_blink" onclick="fun3()">Tab3</a></li>

</ul>
</body>
<div id='home'></div>

 <script>
    function fun1(){

        $("#home").load("tab1.php",{},function(){});
    }


    function fun2(){

            $("#home").load("tab2.php",{},function(){});
    }

    function fun3(){

            $("#home").load("tab3.php",{},function(){});
    }


    </script>

please check the 'onload' function is for body tag!

and i tried using setInterval(function() {}); like this :

function fun1(){
               setInterval(function(){
                $("#home").load("tab1.php",{},function(){});
            },5000);
        }     
     function fun2(){
               setInterval(function(){
                $("#home").load("tab2.php",{},function(){});
            },5000);
        }

     function fun3(){
               setInterval(function(){
                $("#home").load("tab3.php",{},function(){});
            },5000);
        }

please check onload() function i have used to call the default page tab1.php

Share Improve this question asked Jul 3, 2014 at 7:24 John 1012 gold badges7 silver badges17 bronze badges

You can specify what element .load will insert: $('#home').load('tab3.php #table'), see docs here: api.jquery./load – christian314159 Commented Jul 3, 2014 at 7:39
2 This question appears to be off-topic because there have been no attempts made to write the code to do the functionality required. – War10ck Commented Jul 3, 2014 at 12:45

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

I would organise the code like this:

<body>
  <ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="tab1.php" id="m_blink" class="selected">Tab1</a></li>
    <li><a href="tab2.php" id="d_blink">Tab2</a></li>
    <li><a href="tab3.php" id="k_blink">Tab3</a></li>
  </ul>
</body>
<div id='home'></div>

JavaScript:

jQuery(function($) {
    var $current,
    timer;

    // change current tab based on given anchor
    function changeTab($element)
    {
        if (timer) {
            clearInterval(timer); // clear old timer
        }

        $current = $element;

        // set new timer
        timer = setInterval(function() {
            refreshCurrentTab();
        }, 5000);

        // and call immediately
        refreshCurrentTab();
    }

    function refreshCurrentTab()
    {
        $('#home').load($current.prop('href'));
    }

    $('#nav').on('click', 'a', function(e) {
        e.preventDefault();
        changeTab($(this));
    });

    changeTab($('#nav .selected')); // initial tab
});

I suggest you to use .data() method of jQuery to provide required extra info:

<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" data-url="tab1.php">Tab1</a></li>
    <li><a href="#" data-url="tab2.php">Tab2</a></li>
    <li><a href="#" data-url="tab3.php">Tab3</a></li>
</ul>

As you are using jQuery then better to use unobtrusive way of writing scripts like this:

$('#nav a').on('click', function(e){
     e.preventDefault();
     $('.active').removeClass('active'); // removes the active class from other link
     $(this).addClass('active'); // adds the active class to current cliked link
     setInterval(function(){
       $("#home").load($('.active').data('url'),{},function(){}); // populates the div with data-url of active class.
     }, 5000);
});
 $('#nav li:eq(0) a').trigger('click'); // triggers the first link's click.

Here's a very simple implementation of what you've requested. Contains ments, so you should be able to follow through it.

also, you can easily update this to auto-update using setInterval() function:

test.php single page demo

<?php

// Dummy Ajax Handler
if (!empty($_GET['load']))
{
    switch ($_GET['load'])
    {
        case 'tab1':
            echo "hello from tab 1";
            break;

        case 'tab2':
            echo "hello from tab 2";
            break;

        case 'tab3':
            echo "hello from tab 3";
            break;
    }
    exit();
}

?>

<script type="text/javascript" src="http://code.jquery./jquery-1.11.1.min.js"></script>
<script type="text/javascript">

// When Page Loads
$(function()
{
    // Load Tab 1 By Default
    $('#home').load('test.php?load=tab1');

    // Handle Nav Clicks
    $('#nav li a').click(function()
    {
        // Load Requested Tab
        $('#home').load('test.php?load=tab' + $(this).attr('data-tab'));
    });
});

</script>


<ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" data-tab="1" id="m_blink">Tab1</a></li>
    <li><a href="#" data-tab="2" id="d_blink">Tab2</a></li>
    <li><a href="#" data-tab="3" id="k_blink">Tab3</a></li>
</ul>

<div id="home"></div>

In html, I removed all javascript you have there. It is not good to mix html code with javascript code, it is less understandable.

<body>
<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="#" id="m_blink">Tab1</a></li>
<li><a href="#" id="d_blink">Tab2</a></li>
<li><a href="#" id="k_blink">Tab3</a></li>
</ul>
</body>
<div id='home'></div>

in javascript:

// First we need to make onload, that we removed from html.
// So I make a function and bind it to window.onload, which is almost same as
// <body onload="bla()">
// Everything inside the function will then happen after html is loaded 
// in browser, which is very important, because we cant manipulate with 
// elements that doesn't exist yet.

window.onload = function() {
            // there we need to put all code
        };

Let's make some switch now. Do everything without refresh first. We have 3 tabs, so we need to make new content inside of home:

// first we need to add event onclick to our <a>
$("#m_blink").onclick(function() { });
$("#d_blink").onclick(function() { });
$("#k_blink").onclick(function() { });

// now add what should happen when you click on <a>
$("#m_blink").onclick(function() {
    $("#home").load("tab1.php",{},function(){});
});

$("#d_blink").onclick(function() { 
    $("#home").load("tab2.php",{},function(){});
});

$("#k_blink").onclick(function() { 
    $("#home").load("tab3.php",{},function(){});
});

Now setInterval function is easy to write.

Two params, first is function you want to call, second is time in miliseconds.

setInterval(function(){
// do something
}, 5*1000);

So now first though is just do setInterval and put ajax inside, like that:

setInterval(function(){
    $("#home").load("tab1.php",{},function(){});
}, 5*1000);

But the problem is, once user switch the tab, then after 5 seconds, interval will load data from tab1 again! How we solve the problem, easy. We will make variable currentTable that will hold the state which table user see. And with each table switch, we will change currentTable. Also we will use currentTable in setInterval, so function will always do what we want.

So now from scratch again, plete js code:

window.onload = function() {

    var currentTable = "tab1.php"; // this is our initial state

    // now I define function reloadTab, because we do that all the time
    // and it is boring to write same code again and again
    function reloadTab() {
        $("#home").load(currentTable,{},function(){});
    }

    // onclicks - it is so easy now, we just change tab and call realoadTab
    $("#m_blink").onclick(function() {
        currentTable = "tab1.php";  
        reloadTab();
    });

    $("#m_blink").onclick(function() {
        currentTable = "tab2.php";  
        reloadTab();
    });

    $("#m_blink").onclick(function() {
        currentTable = "tab3.php";  
        reloadTab();
    });

    // setInterval - all we need is use reloadTab as first param
    setInterval(reloadTab, 5*1000);

}; // end of window.onload

So thats it, all javascript that you need is the last part.

tr something like this

javascript

$(function(){
    //adding click event
    $('#nav li a').click(function(){
        var url  =  this.id + '.php';
        $("#home").load(url,{},function(){
            // store your page id which is currently loaded with data attribute on #home element
            $("#home").data('current_page',this.id);
        });
    })

    // auto refresh function
    setInterval(function(){
        // retrieve page if which is currently loaded with data attribute on #home element
         var current_page = $("#home").data('current_page');
            var url=  current_page + '.php';
            $("#home").load(url);
    },5000);
});

html

<body>
    <ul id="nav" class="nav" style="font-size:12px;">
        <li><a href="#" id="tab1">Tab1</a></li>
        <li><a href="#" id="tab2">Tab2</a></li>
        <li><a href="#" id="tab3">Tab3</a></li>
    </ul>
    <div id='home' data-current_page='tab1'> </div>
</body>

EDITED [According to your code]

javascript

//default page
var page = 'tab1.php';
function fun1(){
    page = "tab1.php";
    $("#home").load("tab1.php",{},function(){});
}


function fun2(){
    page = "tab2.php";
    $("#home").load("tab2.php",{},function(){});
}

function fun3(){
    page = "tab3.php";
    $("#home").load("tab3.php",{},function(){});
}


function autorefresh(){
       setInterval(function(){
        $("#home").load(page,{},function(){});
    },5000);
}

html

<body onload="autorefresh()">
    <ul id="nav" class="nav" style="font-size:12px;">
        <li><a href="#" id="m_blink" onclick="fun1()">Tab1</a></li>
        <li><a href="#" id="d_blink" onclick="fun2()">Tab2</a></li>
        <li><a href="#" id="k_blink" onclick="fun3()">Tab3</a></li>

    </ul>
    <div id='home'></div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to refresh a particular div content when page is loading through ajax load() function - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)