CMS Automne
http://www.automne-cms.org/forum/

[résolu] Rafraichir le contenu d'une rangée en direct (Ajax)
http://www.automne-cms.org/forum/viewtopic.php?f=2&t=2660		 Page 1 sur 2
Auteur:  Fouineux [ Jeu Jan 03, 2013 11:57 am ]
Sujet du message:  [résolu] Rafraichir le contenu d'une rangée en direct (Ajax)
Bonjour,

J'ai actuellement une rangée qui va lister les dernières news d'une certaines catégorie. Seulement j'aimerai que cette rangée soit rafraîchie en direct, afin que l'utilisateur n'ai pas à faire F5 en continu.

Je pensais donc utiliser Ajax pour ne rafraîchir que ma rangée qui liste mes news, mais là...je bloque ^^

Normalement mon script Ajax est censé appeler une page Php, mais pour le coup ce serait une page externe à automne, donc je ne vois pas quoi mettre dedans...

Quelqu'un aurait-il une piste?
Auteur:  atm4u [ Jeu Jan 03, 2013 9:13 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Salut,
La démo a une page qui fonctionne en ajax de mémoire.
Certes elle ne le fait pas de façon automatique mais avec un peu de code cela devrait être simple.
Il existe un tag atm-xml qui permet de récupérer une partie isolée de code dans la page, comme des actu par exemple.
Le truc c'est qu'il te faut l'adapter à ton code :wink:
Auteur:  Fouineux [ Ven Jan 04, 2013 9:13 am ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Merci de ta réponse!!

Je ne trouve pas sur la démo de partie qui ressemblerait à ce que je veux faire. De plus il semblerait qu'avec les comptes de test on ne puisse pas voir le fonctionnement des rangées etc (je parle d ela démo officielle hein ^^).

Je vais creuser la piste des tag atm-xml.

Si je trouve une solution, je la posterai ici.
Auteur:  Frank [ Ven Jan 04, 2013 10:36 am ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Je recopie ici l'exemple utilisé sur la démo pour la recherche d'actualités

Code :
<row>
   <block module="pnews" id="newssearch">
      <div class="pnews">
         <script type="text/javascript">
            var pageURL = '{page:self:url}';
         </script>
         <form action="{page:self:url}" method="get" class="pnews-form">
            <label for="pnews-keyword">Mots Cl&eacute;s : </label><input type="text" class="input-text pnews-keyword search" id="pnews-keyword" name="keyword" value="{request:string:keyword}" />
            <input type="submit" class="button pnews-submit" name="submit" value="ok" />
            <img class="pnews-loading hide" src="img/demo/common/loading.gif" alt="Chargement ..." />
         </form>
      </div>
      <div class="pnews">
         <atm-xml what="{request:string:out} == 'xml'">
            <atm-search what="{Actualites}" name="newsresult">
               <atm-search-param search="newsresult" type="keywords" value="{request:string:keyword}" mandatory="false" />
               <atm-search-param search="newsresult" type="item" value="{request:int:item}" mandatory="false" />
               <atm-search-limit search="newsresult" value="10" />
               <atm-search-page search="newsresult" value="{request:int:page}" />
               <atm-search-order search="newsresult" type="publication date start" direction="desc" />
               <atm-result search="newsresult">
                  <atm-if what="{firstresult}">
                     <atm-start-tag tag="div" class="pnews-results" />
                  </atm-if>
                  <atm-if what="{firstresult} &amp;&amp; !{request:int:item}">
                     <div class="pnews-results-count">{maxresults} r&eacute;sultat(s) pour votre recherche.</div>
                  </atm-if>
                  <div class="pnews-result">
                     <h2><a href="{page:self:url}?item={Actualites:id}" title="{Actualites:label}">{Actualites:label}</a></h2>
                     <p class="date">{Actualites:formatedDateStart|d/m/Y}</p>
                     <atm-if what="{Actualites:Media:id}">
                        <div class="right">
                           <atm-if name="oembed" what="{Actualites:Media:Media_externe:hasValue}">
                              <div class="pmedia-oembed">{Actualites:Media:Media_externe:html|320,250}</div>
                              <atm-if what="{Actualites:Media:Media_externe:type} != 'link' &amp;&amp; ({Actualites:Media:Media_externe:authorName} || {Actualites:Media:Media_externe:title})">
                                 <div class="pmedia-oembed-legend">
                                    <atm-if name="oembedTitle" what="{Actualites:Media:Media_externe:url} &amp;&amp; {Actualites:Media:Media_externe:title}">
                                       <a href="{Actualites:Media:Media_externe:url}" target="_blank">{Actualites:Media:Media_externe:title}</a>
                                    </atm-if>
                                    <atm-else for="oembedTitle" what="{Actualites:Media:Media_externe:title}">
                                       {Actualites:Media:Media_externe:title}
                                    </atm-else>
                                    <atm-if what="{Actualites:Media:Media_externe:authorName} &amp;&amp; {Actualites:Media:Media_externe:title}"> - </atm-if>
                                    <atm-if name="oembedAuthor" what="{Actualites:Media:Media_externe:authorName} &amp;&amp; {Actualites:Media:Media_externe:authorUrl}">
                                       <a href="{Actualites:Media:Media_externe:authorUrl}" target="_blank">{Actualites:Media:Media_externe:authorName}</a>
                                    </atm-if>
                                    <atm-else for="oembedAuthor" what="{Actualites:Media:Media_externe:authorName}">
                                       {Actualites:Media:Media_externe:authorName}
                                    </atm-else>
                                 </div>
                              </atm-if>
                           </atm-if>
                           <atm-else for="oembed">
                              <atm-if what="{Actualites:Media:Fichier:filename} &amp;&amp; {Actualites:Media:Fichier:fileExtension} &amp;&amp; {Actualites:Media:Fichier:fileExtension} != 'flv' &amp;&amp; {Actualites:Media:Fichier:fileExtension} != 'mp3' &amp;&amp; {Actualites:Media:Fichier:fileExtension} != 'jpg' &amp;&amp; {Actualites:Media:Fichier:fileExtension} != 'gif' &amp;&amp; {Actualites:Media:Fichier:fileExtension} != 'png'">
                                 <a href="{Actualites:Media:Fichier:file}" target="_blank" title="T&eacute;l&eacute;charger le document '{Actualites:Media:label}' ({Actualites:Media:Fichier:fileExtension} - {Actualites:Media:Fichier:fileSize}Mo)"><atm-if what="{Actualites:Media:Fichier:fileIcon}"><img src="{Actualites:Media:Fichier:fileIcon}" alt="Fichier {Actualites:Media:Fichier:fileExtension}" /></atm-if> {Actualites:Media:label}</a>
                                 <atm-if what="{Actualites:Media:Fichier:thumbname}">
                                    <img src="{Actualites:Media:Fichier:thumb|200}" alt="{Actualites:Media:label}" />
                                 </atm-if>
                              </atm-if>
                              <atm-if what="{Actualites:Media:Fichier:fileExtension} == 'flv'">
                                 <atm-if what="{Actualites:Media:Fichier:thumbname}">
                                    <script type="text/javascript">
                                       swfobject.embedSWF('automne/playerflv/player_flv.swf', 'media-{Actualites:Media:id}', '320', '200', '9.0.0', 'automne/swfobject/expressInstall.swf', {flv:'{Actualites:Media:Fichier:file}', configxml:'automne/playerflv/config_playerflv.xml', startimage:'{Actualites:Media:Fichier:thumb}'}, {allowfullscreen:true, wmode:'transparent'}, {'style':'float:right;'});
                                    </script>
                                 </atm-if>
                                 <atm-if what="!{Actualites:Media:Fichier:thumbname}">
                                    <script type="text/javascript">
                                       swfobject.embedSWF('automne/playerflv/player_flv.swf', 'media-{Actualites:Media:id}', '320', '200', '9.0.0', 'automne/swfobject/expressInstall.swf', {flv:'{Actualites:Media:Fichier:file}', configxml:'automne/playerflv/config_playerflv.xml'}, {allowfullscreen:true, wmode:'transparent'}, {'style':'float:right;'});
                                    </script>
                                 </atm-if>
                                 <div id="media-{Actualites:Media:id}" class="pmedia-video" style="width:320px;height:200px;">
                                    <p><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                                 </div>
                              </atm-if>
                              <atm-if what="{Actualites:Media:Fichier:fileExtension} == 'mp3'">
                                 <script type="text/javascript">
                                    swfobject.embedSWF('automne/playermp3/player_mp3.swf', 'media-{Actualites:Media:id}', '200', '20', '9.0.0', 'automne/swfobject/expressInstall.swf', {mp3:'{Actualites:Media:Fichier:file}', configxml:'automne/playermp3/config_playermp3.xml'}, {wmode:'transparent'}, {'style':'float:right;'});
                                 </script>
                                 <div id="media-{Actualites:Media:id}" class="pmedia-audio" style="width:320px;height:20px;">
                                    <p><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                                 </div>
                                 <atm-if what="{Actualites:Media:Fichier:thumbname}">
                                    <img src="{Actualites:Media:Fichier:thumb|200}" alt="{Actualites:Media:label}" />
                                 </atm-if>
                              </atm-if>
                              <atm-if what="{Actualites:Media:Fichier:fileExtension} == 'jpg' || {Actualites:Media:Fichier:fileExtension} == 'gif' || {Actualites:Media:Fichier:fileExtension} == 'png'">
                                 <atm-if what="{Actualites:Media:Fichier:thumbname}">
                                    <a href="{Actualites:Media:Fichier:file}" rel="atm-enlarge" target="_blank" title="Illustration '{Actualites:Media:label}' ({Actualites:Media:Fichier:fileExtension} - {Actualites:Media:Fichier:fileSize}Mo)"><img src="{Actualites:Media:Fichier:thumb|200}" alt="{Actualites:Media:label}" /></a>
                                 </atm-if>
                                 <atm-if what="!{Actualites:Media:Fichier:thumbname}">
                                    <a href="{Actualites:Media:Fichier:file}" rel="atm-enlarge" target="_blank" title="Illustration '{Actualites:Media:label}' ({Actualites:Media:Fichier:fileExtension} - {Actualites:Media:Fichier:fileSize}Mo)"><img src="{Actualites:Media:Fichier:file|200}" alt="{Actualites:Media:label}" /></a>
                                 </atm-if>
                              </atm-if>
                           </atm-else>
                        </div>
                     </atm-if>
                     <atm-if what="{request:int:item} == {Actualites:id}">
                        {Actualites:Introduction:htmlvalue}
                        {Actualites:Texte:htmlvalue}
                        <p><a href="{page:self:url}">Retour aux actualités</a></p>
                     </atm-if>
                     <atm-if what="!{request:int:item}">
                        {Actualites:Introduction:htmlvalue}
                        <a href="{page:self:url}?item={Actualites:id}" title="Lire la suite de l'actualité '{Actualites:label}'">
                           Lire la suite ...
                        </a>
                     </atm-if>
                     <div class="clear"></div>
                  </div>
                  <atm-if what="{resultcount}>10 &amp;&amp; {lastresult} &amp;&amp; !{request:int:item}">
                     <div class="pnews-pages">
                        <atm-function function="pages" maxpages="{maxpages}" currentpage="{currentpage}" displayedpage="5">
                           <pages><a href="{page:self:url}?keyword={request:string:keyword}&amp;page={n}">{n}</a> </pages>
                           <currentpage><strong>{n}</strong> </currentpage>
                           <previous><a href="{page:self:url}?keyword={request:string:keyword}&amp;page={n}">Page pr&eacute;c&eacute;dente</a> </previous>
                           <next><a href="{page:self:url}?keyword={request:string:keyword}&amp;page={n}">Page suivante</a> </next>
                        </atm-function>
                     </div>
                  </atm-if>
                  <atm-if what="{lastresult}">
                     <atm-end-tag tag="div" />
                  </atm-if>
               </atm-result>
               <atm-noresult search="newsresult">
                  <div class="pnews-results">Aucun r&eacute;sultat trouv&eacute; pour votre recherche ...</div>
               </atm-noresult>
            </atm-search>
         </atm-xml>
      </div>
   </block>   
</row>


Et le fichier /js/modules/pnews/demo.js

Code :
$(document).ready(function(){
   var search = function  () {
      if ($('#pnews-keyword').val() && $('#pnews-keyword').val().length < 3) {
         return false;
      }
      $.ajax({
         type:       "GET",
         url:       pageURL,
         data:       'out=xml&keyword=' + $('#pnews-keyword').val(),
         success:    displaySearch
      });
      return true;
   }
   var getPage = function  (e) {
      var href = $(e.target).is('a') ? $(e.target).attr("href") : $(e.target).parent('a').attr("href");
      if (href) {
         e.preventDefault();
         $.ajax({
            type:       "GET",
            url:       href,
            data:       'out=xml',
            success:    displaySearch
         });
         return false;
      }
      return true;
   }
   var displaySearch = function  (xmlcontent) {
      if (xmlcontent.getElementsByTagName('data').length > 0) {
         $('.pnews-results').replaceWith(xmlcontent.getElementsByTagName('data').item(0).firstChild.nodeValue);
         if ($('.pnews-pages').length > 0) {
            $('.pnews-pages a').click(getPage);
         }
         //colorbox on results
         var images = $("a[rel='atm-enlarge']");
         if (images.length > 0) {
            images.colorbox({
               photo: true
            });
         }
      }
      return true;
   }
   $(".pnews-loading").ajaxStart(function(){
      $(this).show();
   });
   $(".pnews-loading").ajaxStop(function(){
      $(this).hide();
   });
   $('.pnews-submit').hide();
   $('#pnews-keyword').keyup(search);
   if ($('.pnews-pages').length > 0) {
      $('.pnews-pages a').click(getPage);
   }
});
Auteur:  wind [ Mar Jan 15, 2013 4:02 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Salut,
jai installé ce moteur avec ajax
a première vu ça fonctionne car firebug me montre la sortie de la requête mais l'affichage ne s'actualise pas pourtant le moteur marche car si je fait entré, j'ai un résultat correct...
Quelqu'un as t'il une idée du soucis ?
Auteur:  jpg [ Mer Jan 16, 2013 10:04 am ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Salut wind,

J'ai pas encore faite ce genre de truc difficile de t'aider, et tu donnes pas beaucoup de détail :)
C'est possible de voir ta page en ligne ?
a++
Auteur:  wind [ Mer Jan 16, 2013 1:23 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Salut jpg, au terme d'un bataille de nombreuses heures, j'ai trouver la raison;
dans mon cas, ma rangee (avec ajax) ne peux pas fonctionner si j'ai une autre ranger de module dans un autre bloc de contenu sur cette même page...

la ca fonctionne: http://www.genea-logique.fr/web/genea/1 ... linois.php
la ca na fonctionne pas: http://www.genea-logique.fr/web/genea/4-accueil.php

la seul chose que j'ai trouver pour que ca fonctionne dans le 2eme lien est de vider la colonnes de droite...
si tu as la raison, je veux bien comprendre...

merci d'avance !
Auteur:  jpg [ Mer Jan 16, 2013 2:21 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
2 choses :

1) http://www.genea-logique.fr/web/genea/10-annonces-malinois.php?out=xml&keyword=intro ok
http://www.genea-logique.fr/web/genea/4-accueil.php?out=xml&keyword=intro
tu as une erreur en ligne 2 ton xml est pas valide sur ce fichier : error on line 2 at column 6: XML declaration allowed only at the start of the document en clair tu as un espace avant ta ligne <?xml version="1.0" encoding="utf-8"?>

2) tu appelles 2 fois ton fichiers pnews-demo.js dans ton head
=> une fois appel direct avec <script type="text/javascript" src="js/modules/pnews/pnews-demo.js"></script>
et une autre fois avec le manager enlève le 1er appel
Auteur:  wind [ Mer Jan 16, 2013 4:31 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
alors pour pnews.js, le 1er a appel ne commence pas par un / et du coup il ne fonctionne pas...
j'ai bien vu ce vue tu dais mais je n'ai jamais trouver ou faire la modif alors j'ai ajouter le 2eme...

si non, le 1er appel vient de <atm-meta-tags />

ensuite je ne comprend pas l'erreur ? je dois regarder quoi ?
comment trouve tu cette erreur ?
Auteur:  wind [ Mer Jan 16, 2013 4:45 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Alors j'ai supprimer la ligne <atm-meta-tags /> qui a supprimer le 1er
ensuite je me suis retrouver avec 2 fois le lien dans <atm-js-tags > alors j'ai supprimer celui qui est en dur dans le model de page...
désormais il ni en a plus quand on affiche le code source de l'accueil...
par contre je ne trouve pas l'erreur que tu site, est elle dans le rangée ou le model de page Template ?
je n'arrive pas a la reproduire !!!
Auteur:  wind [ Mer Jan 16, 2013 5:04 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Serait il possible que le simple doctype <!DOCTYPE html> pose des soucis ?
Auteur:  jpg [ Mer Jan 16, 2013 5:05 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
l'erreur tu peux la voir en cliquant sur :
http://www.genea-logique.fr/web/genea/4-accueil.php?out=xml&keyword=intro
mais pas avec ie

ou regarde le code source le fichier xml généré doit commencé par <?xml version="1.0" encoding="utf-8"?>

dans ton cas il y a une ligne vide avant => d'ou l'erreur
regarde dans ta rangée vire toute les ligne vide ou espace avant le xml
Auteur:  atm4u [ Mer Jan 16, 2013 5:14 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Salut,
Pas de problème avec le doctype qu'il soit html5 ou xhtml.
Attention si tu supprimes <atm-meta-tags /> tu ne pourras plus éditer ta page.

Ton soucis vient du formulaire automne qui parasite ta sortie xml.
Les mêmes éléments sur une page sans formulaire (dans ton cas formulaire de connexion) ne posent aucun problème.
A mon sens c'est un bug du CMS
Auteur:  wind [ Mer Jan 16, 2013 5:24 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Code :

<?xml version="1.0" encoding="utf-8"?>
<response xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
   <error>0</error>
   <scripts>2</scripts>
   <data><![CDATA[<div class="pnews-results">
                     <span class="red right">&nbsp;1 Annonce(s) trouvée(s).</span>
                     
               <div class="pnews-result annonce">
               
                     <h4>titre</h4>
                     <p>
                     voici mon intro !
                     <br />
                     <a href="http://www.genea-logique.fr/web/genea/4-accueil.php?item=4" class="lien" title="Lire la suite de l'actualité '22'">Lire la suite ...</a>
                     </p>
                     
               <div class="clear"></div>
               </div>
               
                     <div class="pnews-pages">
                     <hr />
                     <strong><span class="red">&nbsp;1</span></strong>
                     </div>
                     
               </div>]]></data>
</response>


la le code xml fourni par firebug est celui ci, a priori et si tu parle bien de ça, il y a bien une ligne vide en début mais je ne vois pas du tout comment la supprimer ???

EDIT et ce saut de ligne n'est pas présent sur l'autre page qui fonctionne pourtant c'est la même rangée !!!
Auteur:  wind [ Mer Jan 16, 2013 5:33 pm ]
Sujet du message:  Re: Rafraichir le contenu d'une rangée en direct (Ajax)
Ok atm4u, en effet en suppriment le formulaire de connexion, tout rentre dans l'ordre même ce fameux saut de ligne de jpg a disparu...
c'est très certainement un bug automne !!!
merci a vous :D
Page 1 sur 2 Le fuseau horaire est UTC [Heure d’été]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/