[Résolu] Problème de synchronisation avec Ajax

[NicoMSEvent]

Pour une fois que je m'attaque a une 'nouvelle' technologie, je patauge un peu. J'arrive sans probleme a recharger un bout de page...

Je vous expose mon problème :
j'aimerais déplacer mon terrain (j'y arrive, là n'est pas le problème), et ensuite afficher le nouveau terrain (j'arrive aussi a l'afficher)... le coeur du problème est d'afficher la nouvelle portion de terrain lorsque le terrain à fini de bouger. (afin d'éviter les "téléportation" de case en case, j'aimerais avoir un mouvement fluide)

Je vous colle ici le javascript qui pose problème (je me sert de "prototype" pour comme framework javascript)

Code PHP :

<?php 

<!--

function deplace(dir){

//toutes les cases a déplacer

        var id_case=new Array("div03","div12","div21","...");

//je relance a fonction après 25 milliseconde

        var id=setTimeout("deplace('"+dir+"');",25);



        for(var cur_case in id_case){

                if($(id_case[cur_case]) && $(id_case[cur_case]).style)

//ici je choisi dans quelle direction déplacer le terrain... en fonction de l'objet sur lequel j'ai cliqué (pour simplifier, je n'ai laissé qu'une direction)

                switch(dir){

                        case 'h':

                                $(id_case[cur_case]).style.top=($(id_case[cur_case]).offsetTop+4)+"px";

//dès que je suis arrivé a destination, j'arrête le relancement de la fonction.

                                if(parseInt($("div21").offsetTop)>=88)clearTimeout(id);

                                break;

                }

        }

}



function deplacement(e){

    var objId=this.id||e.srcElement.id;

    switch(objId){

        case'a23':deplace('h');break;

        default:

    }

//je change de page après 1 seconde (j'aimerais qu'il ne le fasse qu'une fois que le déplacement est terminé)

    setTimeout("load_page($('"+objId+"').alt);",1000);

//ignore le href="..."

    if( e && e.stopPropagation && e.preventDefault ){

        e.stopPropagation();

        e.preventDefault();

    }

    else if(e && window.event ){

        window.event.cancelBubble=true;

        window.event.returnValue=false;

    }

    return false;

}

//--> 

[keke]

et un cht'i lien pour nous donner un exemple ?

kéké.

[Sephi-Chan]

Ouais, ce serait cool pour comprendre le problème.

[NicoMSEvent]

http://www2.ma-soiree.be:8080/rpg

entrez avec votre compte ou un compte test, et lorsque vous voyez le terrain, cliquez sur une case contigüe à celle du milieu (avec la fleche rouge) pour déplacer votre personnage.

La carte devrait commencer a bouger, puis le chargement Ajax se fait tout de suite après, sans que le déplacement du terrain ne soit terminé (donc, le terrain termine son mouvement alors que la nouvelle page est déjà arrivée, donc la position de ce terrain n'est plus bonne)

Je ne demande pas souvent d'aide, mais là je suis drolement coincé :$

[Sephi-Chan]

Mais pourquoi ne pas simplement charger les cases avant d'effectuer la translation ?

Tu utilises une fonction de callback qui fait que, quand le chargement via Ajax est terminé (je pense que tu as cet event dans Prototype), tu effectue la translation, comme ça ce sera fluide comme tu le souhaite.

Et au pire, crées les nouvelles cases sans les afficher, si tu ne veux pas que ça apparaisse avant la translation.


Sephi-Chan

[NicoMSEvent]

je vais creuser dans ce sens là... merci (je ne mettrai [résolu] que lorsque ça le sera effectivement )

Edit : c'est réglé, merci pour la piste

[Sephi-Chan]

Voilà la page qui peut t'intéresser sur la documentation de Prototype : Ajax.Request. Prototype propose bien un événement onSuccess.


Sephi-Chan

[NicoMSEvent]

je n'ai pas utilisé cette méthode... ce que j'ai fait c'est : charger le html envoyé dans une variable plutot que de l'afficher.

Dès que le terrain est arrivé a destination (ça fait bizarre d'écrire ça mais bon :p ), je remplace le contenu du DIV qui m'intéresse par la varible qui contient le retour du chargement ajax.

Dans un soucis didactique, j'essaye d'avoir le site le plus propre possible (100% compatible xhtml 1.0 strict, sans erreur javascript d'aucune sorte et tout, et en plus aussi accessible si on désacrive le JS). Donc, je reviendrai après mon retour de vacance sur l'amélioration de mon code, et l'utilisation de Ajax.Request.

NicoMSEvent, qui commence a savourer le confort de AJAX malgré ses préjugés

Edit : j'écrirais bien un tuto sur la bonne utilisation de AJAX, et du javascript en général ^^
Je suis en train de lire

[Sephi-Chan]

Bon ben tant mieux.

C'est vrai qu'Ajax, c'est un beau bijou ! En plus avec tous les outils (Prototype (et ses variantes, genre Scriptaculous), JQuery, Dojo, etc.) et les formats de données (XML, JSON, etc.) qui vont bien, c'est très agréables.

De mon côté, j'ai testé Javascript pour le Web 2.0, par lequel j'ai été un peu déçu…


Contrairement à d'autres livres, j'ai préféré les ressources que l'on trouve sur le Web.


Sephi-Chan

[Anthor]

Oui y'a pas vraiment de livre complet ou vraiment à jour...
Ça bouge plutôt vite du côté des librairies, rien ne vaut les documentation officiels et les tutoriels.