在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打开？

回答

相关问题