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

<html>
 
<head>
  <title>Sommaire simple</title>
  <!-- important: ajouter le insert_head pour permettre l'ajax -->
  #INSERT_HEAD
 
  <!-- le script d'appel -->
  <script>  
  function voir(id_article) {
       ajaxReload(
          'article-preview', {
          callback:function(){                 
             $("li").css("color","#000"); 
             $("li.item"+id_article).css("color","#fff");  
          },
          args:{
            'id_article':id_article          
          },
          history:false
       })
  }
  </script>
</head>
 
<body>
<h1>Sommaire simple</h1>
 
<!-- bloc d'appel -->
<div style="background:pink;padding:1em;">
  <B_a><ul>
  <BOUCLE_a(ARTICLES){0,10}>
  <li class="item#ID_ARTICLE"> 
          #TITRE
          <button onclick="voir(#ID_ARTICLE);return false;">Lire</button>           
  </li>
  </BOUCLE_a>
  </ul></B_a>
</div>
 
<!-- bloc cible -->
<div style="background:yellow;padding:1em;">
    <INCLURE{fond=article-preview,ajax=article-preview}>
</div>
 
 
 
<!-- bloc doc -->
<div style="background:lightgray;padding:1em;">
    Plus d'informations sur l'ajax <a href="http://www.spip.net/fr_article3753.html">http://www.spip.net/fr_article3753.html</a>
</div>
 
</body>
</html>

Le bloc cible ajax : article-preview.html

[(#REM)
    affichage un article
 
    parametre:
    - id_article
 
 
]
<div>
    Paramètre id_article: #ENV{id_article}
</div> 
<BOUCLE_art(ARTICLES){id_article}>
    <h1>#TITRE</h1>
    <div>#TEXTE</div>
</BOUCLE_art></B_art>
    Aucun article
<//B_art>

Voir la doc Contrôleur - Vue avec ajaxReload

erational - Mise à jour :5 novembre 2018 à 10h50min