在AJAX調用之後保持div打開？

-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調用取代了內容。我怎樣才能防止這種情況發生？我想做一個切換，但我不明白如何實現它，或者如果它能解決問題。

來源

2017-12-27 derrtyones

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

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

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

使用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

來源

2017-12-27 18:56:34

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

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

來源

2017-12-27 19:25:09

在AJAX調用之後保持div打開？

回答

相關問題