JeuWeb - Crée ton jeu par navigateur
Inventaire en "Ajax" - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Inventaire en "Ajax" (/showthread.php?tid=1827)

Inventaire en "Ajax" - trididinus - 07-10-2007

J'ai déjà eu beaucoup de problèmes avec cet inventaire... je viens donc avec un nouveau problème.
Mon inventaire se trouve à coté de l'image du personnage. Pour placer un objet sur le ersonnage, il faut déplacer l'objet de l'inventaire sur l'image du personnage (Drag and Drop).
Celà recharge l'image du perso et l'inventaire par fonction javascript mais l'inventaire n'agit pas de la bonne manière après le chargement.

Quand je dépose un objet sur le perso, celà active la fonction file(fichier) :
Code PHP :
<?php 

function file(fichier)

    {

       

    

    // partie changement de l'image

    if(window.XMLHttpRequest) // FIREFOX

         xhr_object = new XMLHttpRequest();

    else if(window.ActiveXObject) // IE

         xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

    else

         return(false);

    xhr_object.open("GET", fichier, false);

    xhr_object.send(null);

    if(xhr_object.readyState == 4) return(xhr_object.responseText);

    else return(false);

    

    // partie changement inventaire

    var url = 'chang_inventaire.php';

    if(window.XMLHttpRequest) // FIREFOX

         xhr_object1 = new XMLHttpRequest();

    else if(window.ActiveXObject) // IE

         xhr_object1 = new ActiveXObject("Microsoft.XMLHTTP");

    else

         return(false);

    xhr_object1.open("GET", url, false);

    xhr_object1.send(null);

    if(xhr_object1.readyState == 4) 

    {

        var inventaire = xhr_object1.responseText;

        document.getElementById('centre_inventr').innerHTML = inventaire;

    }else return(false);

    

    

    }

Le but de la premiere partie de ce script est de modifier les objets portés par le personnage et de modifier l'image du perso. De ce coté tout va bien.
La seconde partie est sencé sortir les nouvelles données de l'inventaire (donc sans l'objet déplacé) et remplacer l'ancien inventaire par le nouveau.
J'appelle le fichier chang_inventaire.php qui est :

Code PHP :
<?php

session_start();

include("connection.php");

$id = $_SESSION['id'];

$req_count = mysql_query("SELECT COUNT(*) AS nbr FROM seiryoku_objet WHERE possesseur='".$id."' AND port='non'")or die(mysql_error());

$sql_count = mysql_fetch_array($req_count);

if($sql_count['nbr'] == 0)

{

    echo '<center>Il n\'y a aucun objet dans votre inventaire.</center>';

}

else

{

    $req_item = mysql_query("SELECT id,type_objet,etat,valeur FROM seiryoku_objet WHERE possesseur='".$id."' AND port='non'")or die(mysql_error());

    while($sql_item = mysql_fetch_array($req_item))

    {

        $type_objet_inventaire = $sql_item['type_objet'];

        $req_image = mysql_query("SELECT nom,poids,valeur_depart,etat_depart,image FROM seiryoku_objet_type WHERE nom_type='".$type_objet_inventaire."'")or die(mysql_error());

        $sql_image = mysql_fetch_array($req_image);

        ?>

        <img src="images/<?php echo $sql_image['image']; ?>" title="<?php echo $sql_image['nom']; ?>&nbsp;&nbsp;&nbsp;Poids : <?php echo $sql_image['poids']; ?> up&nbsp;&nbsp;&nbsp;Etat : <?php echo $sql_item['etat']; ?>/<?php echo $sql_image['etat_depart']; ?>&nbsp;&nbsp;&nbsp;Valeur : <?php echo $sql_item['valeur']; ?> Zen" alt="<?php echo $sql_item['nom']; ?>" id="<?php echo $sql_item['id']; ?>" />

        <script type="text/javascript">new Draggable('<?php echo $sql_item['id']; ?>', {revert:true})</script>

        &nbsp;&nbsp;&nbsp;

        <?php

    }

    ?>

    pom

    <?php    

}

?>

