Carnet Wiki

Exemple de bloc télécommandé en Ajax

SPIP-Contrib :: Carnet Wiki :: Recherche :

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