Rafraichir une div sans tout rafraichir

Sujet résolu

14 juin 2014 à 19:18:28

Bonsoir, voilà tout est dans le titre :x je bataille depuis 2 jours dessus à chercher à intégrer des codes en JQ et AJAX mais aucun résultats positifs, de plus je n'ai aucunes notions en AJAX et JQ.

J'ai essayé ce genre de truc:

<script>
function refresh_div()
{
var xhr_object = null;
if(window.XMLHttpRequest)
{ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
var method = 'POST';
var filename = 'index.php';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;
document.getElementById('bloc').innerHTML = tmp;
}
}
xhr_object.send(null);
setTimeout('refresh_div()', 5000);
}
</script>

et ça

<body onload='refresh_div();'>
<div id='bloc'></div>
</body>

mais ça ne fonctionne pas.

Ca serai pour actualiser les titres en cours de diffusion en haut à droite du site:

http://mickaelduprat.com/arkadio/

Merci d'avance.

-
Edité par Micka64 14 juin 2014 à 19:20:28

skuti

15 juin 2014 à 9:30:50

Si tu n'as aucune notion de jQuery (qui soit dit en passant n'est pas ce que tu utilise) et d'ajax, il y a des tutos pour t'éclairer sur OpenClassroom.

$2b||!$2b

Micka64

15 juin 2014 à 10:46:08

Je vais essayer e me renseigner mais le problème c'est que ces assez urgent et que je n'ai pas vraiment le temps de m'attarder sur des tutos :x mais merci de ta réponse.

Micka64

15 juin 2014 à 14:13:55

Depuis j'ai testé ce bout de code

var refresh = setInterval(function () {
                $.ajax({
                    url : "index.php",
                    success : function(data) {
                        $("#bloc").append(data);
                    }
                });
                }, 5000);

Mais voilà, le bloc se met à jours mais il se dédouble.

La par exemple tout les 5 secondes le bloc rajoute un bloc par dessus à l'infini.

Moi je veux que le bloc reste le même mais qu'il s'actualise :/ comment puis-je faire svp merci.

Micka64

15 juin 2014 à 16:46:06

C'est bon j'y suis arrivé ! Voilà je partage le code pour ceux qui en aurait besoin merci

<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 ()
{
$('#bloc').load('page.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds


</script>

Bonne continuation.

iThirzty

23 avril 2017 à 15:56:10

Merci !!!!,

Ça fonctionne mais pour ne pas voir le reste de la page quand elle se rafraichit, il faut faire une autre page avec le contenu du <div id="bloc"> et changer ceci :

<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 ()
{
$('#bloc').load('page.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
 
 
</script>

en ça :

<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 ()
{
$('#bloc').load('LE_NOM_DE_LA_PAGE_AVEC_LE_CONTENU_DU_DIV.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
 
 
</script>

Aloïs

Zirpoo

23 avril 2017 à 18:02:34

Y'a aussi le <iframe>

Autodidacte, j'essaye d'apprendre le pourquoi du comment :)

iThirzty

10 mai 2017 à 13:00:04

Zirpoo a écrit:

Y'a aussi le <iframe>

Oui mais le iframe est "dans sa bulles", je m'explique :

Sil il y a un lien vers une autre page, il va s'ouvrir dans le contenu du iframe alors qu'avec :

<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 ()
{
$('#bloc').load('LE_NOM_DE_LA_PAGE_AVEC_LE_CONTENU_DU_DIV.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
  
  
</script>

(serte plus compliqué), c'est un iframe qui se rafraîchit et qui ne possède pas les désavantages du iframe...

Aloïs