Carnet Wiki

Version 6 — il y a 1 semaine — Nicolas Hoizey

Un exemple simple pour montrer comment utiliser SPIP et Ajax sur ces blocs distincts

Documentation

http://www.spip.net/fr_article3753.html
http://spip.rezo.narkive.com/n9oWhZfv/spip-3-ajaxreload-dans-un-autre-bloc

Exemple complet

Placer ces 2 pages dans votre dossier squelettes et appeler la page http://xxx/spip.php?page=sommaire-simple

Page principale : sommaire-simple.html

  1. <html>
  2.  
  3.  
  4. <head>
  5.   <title>Sommaire simple</title>
  6.   <!-- important: ajouter le insert_head pour permettre l'ajax -->
  7.   #INSERT_HEAD
  8.  
  9.   <!-- le script d'appel -->
  10.   <script>  
  11.   function voir(id_article) {
  12.       ajaxReload(
  13.          'article-preview', {
  14.          callback:function(){                
  15.             $("li").css("color","#000");
  16.             $("li.item"+id_article).css("color","#fff");  
  17.          },
  18.          args:{
  19.            'id_article':id_article          
  20.          },
  21.          history:false
  22.       })
  23.  }
  24.   </script>
  25. </head>
  26.  
  27.  
  28. <body>
  29. <h1>Sommaire simple</h1>
  30.  
  31.  
  32. <!-- bloc d'appel -->
  33. <div style="background:pink;padding:1em;">
  34.   <B_a><ul>
  35.   <BOUCLE_a(ARTICLES){0,10}>
  36.   <li class="item#ID_ARTICLE">
  37.           #TITRE
  38.           <button onclick="voir(#ID_ARTICLE);return false;">Lire</button>          
  39.   </li>
  40.   </BOUCLE_a>
  41.   </ul></B_a>
  42. </div>
  43.  
  44.  
  45. <!-- bloc cible -->
  46. <div style="background:yellow;padding:1em;">
  47.     <INCLURE{fond=article-preview,ajax=article-preview}>
  48. </div>
  49.  
  50.  
  51. <!-- bloc doc -->
  52. <div style="background:lightgray;padding:1em;">
  53.     Plus d'informations sur l'ajax <a href="http://www.spip.net/fr_article3753.html">http://www.spip.net/fr_article3753.html</a>
  54. </div>
  55.  
  56.  
  57. </body>
  58. </html>

Télécharger

Le bloc cible ajax : article-preview.html

  1. [(#REM)
  2.     affichage un article
  3.    
  4.     parametre:
  5.     - id_article
  6.  
  7.  
  8. ]
  9. <div>
  10.     Paramètre id_article: #ENV{id_article}
  11. </div>
  12. <BOUCLE_art(ARTICLES){id_article}>
  13.     <h1>#TITRE</h1>
  14.     <div>#TEXTE</div>
  15. </BOUCLE_art></B_art>
  16.     Aucun article
  17. <//B_art>

Télécharger

Voir Voir la doc [-> 5032] [(-> 5032 )]