Je remarque qu'après un chargement par javascript, les images de l'inventaire ne sont plus considérés comme des objets "draggable" et sont donc non déplacables. Aussi, l'objet qui vient d'être déplacé ne disparait pas du nouvel inventaire, pourtant la requête est faite après l'enregistrement du nouvel inventaire.

Je désire absolument créer l'inventaire comme celà. Si vous avez une solution ou bien une autre méthode pour réaliser cet inventaire...
Merci!

RE: Inventaire en "Ajax" - Zamentur - 09-10-2007

euh alors là je sais pas du tout quoi repondre!
Le drag n drop qui ne fonctionne pas là j'ai tendance à dire que c'est difficile à dire puisqu'on vois pas le script, par contre pour les objets qui reste dans l'inventaire c'est bizarre!

Je suppose que tu as verifier dans ta bdd entre temps que l'objet n'est plus dedans?
Sinon tu nous donnes pas les bon script...

EDIT: c'est bon j'ai trouvé!
J'avais mal regardé le script
c'ets parce que le javascript
<script type="text/javascript">new Draggable('<?php echo $sql_item['id']; ?>', {revert:true})</script>
n'est pas executé quand tu utilise innerHTML
Il faut que tu trouve un moyen de detecter ce javascript et que tu l'execute avec exec par exemple

RE: Inventaire en "Ajax" - Zamentur - 09-10-2007

çà m'était déjà arriver et comme je trouver que c'était difficile de detecter le code entre script et de le lancer au bon moment j'avais opté pour mettre mon code js de façon séparé(par un separateur bien determiner et assez long et aleatoir pour eviter toute collision) et de le recuperer ainsi
Pas trés propre mais çà marcher

j'espere que t'as compris ce qui vas pas!
Evidement çà repond que pour le drag&drop

RE: Inventaire en "Ajax" - trididinus - 09-10-2007

Je vois...

Je ne sais pas trop comment faire passer autrement le javascript. Mais je vais chercher...
J'ai l'impression qu'il ne beut pas effectuer le script quand il fait le changement d'image, mais il ne s'arrete pas, il lit le script mais ne recharge pas la page de l'inventaire...

RE: Inventaire en "Ajax" - Zamentur - 10-10-2007

Pour verifier ce que je dis met un alert('ok'); dans le javascript envoyé par chang_inventaire.php .
Et effectivement il it le script et l'inclue dans ton html mais il ne l'execute pas il faut donc l'aider à le faire avec eval par exemple

La solution à ton probleme c'est de mettre le code javascript dans une partie de la page et le reste dans une autre, le tout séparé par un delimiteur connue
Une solution simple est facile à mettre en oeuvre c'est la methode AJAJ
En gros ta page ne genere que du javascript

tu met ton html dans une variable javascript
tu met ton javascript dans une autre
Le tout en faisant gaffe au quote et double quote... vive addslashes

Et il te suffit de modifier legerement l'autre page en executant ce que tu reçois avec eval(xhr_object1.responseText);
puis en incluant ton html document.getElementById('centre_inventr').innerHTML = mon_html;

mon_html etant la variable javascript ecrite par chang_inventaire.php qui contenait le html

et en executant mon_javascript
eval(mon_javascript);


Ainsi tu as un separateur assez fiable et en plus evoluable (rien ne t'empeche de creer d'autre variable voir de rajouter des lignes de code si besoin!)

Autre methode detecter avec les regaexp toute ce qui est contenue par des balises <script> et l'executer, mais c'est plus dure!

RE: Inventaire en "Ajax" - Galaan - 10-10-2007

tu pourrais aussi executer ta fonction javascript juste apres avoir recu la reponse de l'ajax :
Code PHP :
<?php 

if (req.readyState==4)

{

    strResult = req.responseText;

    .....//Je fais ce que j'ai besoin avec strResult

    maFonction();

}
si tu as beson de parametres,[/php] tu peux aussi les envoyer dans la reponse et faire un petit parsing.

Galaan

RE: Inventaire en "Ajax" - Zamentur - 10-10-2007

oui la fonction pourrais par exemple recuperer les id de tout les element de la classe "deviens_draggable" et ainsi pourvoir les rendre draggable...