[DOM] Changement de html dans une div grace à javascript

Bonjour
voila j'ai un bug dans un programme. Celui ci doit changer le cnotenu d'une div en changeant le code de cette div
On change le code kl'orsqu'on clique sur un lien
voila le code :
La fonction javascript

function affichelisten(toThis)
{
if (document.getElementById)
{
document.getElementById("ecoute").innerHTML = toThis;
}
else if (document.all)
{
document.all["ecoute"].innerHTML = toThis;
}
}



Puis le lien qui doit faire changer le code XHTML de la div en question :

<a href="#" onClick="affichelisten('<object type="application/x-shockwave-flash" data="http://localhost/test3/audio/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="../musique/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=$liend">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>'
)">
Ecouter</a><br/>

Enfin le resultat :

' )"> Ecouter

:( qui est pas ce que j'attend.... Quand on clique dessus il ne se passe rien à mon grand désespoir....

Il faut échapper les ".

Code:

---

1 2 3 4 5 6 7 8 9

<a href="#" onClick="affichelisten('<object type=\'application/x-shockwave-flash\' data=\'http://localhost/test3/audio/player.swf\' id=\'audioplayer1\' height=\'24\' width=\'290\'> <param name=\'movie\' value=\'../musique/player.swf\'> <param name=\'FlashVars\' value=\'playerID=1&amp;soundFile=$liend\'> <param name=\'quality\' value=\'high\'> <param name=\'menu\' value=\'false\'> <param name=\'wmode\' value=\'transparent\'> </object>' )"> Ecouter</a><br/>

---

En fait cela doit être ca sauf que cela ne marche pas plus
parce que j'ai oubliais de préciser que tout ce code se trouve dans une variable PHP... donc voila le code....
Cela s'affiche correctement mais cela donne rien...


$premier=<<<EOT
<a href="#" onClick="affichelisten('<object type=\'application/x-shockwave-flash\' data=\'../musique/player.swf\' id=\'audioplayer1\' height=\'24\' width=\'290\'>
<param name=\'movie\' value=\'../musique/player.swf\'>
<param name=\'FlashVars\' value=\'playerID=1&amp;soundFile=$liend\'>
<param name=\'quality\' value=\'high\'>
<param name=\'menu\' value=\'false\'>
<param name=\'wmode\' value=\'transparent\'>
</object>'
)">

2 choses :

- document.getElementById fonctionne avec tous les navigateurs modernes. Inutile de faire des tests saugrenus avec document.all... :aie:

- Plutôt que de t'embêter à trimbaler cette fichue chaine "échappée" tu peux utiliser un élément textarea. Le contenu d'un tel élément est considéré comme du texte, il n'est pas interprêté. Tu peux ensuite récupérer le texte qui s'y trouve en utilisant également la propriété innerHTML. Pour finir, on le cache, car il ne sert juste, dans ce cas, qu'à contenir cette chaîne. C'est une technique intéressante chaque fois qu'on a à générer des fragments de DOM ± volumineux à la volée. On peut également y enfouir un template, pour ceux qui utilisent prototype.js. Bref, le voici :

Code:

---

1 2 3 4 5 6 7

<textarea id="pouet" style="display: none;"><object type="application/x-shockwave-flash" data="http://localhost/test3/audio/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="../musique/player.swf"> <param name="FlashVars" value="playerID=1&amp;soundFile=$liend"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object></textarea>

---

Ton lien peut ensuite s'écrire comme ceci :

Code:

---

<a href="#" onClick="affichelisten();"/>

---

Et ta fonction :

Code:

---

1 2 3 4 5

function affichelisten() { var content = document.getElementById("pouet").innerHTML; // ... document.getElementById("ecoute").innerHTML = content; }

---

En fait si j'utilise document.all..
c'est parce que cela DOIT fonctionner avec les vieux navigateurs aussi
:roll:

Mais merci je vais essayer ca tout de suite

Citation:

---

Envoyé par sebxid

En fait si j'utilise document.all..
c'est parce que cela DOIT fonctionner avec les vieux navigateurs aussi
:roll:

---

Argh, pas de chance... :aie:

En fait si il y a une pb, c'est a propos de cette variable Php
$liend
que l'on trouve la dedant :
<param name="FlashVars" value="playerID=1&amp;soundFile=$liend">

Pacequ'en fait, je dois faire une proposition de morceau a ecouter. et lorsque l'on clique sur ecoute, le div doit afficher le player et mettre en route la sique
Bien sur l'addresse du morceau se trouve justement dans cette variable $liend.
J'ai essaye un truc comme ca mais...
<param name="FlashVars" value="playerID=1&amp;soundFile=<?php echo $liend; ?>">

Ca ne marche pas

Je ne suis pas sûr de comprendre mais je te répondrais bien qu'il suffit de sortir sa valeur au lieu de "$liend" dans ton fragment HTML. Non ?

j'ai une proposition de liste de morceau à écouter
Cette page est construite en php car l'addresse des morceaux mp3 est sur une base de donnée.
Le truc c'est que lorsqu'on clique sur : ecouter,
alors un div (qui doit contenir le player ) change et le player se met en route (c'est à dire que le div se remplit du code html du player)

OK, donc c'est un fragment purement statique. Tu ne peux pas t'arranger à sortir la valeur de "$liend" dans ce fragment ?

oui voila.
Le serveur prépare le code htlm à afficher quand il construit sa page. Une fois la page faite, c'est le navigateur qui doit se débrouiller il a toutes les infos qui lui faut.
(Je suis pas mauvais en php, mais alors javascript... et encore moins ajax a ce qui parait serait l'outils le plsu approprié, mais la j'ai pu le temps)