2017-12-27 3 views
-1

Ich habe eine index.php Seite und eine info.php Seite. Die index.php lädt den Inhalt von info.php in ein div.Halten Sie div offen nach AJAX-Aufruf?

Index.php Datei:

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

Das Problem: wenn ich die div öffnen, ist es nach einem geschlossen einige Sekunden, da der AJAX-Aufruf den Inhalt ersetzt. Wie kann ich das verhindern? Ich dachte daran, eine Art Toggle zu machen, aber ich verstehe nicht, wie ich es erreichen könnte oder ob es das Problem lösen würde.

+0

_Es schließt sich automatisch nach ein paar Sekunden wegen des AJAX-Aufrufs._ Nein, die Ajax-Anfrage sollte nichts schließen. Stattdessen, wenn das div sich innerhalb '# data' befindet, ja, da alle DOMs überschrieben werden. –

+0

Du hast Recht. Wie könnte ich das lösen? – derrtyones

+0

Das 'div' ist innerhalb' # data' ?? Versuchen Sie bitte den entsprechenden HTML/PHP-Code hinzuzufügen. –

Antwort

0

Verwendung 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

Alle Inhalte dynamisch in einer Seite injiziert, wo nicht ein iframe Situation sollte die äußere HTML/HEAD/BODY-Wrapper nicht, weil es nicht, dass eine korrekte Abwicklung sein kann ...

Alle 5 Sekunden wird die Schnittstelle neu geladen und löscht alle vorhandenen Inhalte und ersetzt sie durch neuen Inhalt. Jeder Zustand wird nicht erhalten. nicht sicher, ob du das meinst; wenn nicht, bitte geben Sie mehr Input und ich kann weiter helfen.

Verwandte Themen