Carnet Wiki

Exemple de bloc télécommandé en Ajax

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

erational - Mise à jour :29 février 2016 à 21h05min