web-dev-qa-db-fra.com

Recharger un DIV sans recharger la page entière

J'ai une balise Div qui a un php include pour remplir cette div avec des informations ce que je veux faire est de faire en sorte que la page soit appelée toutes les 15 secondes afin de pouvoir mettre à jour les informations sans avoir à recharger la page Web entière. J'ai essayé de le faire avec JavaScript/jQuery et je n'arrive pas à le faire fonctionner

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
</script>

<div class="View"><?php include 'Small.php'; ?></div>

c'est ce que j'ai après avoir cherché, et ce qui se passe, c'est qu'il charge le Small.php mais il ne le rafraîchit pas ou ne met pas à jour les informations toutes les 15 secondes.

s'il vous plaît aidez!

Je devrais ajouter tous mes tableaux php qui devraient apparaître sont tous exécutés dans Small.php et la page dans laquelle je l'inclus est juste pour qu'elle soit isolée.

EDIT: Ce que personne n'a remarqué, c'est que mon premier script référençant jQuery n'avait pas de balise de fermeture, et cela cassait mon deuxième script. après avoir ajouté une balise de fermeture appropriée, le script fonctionnait enfin, mais le fadeIn ne s'affiche pas correctement sans utiliser d'abord un fadeOut.

javascriptphpjqueryhtmlajax
7
Fate Averie

Votre code fonctionne, mais pas le fadeIn, car il est déjà visible. Je pense que l'effet que vous souhaitez obtenir est: fadeOut → load → fadeIn:

var auto_refresh = setInterval(function () {
    $('.View').fadeOut('slow', function() {
        $(this).load('/echo/json/', function() {
            $(this).fadeIn('slow');
        });
    });
}, 15000); // refresh every 15000 milliseconds

Essayez-le ici: http://jsfiddle.net/kelunik/3qfNn/1/

Remarque supplémentaire: Comme Khanh TO l'a mentionné, vous devrez peut-être vous débarrasser du cache interne du navigateur. Vous pouvez le faire en utilisant $.ajax Et $.ajaxSetup ({ cache: false }); ou le piratage aléatoire, a-t-il mentionné.

9
kelunik

essaye ça

<script type="text/javascript">
window.onload = function(){


var auto_refresh = setInterval(
function ()
{
$('.View').html('');
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds

}
</script>
7
Shadow

Votre html n'est pas mis à jour toutes les 15 secondes. La cause pourrait être la mise en cache du navigateur. Ajoutez Math.random() pour éviter la mise en cache du navigateur, et il est préférable d'attendre que le DOM soit complètement chargé comme indiqué par @shadow. Mais je pense que la cause principale est la mise en cache 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function(){
    var auto_refresh = setInterval(
    function ()
    {
       $('.View').load('Small.php?' + Math.random()).fadeIn("slow");
    }, 15000); // refresh every 15000 milliseconds
});
</script>
1
Khanh TO

Le code que vous utilisez va également inclure un effet de fondu. Est-ce ce que vous souhaitez réaliser? Sinon, il pourrait être plus judicieux d'ajouter simplement le INSIDE "Small.php" suivant.

<meta http-equiv="refresh" content="15" >

Cela ajoute un rafraîchissement toutes les 15 secondes à la page small.php, ce qui devrait signifier si elle est appelée par PHP dans une autre page, seul ce "cadre" se rechargera.

Faites-nous savoir si cela a fonctionné/résolu votre problème!?

-Brad

0
Brad Andrews
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />

<div class="View"><?php include 'Small.php'; ?></div>

<script type="text/javascript">
$(document).ready(function() {
$('.View').load('Small.php');
var auto_refresh = setInterval(
    function ()
    {
        $('.View').load('Small.php').fadeIn("slow");
    }, 15000); // refresh every 15000 milliseconds
        $.ajaxSetup({ cache: true });
    });
</script>
0
user2663434