Actualiser un div par onclick?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par tryan, 28 Juin 2012.

  1. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    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
     
  2. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    C'est possible si ton contenu est déjà dans la page.

    Ton code est étrange, je ferai plus ceci :
    PHP:
    <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.
     
  3. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    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.
     
  4. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    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.
     
  5. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 187
    J'aime reçus:
    1
    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:
    <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
    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.
     
  6. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    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
     
  7. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    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.
     
  8. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 187
    J'aime reçus:
    1
    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.
     
  9. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    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: .
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 187
    J'aime reçus:
    1
    Ok je comprend mieux (enfin je pense)

    Dans ta page :
    PHP:
    <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>
     
  11. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    Pour reprendre mon code et ton exemple d'heure :
    PHP:
    <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.
     
  12. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    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?
     
  13. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    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:
    <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.
     
  14. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    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.
     
  15. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 187
    J'aime reçus:
    1
    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 ?
     
  16. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 119
    J'aime reçus:
    317
    Je ne vois pas ce que tu pourrais faire d'autre que AJAX ? Hormis les vieilles techniques avec iframes ...
     
Chargement...
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