+- 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 : Y aurait-il des pros du javascript dans l'assistance? (/showthread.php?tid=1113)
Y aurait-il des pros du javascript dans l'assistance? - joshua - 25-04-2007
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;
}
bon je sais que je n'en dis pas beaucoup... Mais la je dépasse mon seuil d'incompétence en js et de loin .....
Je m'excuse d'avance, d'ordinaire je n'aime aps qu'on file du code comme ca c'est assez crade. JE vais encore tenter autre chose ce soir mais j'avoue commencer a manquer d'idées
RE: Y aurait-il des pros du javascript dans l'assistance? - icien - 25-04-2007
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);
}
voici une petite page explicative: http://www.xul.fr/Objet-XMLHttpRequest.html
RE: Y aurait-il des pros du javascript dans l'assistance? - joshua - 25-04-2007
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,'');
RE: Y aurait-il des pros du javascript dans l'assistance? - icien - 25-04-2007
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);
}
en modifiant la fonction addBoxHeader() comme ceci:
a la place de :
Code PHP :
<?php
/*image.onclick = refreshRSS;*/
/*ajout alex*/
image.onclick = refreshDragableBox(uniqueIdentifier);
Mettre
Code PHP :
<?php
/*image.onclick = refreshRSS;*/
/*ajout alex*/
var dbcontentid='dragableBoxContent' + boxIndex;
image.onclick = refreshDragableBox(uniqueIdentifier,dbcontentid);
RE: Y aurait-il des pros du javascript dans l'assistance? - joshua - 25-04-2007
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...
RE: Y aurait-il des pros du javascript dans l'assistance? - icien - 25-04-2007
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);
RE: Y aurait-il des pros du javascript dans l'assistance? - Maks - 25-04-2007
Citation :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 ^^)
RE: Y aurait-il des pros du javascript dans l'assistance? - icien - 26-04-2007
Maks a écrit :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.
RE: Y aurait-il des pros du javascript dans l'assistance? - Roworll - 26-04-2007
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(){
...
}
On fait juste un 'raccourci' en incluant directement le code de la fonction de retour dans le onreadystatechange.
Maintenant, pour en revenir au soucis original, je ne suis pas sur a 100% que le idBoite passé en paramètre dans la fonction soit utilisé correctement dans le code de la fonction du onreadystatechange.
J'ai déjà eu quelques patouilles avec ça.
Je pense qu'en rajoutant une propriété au xhr_object pour l'utiliser dans la fonction devrait passer le problème.
Un truc du style
Code PHP :
<?php
function refreshDragableBox(uniqueIdentifier,Idboite)
{
var xhr_object = null;
xhr_object = new XMLHttpRequest();
// Création de la nouvelle propriété. Je change le nom de variable pour montrer la différence
xhr_object.boite_Id=Idboite
// 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;
//J'utilise this.boite_Id au lieu de Idboite pour éviter tout parasitage externe.
document.getElementById(this.boite_Id).innerHTML = htmlContentOfNewBox;
}
}
xhr_object.open("GET", 'page/' + uniqueIdentifier + '.php', false);
xhr_object.send(null);
}
RE: Y aurait-il des pros du javascript dans l'assistance? - joshua - 26-04-2007
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...