Actualiser un div par onclick?

tryan · 28 Juin 2012

Bonjour,

Est il possible d'actualiser un div par onclick sans passer par Ajax ni Jquery?
Par exemple :
Code:
<script>
	function refresh(){
	setTimeout("document.getElementById('toto')XXXXX",3000);
	}
</script>
<a onclick="refresh();">refresh</a>
<div id="toto">azerty</div>
Merci

Blount · 28 Juin 2012

C'est possible si ton contenu est déjà dans la page.

Ton code est étrange, je ferai plus ceci :

PHP:

<script type="text/javascript"> function refresh() { setTimeout(function () { document.getElementById('toto').innerHTML = "XXXXX"; } ,3000); } </script> <a onclick="refresh(); return false;">refresh</a> <div id="toto">azerty</div>

À tester. Je ne sais plus s'il est possible de mettre la fonction directement en paramètre.

tryan · 28 Juin 2012

Merci Blount pour ta réponse ,

Le hic, c'est que je ne cherche à changer le contenu de ma div, je veux seulement l'actualiser.
Je sais que via Ajax ou Jquery ça se fait sans problème mais jute en JS ...je ne trouve pas solution.

Blount · 28 Juin 2012

Ajax n'est rien d'autre que l'utilisation de XMLHttpRequest. Les lib permettent juste de fournir un moyen plus simple et facile à mettre en place (cross browser notamment).
Tu peux peut-être trouver une toute petite lib pour te permettre de faire des requêtes de faire des requêtes XMLHttpRequest sans te soucier de la compatibilité entre navigateur sans forcément devoir utiliser des mastodontes.

zeb · 28 Juin 2012

soit une div et un lien :
Code:
<div id="change">bla bla bla</div>
<a onclick="getContent('change'); return false;">refresh</a>
soit la fonction javascript :

PHP:

