problème onclick javascript

[max]

bonjour! depuis que je me met au JS j'ai que des tuiles ^^
enfin la c'est surtout un pb de techique plus qu'autre chose ...
bon en gros j'ai un gros fichier qui affiche les technologies que le joueur peut debloquer au cour du jeu mais ce fichier est trop gros, je veu donc le diviser en plusieurs parties (par exemple arme, attaque...). pour acceder a ces différentes sous parties on poura cliquer sur différents boutons en haut de la page (attaque, defence...) et ca affichera sur la page (en JS) le contenu de attaque ou defence sans rechargement de page.
voila pour la théorie ^^ mtn la pratique: j'ai réalisé un petit code qui fonctionne assez bien:

Code PHP :

<?php 

<input type="button" value="energie" onClick="remplace()" >



<div id="energize"></div>

<script type="text/javascript">

  function remplace()

    {

    var div = document.getElementById('energize');

    div.innerHTML='<?php include ("test.php");?>';

    }

  

  </script> 

[icien]

il faut utiliser ajax.

Je pense que ce script est fait pour toi :http://www.jeuweb.org/board/showthread.php?tid=1057

Sinon je peux te donner celui que j'utilise.

[gtsoul]

[Seren]

La fonction Innerhtml n'inclut pas tout ce qui est <script></script>.

Parce que comme son nom l'indique (ou pas), c'est pour mettre des balises HTML dans du HTML.

Et en HTML la balise <script></script> ou <?php ?>, ça rend du vide. Donc quoi que tu mettes dans innerhtml tu auras du vide . (EDIT : Après réflexion, je pense que j'ai dit une connerie la balise php doit passer et être interprété correctement côté serveur mais uniquement à l'initialisation de la page.)


Ensuite à ton problème il y a deux solutions :
1. solution simple :

Tu charges quand même le texte lié à une technologie à l'initialisation, mais par defaut tu mets le style de ce div à 'none'. Ca veut dire que ton texte est là mais pas affiché. Et au moment ou tu cliques sur le bouton tu passes le style à 'block' ou 'inline' et ça va afficher le contenu.

C'est une solution pour l'affichage, mais tu chargeras quand même tout ton fichier au début.

2. Utiliser Ajax comme ça déjà été dit.
Là ça permet réellement d' interroger le serveur à nouveau sans tout recharger. Et pour ça il y a des tutoriaux qui traînent ici et là sur le net, mais c'est un peu plus complexe (pas bcp plus).

PS : Il faut garder en mémoire que tout ce qui est PHP est généré au moment ou tu charges ta page. Le serveur assemble une page avec tous les include possible et inimaginable. Mais une fois que ta page a été envoyé, le serveur ne fait plus rien. Donc tu peux pas y accéder aussi simplement qu'en appellant une fonction javascript qui va inclure du PHP. Il faut renvoyer une requête HTTP pour réveiller le serveur. Soit en utilisant classiquement un formulaire, soit en utilisant Ajax qui fait précisemment ça.
Mais de façon général:
javascript : executé du côté client
php : executé côté serveur.

Et par défaut (sans ajax), c'est pas possible de les faire communiquer sans recharger la page.

[max]

la 1ère méthode de Seren me plait bien ^^
je vais essayer ca

[Archange]

POur gagner en légèreté et pas à avoir à charger tout le temps le même texte, un systéme de cache serait pas bien ?( mais le texte serait sotcker dans la bdd) voila juste une question que je me pose

[max]

hum je gère pas du tt les caches jpense que jvais rester sur un système simple, ptet un peu plus lourd mais que je comprend ^^

pour le test ca me donne ca:

Code PHP :

<?php 

<input type="button" value="energie" onClick="remplace()" >

<input type="button" value="attaque" onClick="remplace2()" >



<div id="energize" >techno energie</div>

<div id="attack" >techno attaque</div>



<script type="text/javascript">



  function remplace()

    {

    document.getElementById('attack').style.display='none';

    document.getElementById('energize').style.display='';

    }

  function remplace2()

    {

    document.getElementById('attack').style.display='';

    document.getElementById('energize').style.display='none';    

    }

  </script> 

[Seren]

Il faut mettre l'affichage par défaut à none

<div id="energize" style='display:none'></div>
<div id="attack" style='display:none'></div>

[max]

raaa le pire c'est que j'avais essayé tt a l'heure mais ca avait pas marché grr
ben c'est aussi bien comme ca ^^
merci!