2017-12-27 263 views
-1

我有一個index.php頁面和一個info.php頁面。 index.php將info.php的內容加載到div中。在AJAX調用之後保持div打開?

index.php文件:

<html> 
<head> 
    <script type="text/javascript" src="includes/jquery-3.2.1.min.js"></script> 
</head> 
<body> 
    <div id="data"></div> 
    <script> 
    function loadDoc(){ 
    $("#data").load("info.php", function() { 
     //console.log("Load done."); 
    }); 

    }; 
    $(function(){loadDoc();}); 
    setInterval (loadDoc, 5000); 
    </script> 
</body> 
</html> 

info.php的:

<html> 
<head> 
<style> 
.box 
{ 
    border:1px solid #101010; 
    padding:20px; 
} 

#back 
{ 
    display:none; 
} 
</style> 
<script> 
$("#openBack").click(function(){ 
    $("#front").hide(); 
    $("#back").show(); 
}); 

$("#openFront").click(function(){ 
    $("#back").hide(); 
    $("#front").show(); 
}); 
</script> 
</head> 
<body> 
    <div id="front" class="box"> 
     front // <a href="#" id="openBack">open back</a> 
    </div> 
    <div id="back" class="box"> 
     back // <a href="#" id="openFront">open front</a> 
    </div> 
</body> 
</html> 

問題:當我打開DIV,之後一關閉幾秒鐘,因爲AJAX調用取代了內容。我怎樣才能防止這種情況發生?我想做一個切換,但我不明白如何實現它,或者如果它能解決問題。

+0

_it因爲AJAX調用會在幾秒鐘後自動關閉._否ajax請求不應該關閉任何東西..相反,如果div在'#data'裏面,是的,因爲所有DOM裏面都會被覆蓋。 –

+0

你是對的。我怎麼能解決這個問題? – derrtyones

+0

'div'在'#data'裏面?嘗試添加相關的HTML/PHP代碼。 –

回答

0

使用deferred.promise()

var dfd = jQuery.Deferred(); 
//pass defferred object in click or your function 
$("#openBack").click(function(dfd){ 
    $("#front").hide(); 
    //suppose this is your ajax call 
    setInterval(function(){ 
    //if success then resolve with ajax return data 
    dfd.resolve("ajax data"); 
    // if failed then reject 
    dfd.reject("if any data need pass"); 
    //based on hide and show 
    $("#back").show(); 
    }, 3000); 

});

See the documentation of promise jquery

1

任何內容動態地注入頁面,在這裏不是一個iframe的情況下,不應有外部HTML/HEAD/BODY包裝,因爲它可能無法正確處理該...

每隔5秒鐘,界面將重新加載並清除所有現有內容,並用新內容替換它。任何狀態都不會被保留。不知道這是你的意思;如果沒有,請提供更多的意見,我可以進一步提供幫助。

相關問題