Liste et iframe

Lanig77 -
Reivax962 Messages postés 3672 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

Liste et iframe
Liste déroulante excel - Guide
Liste déroulante en cascade - Guide
Liste code ascii - Guide
Site dangereux liste - Guide
Liste site streaming illégal - Accueil - Services en ligne

4 réponses

Réponse 1 / 4

Kuartz Messages postés 852 Date d'inscription Statut Membre Dernière intervention 61

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

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 852 Date d'inscription Statut Membre Dernière intervention 61

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 3672 Date d'inscription Statut Membre Dernière intervention 1 011

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

Rechercher un numéro sur liste rouge

Votre réponse

Discussions similaires