Recharger une div avec Jquery

Bon, bien que j'ai eu ma réponse de l'autre coté (elle me servira plus tard), j'ai un soucis pour l'instant...

Soit une page jeu.html/carte

Elle génère une page complexe comprenant plusieurs div (je peux pas vous montrer de code, mon design n'est pas fait ^^'). Dont une <div id="carte">.

Cette div contient une série pas négligeable de contenu issus d'une page .php. (+ de 150 éléments)

J'aimerais savoir s'il existe un moyen de recharger cette div et donc de relancer le fichier php qui va avec, sans pour autant recharger toute la page. Sachant que pour pas compliquer cette div contient une série d'éléments clicables en JQuery qui doivent bien sûr le rester (ou le devenir, ou ne plus l'être) après ce rechargement.

Mon objectif étant bien sûr d'éviter :
- de devoir faire un fichier PHP appelé en ajax qui ressortirait toutes les modifications en JSON pour que le jquery applique les changements (c'est la technique que j'ai débutée, mais ça va être limite plus lourd que si je rechargeais la page )
- d'utiliser un frame
- de recharger toute ma page (solution de secours que je préfèrerais éviter)



ps : le fichier php pour l'instant a un code qui ressemble à ça, au niveau de le partie qui génère l'affichage :

<!--Installation des cases -->
	<?php for($i=1;$i<=$nbre_case;$i++):
		$nom_obj="Case".$i;
		$skin=$$nom_obj->RetourDessin();
		$placeX=($$nom_obj->RetourAttributX() - $infoPj['Xdebut']) * 42;
		$placeY=($$nom_obj->RetourAttributY() - $infoPj['Ydebut']) * 42; ?>
	<img src='<?php echo $skin; ?>' style='position:absolute; margin-top:<?php echo $placeY; ?>px;margin-left:<?php echo $placeX; ?>px;z-index=0' />
	<?php endfor; ?>
	<!--Installation des Drops-->
	<?php for($i=1;$i<=$nbre_drops;$i++):
	$nom_obj="drops".$i;
	$skin=$$nom_obj->RetourSkin();
	$placeX=($$nom_obj->RetourAttributX() - $infoPj['Xdebut']) * 42 + 10;
	$placeY=($$nom_obj->RetourAttributY() - $infoPj['Ydebut']) * 42 + 10; ?>
	<img src='<?php echo $skin; ?>' style='position:absolute; margin-top:<?php echo $placeY;?>px;margin-left:<?php echo $placeX;?>px;z-index=1' />
	<?php endfor; ?>
	<!--Installation des prises-->
	<?php for($i=1;$i<=$nbre_prise;$i++):
	$nom_obj="prise".$i;
	$skin=$$nom_obj->RetourSkin();
	$placeX=($$nom_obj->RetourAttributX() - $infoPj['Xdebut']) * 42 + 10;
	$placeY=($$nom_obj->RetourAttributY() - $infoPj['Ydebut']) * 42 + 10; ?>
	<img src='<?php echo $skin; ?>' style='position:absolute; margin-top:<?php echo $placeY;?>px;margin-left:<?php echo $placeX;?>px;z-index=2' />
	<?php endfor; ?>
	<!--Installation des PNJs-->
	<?php for($i=1;$i<=$nbre_pnj;$i++):
	$nom_obj="pnj".$i;
	$skin=$$nom_obj->RetourSkin();
	$placeX=($$nom_obj->RetourAttributX() - $infoPj['Xdebut']) * 42;
	$placeY=($$nom_obj->RetourAttributY() - $infoPj['Ydebut']) * 42; ?>
	<img src='<?php echo $skin; ?>' style='position:absolute; margin-top:<?php echo $placeY;?>px;margin-left:<?php echo $placeX;?>px;z-index=10' />
	<?php endfor; ?>
	<!-- Installation des Monstres-->
	<?php for($i=1;$i<=$nbre_monstre;$i++):
	$nom_obj="monstre".$i;
	$skin=$$nom_obj->AfficherSkin();
	$placeX=($$nom_obj->RetourAttributX() - $infoPj['Xdebut']) * 42;
	$placeY=($$nom_obj->RetourAttributY() - $infoPj['Ydebut']) * 42; ?>
	<img src='<?php echo $skin; ?>' style='position:absolute; margin-top:<?php echo $placeY;?>px;margin-left:<?php echo $placeX;?>px;z-index=5' />
	<?php endfor; ?>
	<!--Installation des PJs-->
	<?php for($i=1;$i<=$nbre_pj;$i++):
	$nom_obj="pj".$i;
	$skin=$$nom_obj->RetourSkin();
	$placeX=($$nom_obj->RetourAttributX() - $infoPj['Xdebut']) * 42;
	$placeY=($$nom_obj->RetourAttributY() - $infoPj['Ydebut']) * 42; ?>
	<img src='<?php echo $skin; ?>' style='position:absolute; margin-top:<?php echo $placeY;?>px;margin-left:<?php echo $placeX;?>px;z-index=15' />
	<?php endfor; ?>
	<!--Installation des flèches de déplacement-->
	<?php for($i=1;$i<=8;$i++):
	if($PJ->ValidDeplacement($i)==1):
		$fleche=$PJ->AfficheDeplacement($i);
		$placeX=($fleche['X'] - $infoPj['Xdebut']) * 42 +10;
		$placeY=($fleche['Y'] - $infoPj['Ydebut']) * 42 +10; ?>
	<a class='deplacement' title='<?php echo $fleche['nom']; ?>' id='<?php echo $fleche['id']; ?>'><img src='<?php echo $fleche['src']; ?>' style='position:absolute; margin-top:<?php echo $placeY;?>px;margin-left:<?php echo $placeX;?>px;z-index=20' /></a>
		<?php endif; ?>
	<?php endfor; ?>

