Y aurait-il des pros du javascript dans l'assistance?

[joshua]

Voilà, j'essaie de faire un refresh d'une box depuis son header, avec rechargement du contenu via ajax.
Et bien ca marche po :pleure2:

Le code de la page javascript est la:
http://swroe.no-ip.org/test/js/dragable-boxes.js

Le resultat visuel se trouve ici:
http://swroe.no-ip.org/test/dragable-boxes.php

Et la fonction qui me fait pleurer est celle-ci :

Code PHP :

<?php 

function refreshDragableBox(uniqueIdentifier)

    {

        var numericId = this.id.replace(/[^0-9]/g,'');

        var xhr_object = null; 

        xhr_object = new XMLHttpRequest();  

        xhr_object.open("GET", 'page/' + uniqueIdentifier + '.php', false); 

        xhr_object.send(null); 

        var htmlContentOfNewBox = xhr_object.responseText;

        document.getElementById('dragableBoxContent' + numericId).innerHTML = htmlContentOfNewBox;

    } 

[icien]

en fait il faut tester l'état de ton xhr_object.
voici les 5 états qu'il prend :
* 0 Non initialisé
* 1 Ouvert
* 2 Envoyé
* 3 Reçu
* 4 Chargé

et tu ne peux l'utiliser que quand l'état est a 4.

Il font donc modifier ton code dans ce sens :

Code PHP :

<?php 

function refreshDragableBox(uniqueIdentifier)

    {

        var numericId = this.id.replace(/[^0-9]/g,'');

        var xhr_object = null;

        xhr_object = new XMLHttpRequest();  

        // On défini ce qu'on va faire quand on aura la réponse

        xhr_object.onreadystatechange = function()

            {// On ne fait quelque chose que si on a tout reçu et que le serveur est ok

            if(xhr_object.readyState == 4 && xhr_object.status == 200)

                {

                var htmlContentOfNewBox = xhr_object.responseText;

                document.getElementById('dragableBoxContent' + numericId).innerHTML = htmlContentOfNewBox;    

                }

            }

        xhr_object.open("GET", 'page/' + uniqueIdentifier + '.php', false);

        xhr_object.send(null);

    } 

[joshua]

le resultat :

this.id has no properties
refreshDragableBox("premiere")dragable-boxes.js (line 605)
addBoxHeader(div.dragableBoxInner, false, "premiere", undefined)dragable-boxes.js (line 680)
createABox(1, 100, false, "premiere", undefined)dragable-boxes.js (line 735)
createMyBox("premiere")dragable-boxes.js (line 872)
onclick(click clientX=0, clientY=0)dragable-boxes.ph... (line 1)
[Break on this error] var numericId = this.id.replace(/[^0-9]/g,'');

[icien]

En fait tu devrait peut-etre passé l'id de la boite dans l'appel de la fonction. Pour donner une fonction du genre:

Code PHP :

<?php 

function refreshDragableBox(uniqueIdentifier,Idboite)

    {

        var xhr_object = null;

        xhr_object = new XMLHttpRequest();  

        // On défini ce qu'on va faire quand on aura la réponse

        xhr_object.onreadystatechange = function()

            {// On ne fait quelque chose que si on a tout reçu et que le serveur est ok

            if(xhr_object.readyState == 4 && xhr_object.status == 200)

                {

                var htmlContentOfNewBox = xhr_object.responseText;

                document.getElementById(Idboite).innerHTML = htmlContentOfNewBox;    

                }

            }

        xhr_object.open("GET", 'page/' + uniqueIdentifier + '.php', false);

        xhr_object.send(null);

    } 

[joshua]

Nope toujours pas ^^
JE me demande si je ne vais pas tout reprendre cette partie de 0 en m'appuyant sur le code de refresh des RSS...

document.getElementById(Idboite) has no properties
onreadystatechange()dragable-boxes.js (line 614)
refreshDragableBox("premiere", "dragableBoxContent1")dragable-boxes.js (line 618)
addBoxHeader(div.dragableBoxInner, false, "premiere", undefined)dragable-boxes.js (line 681)
createABox(1, 100, false, "premiere", undefined)dragable-boxes.js (line 736)
createMyBox("premiere")dragable-boxes.js (line 873)
onclick(click clientX=0, clientY=0)dragable-boxes.ph... (line 1)
[Break on this error] document.getElementById(Idboite).innerHTML = htmlContentOfNewBox...

[icien]

Dans la fonction createMyBox($name)

a la ligne var newIndex = createABox(1,100,false,$name); il manque un paramètre, le "dragable". il faut donc mettre: var newIndex = createABox(1,100,false,$name,true);

[Maks]

function refreshDragableBox(uniqueIdentifier)
{
var numericId = this.id.replace(/[^0-9]/g,'');
var xhr_object = null;
xhr_object = new XMLHttpRequest();
// On défini ce qu'on va faire quand on aura la réponse
xhr_object.onreadystatechange = function()
{// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr_object.readyState == 4 && xhr_object.status == 200)
{
var htmlContentOfNewBox = xhr_object.responseText;
document.getElementById('dragableBoxContent' + numericId).innerHTML = htmlContentOfNewBox;
}
}
xhr_object.open("GET", 'page/' + uniqueIdentifier + '.php', false);
xhr_object.send(null);
}

Euh... je voudrais dire que xhr_object.onreadystatechange = function() ne s'utilise qu'en cas de fonction de fonction asynchrone il me semble bien, non ? Donc ce code me parait erroné.

Et je crois que la définition de document.getElementById('dragableBoxContent' + numericId) est fausse, essaye plutôt

var dragableBoxContentId = "dragableBoxContent" + numericId;
document.getElementById(dragableBoxContentId)

Sinon avec ton ancienne ligne il n'y a pas de "" pour définir la valeur du getElementById. Sinon utilise la console d'erreur de Firefox et copie les ligne si tu veux de l'aide (1 tuto sur l'AJAX s'impose on dirait ^^)

[icien]

je voudrais dire que xhr_object.onreadystatechange = function() ne s'utilise qu'en cas de fonction de fonction asynchrone il me semble bien, non ? Donc ce code me parait erroné.

Je veux bien que tu m'explique parce j'ai toujours utilisé cette méthode.

[Roworll]

J'avais déjà réalisé un script pour un mini objet ajax.
Ca peut toujours servir de référence.

Sinon, le xhr_object.onreadystatechange = function() me parait correct dans cette situation.

La plupart du temps, on voit du code du style

Code PHP :

<?php 

...

xhr_object.onreadystatechange = maFonction

...

Function maFonction(){

...

} 

[joshua]

Je teste ca en rentrant ce soir... Mais je commence a me dire qu'il va me falloir revoir plus en profondeur, en m'appuyant sur leur code de rechargement. Le javascript n'est pas aussi simple que je ne le croyais et les dépendances ne sont pas simples a gérer....
C'est toujours comme ca quand on part d'un code pour obtenir le sien
Mais je compte bien offrir a tout le monde l'interface s'y j'y parviens.
Il ne manque plus grad chose pour avoir quelque chose de visuellement beau et exploitable...