Liste et iframe

Fermé

Lanig77 - Modifié le 7 juin 2017 à 17:44
Reivax962 Messages postés 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 - 13 juin 2017 à 15:36

Bonjour,

Débutant en PHP, je souhaite mettre en place une page qui fonctionnerai comme cela:
une liste non modifiable sur la droite (visite1, visite 2, visite 3) et en cliquant sur l'une des entrée de la liste cela modifierai le contenu à aller afficher dans le iframe. (le iframe appelant une page stockée dans un répertoire fils).

merci pour vos retours.

A voir également:

Liste et iframe
Liste déroulante excel - Guide
Liste déroulante en cascade - Guide
Liste de diffusion whatsapp - Guide
Gertrude a préparé la liste des affaires à prendre pour l'excursion. juliette a modifié cette liste en utilisant le mode suivi des modifications proposé par le traitement de texte. - Guide
Supprimer liste déroulante excel ✓ - Forum Excel

4 réponses

Réponse 1 / 4

Kuartz Messages postés 850 Date d'inscription vendredi 13 février 2015 Statut Membre Dernière intervention 15 février 2019 61
Modifié le 12 juin 2017 à 14:00

Bonjour,

Dans ta demande, je ne vois aucun PHP à produire.

En effet, afin de rendre la liste déroulante dynamique avec le contenu du HTML (le iframe) qui varie, je te conseille d'utiliser le Javascript.

Pour la liste déroulante, en HTML + iframe:

<html>

   <select id="selection">
      <option value="visite1">Visite 1</option>
      <option value="visite2">Visite 2</option>
      <option value="visite3">Visite 3</option>
   </select>
  
   <iframe id="monIFrame" src=""></iframe>

</html>

Ensuite, va venir la partie javascript qui va rendre le choix dynamique. J'utilise le framework jquery qu'il suffit d'appeller en écrivant :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Après les balises <html>.

Pour moi, le code ressemblerait à ceci :

<script type="text/javascript">

$("#selection").on("change", function(){
    if ($("#selection").val() == "visite1"){
        $('#monIFrame').attr("src", "blablablablabla") //A la place de blablabla, il faut mettre le nouvel attribut src dans le cas du choix visite1
    }
    else if ($("#selection").val() == "visite2"){
        $('#monIFrame').attr("src", "blablablablabla") //A la place de blablabla, il faut mettre le nouvel attribut src dans le cas du choix visite2
    }
    else if ($("#selection").val() == "visite3"){
        $('#monIFrame').attr("src", "blablablablabla") //A la place de blablabla, il faut mettre le nouvel attribut src dans le cas du choix visite3
    }
})
          
</script>

Je vous laisse me redire si vous avez besoin d'aide.

Cordialement.

Réponse 2 / 4

Lanig77
12 juin 2017 à 21:40

Merci beaucoup, ça marche.
En revanche, au démarrage j'aimerai qu'il me démarre la première visite. Vu que le code ne s’exécute que lorsque la sélection change, la page est blanche et si je sélectionne visite 1, rien ne se passe. D'autre part j'aimerai ajouter une description qui varie en fonction de la sélection à afficher avant le iframe.

Réponse 3 / 4

Kuartz Messages postés 850 Date d'inscription vendredi 13 février 2015 Statut Membre Dernière intervention 15 février 2019 61
Modifié le 13 juin 2017 à 14:55

Bonjour,

Ce que vous appelez le "démarrage" c'est en fait le chargement de la page. Donc en réalité, le HTML de base. On aura donc simplement à modifier le HTML comme ceci :

<html>

   <select id="selection">
      <option value="visite1" selected>Visite 1</option>
      <option value="visite2">Visite 2</option>
      <option value="visite3">Visite 3</option>
   </select>
  
   <iframe id="monIFrame" src="blablablabla"></iframe> <!--Mettre l'url de l'iframe pour la visite 1 à la place de blablabla -->

</html>

Pour ajouter une description qui varie en fonction de ce qui s'affiche dans le iframe (si j'ai bien compris), je vous conseille d'écrire une div précédemment dont le contenu est la description de la visite 1 (si c'est celle qu'on souhaite avoir au load). Et pour la rendre dynamique, on utilise le javascript. Si je refais l'intégralité du code, j'aurais :

<html>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

   <select id="selection">
      <option value="visite1" selected>Visite 1</option>
      <option value="visite2">Visite 2</option>
      <option value="visite3">Visite 3</option>
   </select>

   <div id="description">blablabla</div> <!--Mettez à la place de blablabla la description de la 1ère visite-->
  
   <iframe id="monIFrame" src="blablablabla"></iframe> <!--Mettre l'url de l'iframe pour la visite 1 à la place de blablabla -->

  <script type="text/javascript">

        $("#selection").on("change", function(){
            if ($("#selection").val() == "visite1"){
                $('#monIFrame').attr("src", "blablablablabla"); //A la place de blablabla, il faut mettre le nouvel attribut src dans le cas du choix visite1
                $('#description').text("blablablabla"); //A la place de blablabla, il faut mettre la description de la visite 1
            }
            else if ($("#selection").val() == "visite2"){
                $('#monIFrame').attr("src", "blablablablabla"); //A la place de blablabla, il faut mettre le nouvel attribut src dans le cas du choix visite2
                $('#description').text("blablablabla"); //A la place de blablabla, il faut mettre la description de la visite 2
            }
            else if ($("#selection").val() == "visite3"){
                $('#monIFrame').attr("src", "blablablablabla"); //A la place de blablabla, il faut mettre le nouvel attribut src dans le cas du choix visite3
                $('#description').text("blablablabla"); //A la place de blablabla, il faut mettre la description de la visite 3
            }
        })
          
   </script>

</body>

</html>

Si le problème est résolu, pensez à le préciser. Si vous pensez que j'ai bien apporté mon aide, un +1 sur ma réponse sera le bienvenu :)

Réponse 4 / 4

Reivax962 Messages postés 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
13 juin 2017 à 15:36

Bonjour,

Je suis plutôt gêné de voir invoquer du jQuery pour quelque chose qui se fait au moins aussi rapidement en JavaScript standard.

Tu peux obtenir exactement le même résultat de la façon suivante :

<html>
  <head>
    <script type="text/javascript">

function switchTo(value) {
  var src = "";
  var txt = "";
  switch (value) {
    case "visite1":
      src = "page1";  // Mettre ici la page à afficher pour la 1ère visite
      txt = "description visite 1";
      break;
    case "visite2":
      src = "page2";  // Mettre ici la page à afficher pour la 2ème visite
      txt = "description visite 2";
      break;
    case "visite3":
      src = "page3";  // Mettre ici la page à afficher pour la 3ème visite
      txt = "description visite 3";
      break;
    default: break;
  }
  document.getElementById("monIFrame").src = src;
  document.getElementById("description").innerText = txt;
}

    </script>
  </head>
  <body onload="switchTo('visite1');">
    <select id="selection" onchange="switchTo(this.value);">
      <option value="visite1">Visite 1</option>
      <option value="visite2">Visite 2</option>
      <option value="visite3">Visite 3</option>
    </select>
    <div id="description"></div>
    <iframe id="monIFrame" src=""></iframe>
  </body>
</html>

La réponse de Kuartz est valable, mais il y a des environnements où on évite d'invoquer des bibliothèques tierces...

Xavier

Discussions similaires

Accéder à la liste de numéros de téléphone en 07

Annuaire inversé liste rouge

Rechercher un numéro sur liste rouge

Formule magique excel??????

liste de noms par ordre alphabétique

Discussions similaires

Newsletters