Modifié par Lothindil (11 Sep 2012 - 13:32)

Salut,

Si tu dois mettre à jour ton DOM avec des données serveur réactualisées, tu n'as pas d'autre choix que d'exécuter une requête vers ton serveur.
Soit totale (reload complet), soit partielle (ajax).

Si par contre, les données nécessaires peuvent chargées initialement, tu peux les stocker dans ton script et les utiliser côté client...

tm

Impossible de les prévoir avant, il s'agit de la carte d'un jeu où des plusieurs joueurs peuvent bouger, apparaître, disparaître, quasiment idem pour les monstres et pire encore pour les drops...

Donc si je comprends bien, c'est soit je charge les modifications en Ajax et je les opère en javascript (boulot de titan), soit je reload ma page (ce qui a l'avantage de n'avoir qu'un seul script qui gère l'affichage de la carte et donc moins de risques d'erreur en cas de modifications)...

Bon, j'aurais aimé entendre qu'il y avait un truc génial pour relancer un script php via du javascript, mais on fera avec


(en même temps un windows.reload() à l'avantage d'être très simple à coder )

Lothindil a écrit :
Bon, j'aurais aimé entendre qu'il y avait un truc génial pour relancer un script php via du javascript

Ça s'appelle ajax et c'est effectivement génial !
En terme d'ergo et de jouabilité, la méthode asynchrone a sûrement des avantages...

tm

Donc j'ai pas capté le truc...

Ajax je l'utilise (un peu, suis pas une pro là-dedans, loin de là).

Pour l'instant, mon script php (carte.php), me génère un html qui va s'incruster dans un autre html... ou plutôt il va créer des éléments qui vont s'inscruster dans de l'html qui lui-même va s'insérer dans un autre html (les éléments html n'étant pas envoyé à l'aide de "echo" ou "print").

A l'heure actuelle de mes connaissances, j'ai 2 possibilités avec l'ajax :

-> celle que j'avais commencé à mettre en place qui va lancer un script php (mouvement.php). Ce script va tester si le déplacement est possible, changer les coordonnées du PJ puis récupérer tous les éléments qui ont ou qui peuvent bouger sans action du joueur (cases, monstres, drops au sol, autres PJs), ainsi que les flèches de déplacement; il créé les informations nécessaire à l'affichage (skin, noms, emplacement,...); il fait un super-méga tableau à 3 dimensions (type, n°, type de donnée) qu'il transforme en json et qu'il balance au javascript.
Le javascript va interpréter le JSON et va supprimer les cases qui doivent être supprimés, ajouter celles qui doivent être ajoutés, supprimer les éléments qui peuvent avoir bougé, déplacer les éléments qui restent, ajoute les drops, les monstres, les autres PJs et enfin les flèches.

Défaut : c'est lourd, très lourd comme travail autant pour moi que pour le programme (à cause du jeu suppressions/ajouts et de la transmission du php au javascript). De surcroît, c'est horrible à maintenir, vu que je vais me retrouver avec 2 scripts qui gèrent le même type de données dans le même cadre... et d'une façon très proches.



-> un script php court (mouvement.php) qui se contente de vérifier si le déplacement est possible et qui update les coordonnées du personnage.
Le javascript au choix : signale une erreur ou recharge la fenêtre complète.



Ce qui serait pour moi l'idéal :

-> un script php court (mouvement.php) vérifie si le déplacement est possible et update les coordonnées
Le javascript au choix : signale une erreur ou relance le script php "carte.php".

Et là par magie la div "carte" se recharge pour afficher le contenu de la relance.


Hors, dans ce que j'en ai lu, c'est pas possible sans passer par une frame... Ce que je préfèrerais éviter...

Est-ce qu'il existe un autre moyen ? (si oui, lequel ^^')


edit : j'ai bien une méthode, mais c'est alors dans le fichier carte.php que ça devient moche...

En gros insérer tout le contenu de la div dans une variable et d'un coté je l'"echo"; de l'autre je la transforme en un gros JSON. Le javascript n'aurait alors plus qu'à supprimer l'ancien contenu puis y mettre le nouveau...

Mais c'est pas franchement clean comme manière de gérer le php...
Modifié par Lothindil (11 Sep 2012 - 15:02)

Re,

Difficile de répondre sans en savoir plus sur ton jeu.
Par ailleurs, ça sort de mon champ d'activité...

Néanmoins...
Je pense que tu devrais essayer d'exécuter un maximum de chose côté client plutôt que côté serveur (map, obstacle, monstres, etc...). Php gère les sauvegardes, les trucs aléatoires, etc et puis c'est chargé dans le client au démarrage et sauvegardé/actualisé tous les "x" temps.

Sauf si tu dois vraiment passer par un rafraîchissement "permanent" des données, genre multi-joueurs ou que sais-je.
Dans ce cas, tu devrais regarder du côté des websockets qui te permettent de gérer des connexions ouvertes, bi-directionnelles, de faire du "temps-réel"...

tm