function getContent(x){ var xhr=null; if(window.XMLHttpRequest){xhr=new XMLHttpRequest();} else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");} xhr.open("GET","http://www.example.com/ajax/getContent.php",false); xhr.send(null); obj=document.getElementById(x); obj.innerHTML =xhr.responseText; } 

soit le script php situé dans le dossier www/ajax/getContent.php

PHP:

<?php echo 'autre bla bla bla'; ?>

un clic sur le lien refresh entraine un appel à la fonction javascript getContent() qui prendra en paramètre l'id de la div ciblée. Cette fonction instanciera un objet ajax (compatible IE et gecko) qui lui effectuera une requête http sur le script getContent.php situé dans le dossier "ajax". Ce dernier fait un echo d'un autre texte qui est envoyé en retour a l'objet ajax qui lui via innerhtml modifie le contenu de la div pour la boucle soit bouclée.

Si tu veux pas d'ajax c'est la solution de mon confrère ci dessus.

tryan · 29 Juin 2012

Salut,

Merci à vous 2 mais ce n'est pas ce que je cherche à faire. Dans les 2 solutions données, l'une remplace le contenu du div en js simple et l'autre actualise le contenu d'un fichier par Ajax. Je ne cherche pas à faire appel à un fichier ou a changer le contenu de la div mais juste à la rafraîchir... comme si j'actualisais la page sauf que la c'est un div. Je sais qu'on peut le faire en Ajax ou avec Jquery mais moi je cherche un moyen plus simple, plus court juste avec du JS et rien de plus, un peut comme le code de Blount sans pour autant changer le contenu de la div.

Du coup, possible ou pas ?

Merci

Blount · 29 Juin 2012

Ta notion de rafraichir de doit pas être la même que chez moi.
Tu veux remettre le même contenu dans le div ?
Code:
<script type="text/javascript">
 function refresh() {
 setTimeout(function () {
 document.getElementById('toto').innerHTML = document.getElementById('toto').innerHTML;
 } ,3000);
 }
 </script>
 <a onclick="refresh(); return false;">refresh</a>
 <div id="toto">azerty</div>
Je ne vois pas du tout l'intérêt, mais bon, c'est la dernière réponse que je peux te donner.
Je ne vois pas du tout ce que tu cherches à faire.

zeb · 29 Juin 2012

Rafraichir un contenu c'est le réécrire avec le même contenu qu'au départ.
Rafraichir avec un navigateur c'est recharger la même page Cette seconde vision du problème ne permet pas de s'appliquer qu'a une partie du contenu saut ci celui ci est dans une frame ce qui reviens a rafraichir la frame contenu dans la div.
Maintenant tu ne dis rien du pourquoi de ce rafraichissement car dans l'absolu écrire X a la place de X reviens a ne rien faire. Il serait peut être bien d'expliquer le pourquoi alors car là le code présenté, ajax ou pas, répond au cahier des charges "réécrire le contenu d'une div", et je ne voie pas trop de moyen différent pour agir sur le DOM.

tryan · 29 Juin 2012

Un exemple :
Code:
<div id="toto">
<script>
var d=new Date();
var t=d.toLocaleTimeString();
document.write(t);
</script>
</div>
Si je lance le refresh, l'heure ne s'actualise pas sauf si elle se trouve à l'intérieure de la fonction refresh().
Sur le dernier code de Blount, si il est 11:43:25, le refresh se fait mais comme on demande de ré écrire ce que contient le div, l'heure reste la même.

Donc, si je veux rafraîchir la div, donc l'heure, sans passer par Ajax, ni Jquery et sans passer le code qui affiche l'heure dans la fonction refresh(), cela est t'il possible?

Note : ceci est juste un exemple et je ne sais plus trop pour quelle raison je me casse la tête la-dessus..disons que c'est pour ma culture perso. :mrgreen: .

zeb · 29 Juin 2012

Ok je comprend mieux (enfin je pense)

Dans ta page :

PHP:

<script type="text/javascript"> setTimeout(action(),3000); function action() { document.getElementById('toto').innerHTML = 'untruc'; } </script>

Blount · 29 Juin 2012

Pour reprendre mon code et ton exemple d'heure :

PHP:

 <a onclick="lunchRefresh(); return false;">refresh</a> <div id="toto">azerty DATE_HEURE</div> <script type="text/javascript"> var origin = document.getElementById('toto').innerHTML; var refresh = function () { var d = new Date(); document.getElementById('toto').innerHTML = origin.replace("DATE_HEURE", d.toLocaleTimeString()); }; var lunchRefresh = function () { setTimeout(refresh, 3000); }; refresh(); </script>

Après si l'utilisateur n'a pas activé JavaScript, il verra DATE_HEURE. Mais on peut palier à ce problème en mettant une balise "span" et la date courante en PHP.

tryan · 29 Juin 2012

Je sens que je vais me faire crier dessus...

@zeb : ton code remplace le contenu du div.
@Blount : le javascript est incorporé directement dans la fonction.

Je prends un second exemple, histoire de bien me faire comprendre :
Code:
function inc(){
 setInterval(function () {
	alert('ok');
 /*?????????????*/
 } ,3000);
}
<a onclick="refresh(); return false;">refresh</a>
<div id="toto">
<?php
include('teste.php');
?>
</div>
Dans cet exemple, j'ai une alerte toute les 3 secondes, donc la fonction est bien lancé sur le onclick.
Supposons que le contenu du fichier "teste.php" soit modifié alors que la fonction est lancé. Comment afficher dans le div le contenu modifié sans passer par Ajax ou Jquery?

Blount · 29 Juin 2012

Il faut nous expliquer le problème dès le début, ça évite de tourner en rond.

Tu peux le faire en iframe :

PHP:

 <iframe id="frame" src="teste.php" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe> <script type="text/javascript"> var refresh = function () { document.getElementById("frame").src = document.getElementById("frame").src; }; setInterval(refresh, 3000); </script> 

Je n'ai pas testé.
C'est tout de même moi sexy que XmlHTTPRequest.

tryan · 29 Juin 2012

Il faut nous expliquer le problème dès le début, ça évite de tourner en rond.
Cliquez pour agrandir...

Pas évident quand on cherche une fonction plutôt généraliste uniquement en JS :wink: .

J'ai expliqué que je cherchais le moyen de rafraîchir un div uniquement via Javascript et quelque soit la réponse apporté elle est toujours en fonction d'un élément bien précis.
Si je prend ton premier code, il remplace le contenu de la div.
Le second ré affiche le contenu de la div.
Le troisième agit par apport à une fonction inclue dans la fonction elle même.
Le dernier agit sur une iframe.

Quelque soit le code, il agit toujours sur un élément (code, fichier, etc...) mais jamais sur la div elle même.

zeb · 29 Juin 2012

tryan a dit:

Quelque soit le code, il agit toujours sur un élément (code, fichier, etc...) mais jamais sur la div elle même.
Cliquez pour agrandir...

Doit être un problème de langage je comprend pas bien. Une div c'est du code et concrètement tu souhaite rafraichir un contenu => écrire un contenu c'est frocement a l'intérieur de quelque chose (div span frame ou autre ...)

plus généralement refresh('truc') n'existe pas il faut forcement écrire("qque chose") dans un machin.

Le truc que tu veux tu l'a pas vue qque part qu'on puisse voir ?

spout · 29 Juin 2012

tryan a dit:

Supposons que le contenu du fichier "teste.php" soit modifié alors que la fonction est lancé. Comment afficher dans le div le contenu modifié sans passer par Ajax ou Jquery?
Cliquez pour agrandir...

Je ne vois pas ce que tu pourrais faire d'autre que AJAX ? Hormis les vieilles techniques avec iframes ...

Similar Threads - Actualiser div onclick	Forum	Date
Actualiser le contenu d'un div chaque 3 secondes	Développement d'un site Web ou d'une appli mobile	14 Septembre 2012
Actualiser multiples div en ajax ?	Développement d'un site Web ou d'une appli mobile	8 Février 2011
Index Google difficile à réactualiser	Problèmes de référencement spécifiques à vos sites	22 Novembre 2018
google search me dit d'actualiser wordpress	Problèmes de référencement spécifiques à vos sites	14 Février 2017
Google met beaucoup de temps à actualiser les données de mon site	Problèmes de référencement spécifiques à vos sites	9 Septembre 2014
[Google news] Actualiser un article ?	Référencement Google	26 Avril 2014
Actualiser base de donnée sans actualiser la page	Développement d'un site Web ou d'une appli mobile	19 Juin 2013
[JS] Actualiser options <select> après choix d'un autre <select>	Développement d'un site Web ou d'une appli mobile	28 Juin 2012
Actualiser ses pages	Débuter en référencement	1 Décembre 2011
Divers problèmes de Google	Crawl et indexation Google, sitemaps	29 Novembre 2020