Le portail francophone de la géomatique

Rastafaraï · Tue 09 May 2006 14:18

bonjour je vous joins les deux fichires php

il sagit dun fichier php "aze" qui utilise une technique asynchrone et

qui va rapatrier linfo du fichier php "ajax"

je ne sais pas comment faire pour "appendchilder" linfo rapatriee dans une balise html du fichier appelant "aze"

je passe le message ici vu que je nai pas de reponse sur dautres forums

Cordialement.

code du fichier aze.php :

<script type='text/JavaScript'>
var xhr = null;

function getXhr(){
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
}

/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
getXhr()
// On défini ce qu'on va faire quand on aura la réponse

xhr.open("GET","ajax.php",false);

xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){

var eee = xhr.responseXML.documentElement;

document.getElementById("zz").appendChild(eee);

}

}

xhr.send(null);
}
</script>

<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>

</head>
<body>
<input type='button' value='Dis quelque chose !' onclick='go()' />

<p id="zz">incorporation</p>

</body>
</html>

------------------------------------------------------------------

code du fichier ajax.php :

<?php

echo "<p><b>Bonjour de PHP</b></p>" ;

?>

Ludovic G · Tue 09 May 2006 17:02

Salut,
Voilà un aze.php qui marche. Te laisse le parcourir pour voir les changements. Pas étonnant que tu n'aies pas reçu de réponse sur les autres forums, il y a assez de tuto sur le sujet

<html>
<head>
<script type='text/JavaScript'>
var xhr = null;

function getXhr(){
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
}

/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){

getXhr();

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

xhr.open("GET","./ajax.php",true);

xhr.onreadystatechange = function(){

// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("zz").innerHTML = xhr.responseText;;

}

}

xhr.send('');
}
</script>
</head>
<body>
<form>
<input type='button' value='Dis quelque chose !' onclick='javascript:go();' />
</form>

<div id="zz">incorporation</div>

</body>
</html>

Rastafaraï · Tue 09 May 2006 18:01

je connaissais la methode par innerhtml dans un <div>

mais dans mon contexte il faut quil soit appendchilder a une balise autre que le <div>

en effet a terme , ca sera pour du xml svg

Cordialement

Dernière modification par Rastafaraï (Tue 09 May 2006 18:04)

dunjl · Tue 09 May 2006 19:41

salut

pour faire ce que tu veux faire, il y a une possibilité en generant du code javascript à partir de ton fichier ajax.php

et ensuite dans tu executes ce js dans ton fichier aze :

if(xhr.readyState == 4 && xhr.status == 200){
eval(xhr.responseText);

}

ainsi tu peux appendChilder (sic!) tout ce que tu veux.. j'espère que ca te donne une piste

jl

Ludovic G · Tue 09 May 2006 20:32

Ok Rastafaraï,
Alors dans ce cas jette éventuellement un oeil au code source du client georss de georezo, c'est cette technique qui est utilisée. Cela pourra peut-etre t'aider. Globalement Le code ne diffère pas énormément du code précédent. http://georezo.net/forum/help.php#georss.

dunjil, l'utilisation d'eval() me parait un peu dangereuse dans la mesure ou cette fonction pourrait être utilisée pour éxécuter un code malicieux. Surtout que que la mise en oeuvre à partir d'un XML est assez simple...et propre.

raphaelgeo · Thu 11 May 2006 11:41

bon,
pour des balises html je vais me contenter de innerhtml/<div> mais pour du flux xml je vais essayer avec la fonction importnode(). Apparemment eval() ne marche pas.

comme ca (vu sur carto.net) :

Code:

if (xmlRequest.status == 200) {
                        //parse and import the SVG fragment
                        var importedNode = document.importNode(xmlRequest.responseXML.documentElement,true);
                        //call function addGeom
                        addGeom(importedNode);
                }





function addGeom(node) {
    //extract id of the layer
    var curDynLayer = node.getAttributeNS(null,"id").replace(/_tempGeometry/,"");
    //extract timestamp
    var timestamp = parseInt(node.getAttributeNS(attribNS,"timestamp"));
    //compare current timestamp with timestamp of the node data
    if (timestamp == myMainMap.timestamp) {
        var myGeometryToAdd = document.getElementById(curDynLayer);
        //remove previous content
        if (myMainMap.dynamicLayers[curDynLayer].loaded == "yes") {
            var tempGeometry = document.getElementById(curDynLayer+"_tempGeometry");
            myGeometryToAdd.removeChild(tempGeometry);
        }
        //append new content
        myGeometryToAdd.appendChild(node);
        //set loaded flag to "yes"
        myMainMap.dynamicLayers[curDynLayer].loaded = "yes";
    }
    //decrement layers to load
    myMainMap.nrLayerToLoad[myMainMap.timestamp.toString()]--;
    //set loadData text to hidden after last layer was loaded
    if (myMainMap.nrLayerToLoad[myMainMap.timestamp.toString()] == 0) {
        document.getElementById("loadingData").setAttributeNS(null,"visibility","hidden");
    }
}

