Discussion :

[hannibal974]

Bonjour, voilà mon problème. Je travaille sur symfony2 mais cela ne pose pas de problème pour la résolution de ma question.
J'ai un fichier html dans lequel j'ai une boucle affichant un radio bouton puis un div.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
{% if bib.livre %}
        Livre à éditer : </br>
            Référence du livre :
                {% for livre in bib.livre %}
                    <input type="radio" name="livre_reference" value="{{livre.reference}}" onClick="AfficheSelection('{{livre.reference}}')"/> {{livre.reference}}
                    <div id="{{livre.reference}}">
                        Montant : {{livre.montant}} €
                    </div>
                    </br>
                {% endfor %}
            </br>
    {% endif %}

La question concerne bien le js de ma fonction AfficheSelection(selection).
Cette fonction s'éxécute bien elle ne réalise pas ce que je souhaite. Je voudrais récupérer tous les id des div créés par ma boucle pour n'affiché que le montant du radio bouton coché.

Voilà mon code js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function AfficheSelection (el)
{
    document.getElementById(el).style.display = 'block';
    var allid = document.getElementByTagName('livre_reference');
    for(var i=0; i<tab.lenght; i++)
    {
        if(allid[i].id != el)
            document.getElementById(allid[i].id).style.display = 'none';
    }
}

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementByTagName('livre_reference');

Tu as des balises <livre_reference> dans ton HTML ?
Et quand bien même ce serait le cas, getElementByTagName() n'existe pas !

[hannibal974]

Merci de m'aider sur cette question.
Comme tu as pu le voir non je n'ai pas de balise <livre_reference> dans mon code.
j'ai remplacé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementByTagName('livre_reference');

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByName('livre_reference');

mais sans résultat. J'ai testé de mettre un alert (allid) et il me répond object NodeList.

[hannibal974]

Je viens de modifier mon code js et m'inspirant des foonctionnalités des NodeList que j'ai pu trouvé mais toujours aucun changement quand je clique sur un radiobouton. Cela viens du fait que je ne rentre pas dans ma boucle mais je ne comprends pas pourquoi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function AfficheSelection (el)
{
    document.getElementById(el).style.display = 'block';alert('coucou1');
    var allid = document.getElementsByName('chelem_reference');alert(allid);
    for(var i=0; i<allid.lenght; i++)
    {
        var node = allid.id(i);
        if(node != el)
            document.getElementById(node).style.display = 'none';
    }
}

[sekaijin]

et si tu prenais la chose différemment

dans ton code html si j'a bien vu tu as un input suivit d'un div

la question que je me pose c'est pourquoi ?
pourquoi créer tant de div pour n'en afficher qu'un seul ?

supposons que tu n'a qu'un div
lorsque tu clique sur un bouton radio il te suffit de changer son contenu pour voir le montant du bouton radio cliqué
il n'est alors plus dut tout nécessaire de chercher tous les div mais un seul

Code jsp :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
{% if bib.livre %}
        Livre à éditer : </br>
            Référence du livre :
                {% for livre in bib.livre %}
                    <input type="radio" name="livre_reference" value="{{livre.reference}}" montant =" Montant : {{livre.montant}} €" onClick="AfficheSelection(this)"/> {{livre.reference}}
                    </br>
                {% endfor %}
                    <div id="livre.reference" style="display:none;"/>
            </br>
    {% endif %}

Dans ce cas tu as plein de tag input et un seul div

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function AfficheSelection (input)
{
    var aDiv = document.getElementById("livre.reference");
    aDiv.style.display = 'block';
    aDiv.innerHTML = input.montant;
}

si besoin tu peut aussi repositionner le div

A+JYT

[hannibal974]

Je ne comprends pas vraiment comment le montant peux s'afficher ou s'effacer dans ton exemple mais soit. Tout ceci est dans un formulaire. A la suite de cette affichage, j'ai une liste d'input (radio bouton) qui eux sont toujours les mêmes. Comment puis-je faire pour modifier seulement la partie composé du montant du livre lorsque je clique sur le radiobouton correspondant en laissant affiché la liste de radio bouton qui suit ?

[sekaijin]

c'est ce que fait la fonction js que je t'ai donné
elle récupère le div et l'affiche
puis elle modifie son contenu pour y placer le montant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function AfficheSelection (input)//reçoit en paramètre l'input cliqué onClick="AfficheSelection(this)"
{
    var aDiv = document.getElementById("livre.reference"); //récupérer le div
    aDiv.style.display = 'block'; // le rendre visible
    aDiv.innerHTML = input.montant; //modifier son contenu
}

A+JYT

[hannibal974]

D'accord merci je comprends déjà mieux. Mon dernier souci est qu'avec le code html que tu m'as donnée, je ne peux pas créer le div puisque livre.reference n'est défini que dans la boucle. As-tu simplement inversé les 2 lignes ou est-ce un autre problème ?

[sekaijin]

le div est crée en dehors de la boucle pour qu'il y en ai qu'un seul
A+JYT

[hannibal974]

D'accord. Le problème est que le div ne peut être construit puisqu'il ne connait pas livre.reference en dehors de la boucle.
Voici l'erreur renvoyé : Variable "livre" does not exist in ...

[sekaijin]

livre.reference est un texte comme toto ou titi je n'ai pas mis de variable

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="livre.reference" style="display:none;"/>

en non

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="{{livre.reference}}" style="display:none;"/>

tu peux mettre le texte que tu veux il suffit de mettre le même dans le getElementById.

A+JYT

[Bovino]

Le problème en fait, c'est que tu n'as pas lu (en tout cas pas appliqué) Important : Les règles incontournables d'utilisation de ce forum et que tu as posté ton code serveur et non le code HTML généré comme demandé...

Cependant, avec le code fourni par sekaijin, tu peux t'en sortir très facilement...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="radio" name="livre_reference" value="{{livre.reference}}" montant =" Montant : {{livre.montant}} €" onClick="AfficheSelection(this)"/> {{livre.reference}}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function AfficheSelection (input){ //reçoit en paramètre l'input cliqué onClick="AfficheSelection(this)"
    var aDiv = document.getElementById(input.value); //récupérer le div
    aDiv.style.display = 'block'; // le rendre visible
    aDiv.innerHTML = input.montant; //modifier son contenu
}