2017-12-27 29 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秒钟,界面将重新加载并清除所有现有内容,并用新内容替换它。任何状态都不会被保留。不知道这是你的意思;如果没有,请提供更多的意见,我可以进一步提供帮助。