nihaoma · Wed 31 May 2006 12:24

Bonjour tout le monde,

J'ai un petit soucis avec DOM et des div, je sais que ce n'est pas exactement le sujet de ce thread, mais comme vous en parlez un peu...

Voila mon soucis:

J'ai créer un DIV avec [ document.createElement("div") ] et l'ai attaché à mon document HTML directement au body grave à [ document.body.appendChild(MonDiv); ]. J'ai appliquer à ce DIV les CSS suivantes: "position:absolute; top:100px; left:100px; background-color:#C0C0C0; width:100px; height:100px;". (la couleur c'est juste pour le voir)
Mon DIV est correctement créer et apparait sur ma page.

J'ai ensuite créer un second DIV avec la même méthode en lui appliquant les CSS suivantes: "position:absolute; top:10px; left:10px; background-color:#FF0000; width:20px; height:20px;".
J'ai ensuite attaché ce DIV au premier avec [ MonDiv.appendChild(MonDeuxiemeDiv); ] et là, je constate une chose étonnante sous IE et sous FF: le second DIV ne fait pas partie du premier !

En effet, si j'avais écris le code suivante en HTML:

<html>
<body>
<div id="MonDiv" style="position:absolute; top:100px; left:100px; background-color:#C0C0C0; width:100px; height:100px;". ">
<div id="MonDeuxiemeDiv" style="position:absolute; top:10px; left:10px; background-color:#FF0000 width:20px; height:20px;".">
</div>
</div>
</body>
</html>

le Second div aurait bien fait partie du premier, j'entends par là que si par exemple je décidais le "bouger" sur la page le premier div, le deuxieme bougerait en meme temps. Par ailleurs avec un tel code HTML, les coordonnées top et left du second DIV ne sont plus relative au haut de la page mais au haut du premier div.

pourtant, en utilisant DOM comme je l'ai décris plus haut, ce comportement n'existe pas, les 2 div sont totalement indépendants, le second n'est meme pas imbriqué dans le premier. En fait, tout se passe comme si j'avais écrit ceci:
[ document.body.appendChild(MonDeuxiemeDiv); ] !!!

Est-ce un comportement "normal" ou bien ais-je oublier quelques chose ???

merci par avance de l'aide que vous pourrez m'apporter car cela me fais énormément défaut !

cordialement

NiHaoMa

dunjl · Wed 31 May 2006 16:09

as tu la possibilité de poster ton code javascript , ce serait plus facile pour t'aider
a+

raphaelgeo · Wed 31 May 2006 16:36

essaye ca :

le div receptacle :

<div id="maman">

<p id="fantome"></p>

</div>

-------------------------

le div à greffer :

<div id="fille">

</div>

code possible :

maman.insertbefore(fille , fantome)

sinon je peux tenvoyer une appliquation toute faite

nihaoma · Wed 31 May 2006 17:34

je peux filer le code, oui, mais ca va etre très long car j'ai un peu plus de 24Ko de JS répartis en 17 fichiers )

mais comme je l'ai dis, on peut résumer ce que je fait ainsi:

var MyDiv = document.createElement("div");
var MyDiv2 = document.createElement("div");

MyDiv.appendChild(MyDiv2);
document.body.appendChild(MyDiv);

ceci devant faire en sorte que MyDiv2 soit contenu dans MyDiv comme le ferais le bout de code HTML que j'ai filer plus haut...or ce n'est pas le cas, MyDiv2 est indépendant de MyDiv....

j'ai aussi essayer le insertBefore, mais ce ne fonctionne pas non plus...

dunjl · Wed 31 May 2006 19:07

salut
je viens de faire un petit test avec ce que tu as donné et cela fonctionne ... que ce soit dans ie ou dans ff

en outre le div2 est bien enfant du div1 je te joins une capture
vérifie peut-être ta css (notamment les héritages)
a+

Fichier(s) joint(s) :
Pour accéder aux fichiers vous devez vous inscrire.

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

Annonce

#1 Tue 09 May 2006 14:18

asynchrone et appendchild

#2 Tue 09 May 2006 17:02

Re: asynchrone et appendchild

#3 Tue 09 May 2006 18:01

Re: asynchrone et appendchild

#4 Tue 09 May 2006 19:41

Re: asynchrone et appendchild

#5 Tue 09 May 2006 20:32

Re: asynchrone et appendchild

#6 Thu 11 May 2006 11:41

Re: asynchrone et appendchild

Code:

#7 Wed 31 May 2006 12:24

Re: asynchrone et appendchild

#8 Wed 31 May 2006 16:09

Re: asynchrone et appendchild

#9 Wed 31 May 2006 16:36

Re: asynchrone et appendchild

#10 Wed 31 May 2006 17:34

Re: asynchrone et appendchild

#11 Wed 31 May 2006 19:07

Re: asynchrone et appendchild

Pied de page des forums