Actualiser un div par onclick?

[tryan]

Bonjour,

Est il possible d'actualiser un div par onclick sans passer par Ajax ni Jquery?
Par exemple :

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

Merci

 

[Blount]

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

Ton code est étrange, je ferai plus ceci :

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

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

 

[tryan]

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]

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]

soit une div et un lien :

<div id="change">bla bla bla</div>
<a onclick="getContent('change'); return false;">refresh</a>

soit la fonction javascript :

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

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

<span class="syntaxdefault"><?php<br />    echo </span><span class="syntaxstring">'autre bla bla bla'</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">?></span>

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]

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]

Ta notion de rafraichir de doit pas être la même que chez moi.
Tu veux remettre le même contenu dans le div ?

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

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]

Un exemple :

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

Ok je comprend mieux (enfin je pense)

Dans ta page :

<span class="syntaxhtml"><span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">script type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text/javascript"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    setTimeout</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">action</span><span class="syntaxkeyword">(),</span><span class="syntaxdefault">3000</span><span class="syntaxkeyword">);<br /><br /></span><span class="syntaxdefault">    function action</span><span class="syntaxkeyword">()</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">        document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">getElementById</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'toto'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">innerHTML </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxstring">'untruc'</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">}<br /></span><span class="syntaxdefault"></script></span></span>

 

[Blount]

Pour reprendre mon code et ton exemple d'heure :

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

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]

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 :

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]

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

Tu peux le faire en iframe :

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

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

 

[tryan]

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

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]

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

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]

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?

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