Variables ForumActif coté client

[Arias]

Bonjour,

J'essaye actuellement de récupérer et d'afficher la comboBox "Sauter Vers" du forum depuis un code en Javascript.

Cependant (puisque le javascript s’exécute coté client je suppose), les variables ne peuvent pas être interprétée par le serveur et je me retrouve donc avec un affichage brut comme vous pourrez le constater dans ce screen:


J’écris en HTML depuis un javascript afin de présenter la combo-box dans une div repliable sur le coté de l’écran.

Voici mon code:

Code:

$(function()
{
    $("body").append('

        <div id="fp203" class="fpanel3">
            <table class="fptable">
                <tr>
                    <td class="fpcontent3">
                        <div class = "JumpPointBody" align="center">
                             <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox"
                             onsubmit="if(document.jumpbox.f.value == -1){return false;}" id="qjump">
                 <fieldset>
                                    <p>
                                        <label>{L_JUMP_TO}:&nbsp;</label>
                                    </p>
                {S_JUMPBOX_SELECT}&nbsp;
                                    <input type="submit" value="{L_GO}" />
                 </fieldset>
                  </form>
                        </div>
                    </td>
                    <td class="fpbuttons">
                        <span class="fpopen3">
                            <img id="tchatOpenBt" src="http://i57.servimg.com/u/f57/17/69/72/66/jumpof10.png" />
                        </span>
                        <span class="fpclose3">
                            <img  id="tchatCloseBt" src="http://i57.servimg.com/u/f57/17/69/72/66/jumpon10.png" />
                        </span>
                    </td>
                </tr>
            <table>
        </div>');

    $("#fp203 .fpbuttons > span").click(function()
    {
        $(this).add($(this).siblings()).toggle();
        $("#fp203").animate({"left":$(this).is(".fpclose3")?-326:0},200);
    });
});

La div est ensuite masquée par defaut sur la page grâce à ce CSS:

Code:


.fpanel3
{
  position: fixed;
}

.fpclose3,.fpopen3
{
  cursor: pointer;
}
.fpclose3
{
  display: none;
}

#fp203
{
  top: 360px;
  left: -326px;
  z-index: 10;
}
#fp203 .fpcontent3
{
  width: 320px;
  height : 300px ;
  border: 1px solid #012942;
  background-image:url(http://img15.hostingpics.net/pics/878423pattern4.png);
  background-repeat: repeat;
}
.JumpPointBody
{
  text-align: center;
  margin: 0px;
  width: 100%;
  height: 100%;
  font-weight: bolder;
}

Connaîtriez vous un moyen d’éviter ce phénomène?

[Arias]

up  :zen: 

[Arias]

Re-up   

[Arias]

Re-re-up...   

[[Nihil]]

Je ne crois pas que cela soit possible

Néanmoins, cela fonctionnerait-t-il si tu le laisses dans ton template, en CSS tu le masques, puis en Javascript tu récupères son contenu HTML, et tu le rajoutes dans ta div repliable ?

[Arias]

Merci pour ta réponse

J'avais pensé à quelquechose dans le genre, mais comment le mettre en oeuvre?

disons que je mette la comboBox dans une div avec un id="maComboBox" et en visibility:"hidden";
ensuite en javascript je peux faire un getElementById("maComboBox");

mais que faire de la variable que j'obtiens en javascript?

[[Nihil]]

En fait tu vas stocker ton élément dans une variable.
Puis au lieu d'append ton long HTML comme avant, tu vas append la variable
Je te conseille de faire un premier test sans le visibility:"hidden" ^^

[Arias]

D'accord j'essaye ça et je reviens pour donner des nouvelles.

Merci

[Arias]

Cela fonctionne avec ta solution

La combo s'affiche désormais correctement:



Pour ceux qui chercheraient la solution:

dans le javascript:

Code:

var jumpbox = document.getElementById("jumpBox");

Puis en concaténant mon ancien code avec le innerHtml de cette variable:

Code:

append('
[...mon code html...]
<div id="comboJumpPoint">
    ' + jumpbox.innerHTML + '
</div>
[...mon code html...]');

Cela fonctionne même avec le css "visibility: hidden;" puisque la div elle même n'est pas rapatriée dans le innerHtml, seul le contenu est obtenu.

Merci encore pour la piste que tu m'as donnée