Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
415 views
in Technique[技术] by (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...