PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

#1 06-03-2011 14:23:24

atino
Membre
Inscription : 06-03-2011
Messages : 8

lien javascript vers une div sur la meme page

bonjour,

je voudrais creer des liens d'un menu vers une div sur la meme page sans recharger la page complete
je m'explique :

j'ai une div principale qui fait la page index.php ,j'ai plusieurs div (div topmenu, div menugauche et div centrale), dans la div top menu j'ai une page topmenu.php dans la div menugauche j'ai la page menugauche.php
dans la topmenu ,j'ai un menu dans une table ,  ---> accueil et contact, je voudrais quand je clique sur contact que la page index.php reste comme elle mais que la div principale soit changer avec les infos du lien contact

____________________________________
|                                                              |
|                                                              |
|    div top menu       accueil contact           |
|___________________________________ |
|               |                                             |
|   div        |                                             |
| menugau |                                             |
|               |                                             |
|     lien1   |               DIV principale          |
|     lien2   |                                             |
|               |                                             |
|               |                                             |
|               |                                             |
|               |                                             |
|               |                                             |
|               |                                             |
____________________________________

donc pour resumer quand je clique sur lien1 (par exemple) la page lien.php vienne se mettre la div principale

pouvez vous me faire le script pour le lien1 ,j'essaierai de le comprendre de le modifier pour le faire les autres liens


merci d'avance pour votre aide


Hors ligne

#2 06-03-2011 15:00:46

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

Salut,
jquery+jquery ui semble être la solution ideale wink
si tu veux partir dans ce sens, je te met des exemples

a++

Hors ligne

#3 06-03-2011 16:29:29

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : lien javascript vers une div sur la meme page

Saluton,
Et avec javascript désactivé, ça va fonctionner comment ?


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#4 06-03-2011 19:35:27

atino
Membre
Inscription : 06-03-2011
Messages : 8

Re : lien javascript vers une div sur la meme page

pierrot, si tu peux me mettre en exemple ce que tu dis ca serait pas mal oué wink

maljuna si le javascript est désactivé, j'ai deja mis un code sur le menugauche (ca aggrandit reduit la police d'ecriture) que j'ai adapté pour mon menugauche; donc en local chez moi ca marche maintenant tu parles de ceux qui vont aller sur le site que je vais mettre en ligne

Hors ligne

#5 06-03-2011 20:48:28

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

MK->
y a encore des dinosaures ??? big_smile:D

atino->
j'te fais çà pour demain wink
a++

Hors ligne

#6 06-03-2011 23:01:10

atino
Membre
Inscription : 06-03-2011
Messages : 8

Re : lien javascript vers une div sur la meme page

merci c cool , un seul lien suffira ,je ferai le reste pour comprendre la demarche

Hors ligne

#7 16-03-2011 03:27:16

dez
Membre
Inscription : 16-03-2011
Messages : 1

Re : lien javascript vers une div sur la meme page

bonjour a tous,
J'ai exactement la meme question (je crois) que Atino et j'attends la reponse de Pierrot, ou quelqu'un d'autre
Pour demain ?
hmm

la difference (si c'en est une), c'est que je veux afficher une image
et ma page n'est pas php mais html

____________________________________
|                         |                                   |
|   div                  |                                   |
| menu                |                                   |
|                         |                                   |
|     lien image1    |       DIV principale        |
|     lien image 2   |                                   |
|                         |         (image1,2, ..)       |
|                         |                                    |
|                         |                                    |
____________________________________

Merci a tous

Hors ligne

#8 16-03-2011 08:11:11

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

zut, j'vous ai oublié big_smile
j'monte mon portable du taf et j'vous envoie çà wink
a++

Hors ligne

#9 16-03-2011 12:46:02

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

salut,

désolé pour le retard wink


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="menu">
    <a id="choix1" href="#">Choix 1</a>
    <a id="choix3" href="#">Choix 2</a>
</div>
<div id="principal">

</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#choix1").click(function(e){
            e.preventDefault();
            $('#principale').empty().append($.ajax({
                url: 'choixmenu1.php',
                async: true
            }).responseText);
            return false;
        });
        $("#choix2").click(function(e){
            e.preventDefault();
            $('#principale').empty().append($.ajax({
                url: 'choixmenu2.php',
                async: true
            }).responseText);
            return false;
        });
    });
</script>    
 


<?php // choixmenu1.php
    echo "l'utilisateur a choisi le menu 'choix 1'";
?>

<?php // choixmenu2.php
    echo "l'utilisateur a choisi le menu 'choix 2'";
?>

 

bon, si vous avez compris, on peut optimiser wink

a++

Hors ligne

#10 16-03-2011 23:54:28

atino
Membre
Inscription : 06-03-2011
Messages : 8

Re : lien javascript vers une div sur la meme page

salut, je n'arrive pas à faire aller le code mais c'est peut etre à cause de la structure de mon code

____________________________________
|                                                              |
|                                                              |
|    div top menu       accueil contact           |
|___________________________________ |
|               |                                             |
|   div        |                                             |    =====> ca c'est ma page index.php
| menugau |                                             |
|               |                                             |
|     lien1   |               DIV principale          |
|     lien2   |                                             |
|               |                                             |
|               |                                             |
|               |                                             |
|               |                                             |
|               |                                             |
|               |                                             |
____________________________________

dans cette page index.php, j'ai fait des includes : top_menu.php
                                                                       menu.php (menu gauche)
                                                                       centre.php (div principale)
                                                                       footer.php

dans menu.php j'ai fait comme ca: dans un tableau

        <a href="#" id="a1" class="menulinks" title="lien1">lien 1</a>     
        <a href="#" id="a2" class="menulinks" title="lien2">lien 2</a>     
        <a href="#" id="a3" class="menulinks" title="lien3">lien 3</a>     
        <a href="#" id="a4" class="menulinks" title="lien4">lien 4</a>

dans centre.php ,je n'ai qu'une div
<div id="principale">
</div>

donc le code javascript se met dans la page menu.php ? dans le body ou dans le head ?

et le code php, la je n'ai pas compris il se met dans centre.php ?

donc quand je clique sur "lien 1" je voudrais que la page lien_1.php se mette dans la div principale qui se trouve sur la page centre.php

ou alors s'il y a une solution plus simple, je suis preneur wink

met en tout cas pour ton aide smile

Dernière modification par atino (17-03-2011 00:06:18)

Hors ligne

#11 17-03-2011 00:35:43

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

>>donc le code javascript se met dans la page menu.php ?
tu le met ou tu veux wink

et le code php, la je n'ai pas compris il se met dans centre.php ?
j'ai mis le nom des fichiers en commentaire wink



a++

Hors ligne

#12 17-03-2011 13:41:45

atino
Membre
Inscription : 06-03-2011
Messages : 8

Re : lien javascript vers une div sur la meme page

quand je fais ca, ca me met ....localhost/site/# et ca n'affiche pas la page du lien dans la div principale

Hors ligne

#13 17-03-2011 14:08:53

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

montre ton code wink
a++

Hors ligne

#14 17-03-2011 14:52:47

atino
Membre
Inscription : 06-03-2011
Messages : 8

Re : lien javascript vers une div sur la meme page

page index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>index</title>
<link rel="stylesheet" href="css/feuille.css" type="text/css" />

</head>

<body>
    <div id="principale">
   
        <?php include ("header.php") ?>
        <?php include ("top_menu.php") ?>
        <?php include ("menu.php") ?>
        <?php include ("centre.php") ?>
        <?php include ("footer.php") ?>

    </div>
</body>
</html>


Menu.php


<script type="text/javascript">

    $(document).ready(function() {

        $("#choix1").click(function(e){

            e.preventDefault();

            $('#principale').empty().append($.ajax({

                url: 'choixmenu1.php',

                async: true

            }).responseText);

            return false;

        });

        $("#choix2").click(function(e){

            e.preventDefault();

            $('#principale').empty().append($.ajax({

                url: 'choixmenu2.php',

                async: true

            }).responseText);

            return false;

        });

    });

</script>   

<script type="text/javascript">
nSpace=4   // how many space maximum between each letter
nSpeed=100 // the speed of the animation
timerRADM=null;
function LetterSpacingMenu() {
        if(document.getElementById){
        lnks = Math.floor(Math.random()*lnk.length);
        letterSpacing = Math.floor(Math.random()*nSpace);
        lnk[lnks].style.letterSpacing = letterSpacing + "px";
        timerRADM = setTimeout("LetterSpacingMenu()", nSpeed);
    }
}
function StopMenu() {
        if(document.getElementById) {
        clearTimeout(timerRADM);
        for(i=0;i<lnk.length;i++){
            lnk[i].style.letterSpacing = 0 + "px";
        }
    }
}
function RADMenuInit() {
        if(document.getElementById) {
        lnk = document.getElementById("menugauche").getElementsByTagName("a");
        cnt = document.getElementById("menugauche");
        cnt.style.textAlign= "center";
        cnt.onmouseover=StopMenu;
        cnt.onmouseout=LetterSpacingMenu;
        LetterSpacingMenu();
    }
}
</script>           
  </head>     
  <body  onload="RADMenuInit();">   
    <div id="menugauche">   
        <table id="table_menugauche">
            <tr>
                <td class="cellule" >
                </td>
            </tr>
           
           
            <tr>
                <td class="cellule">
      <a href="#" id="a1" class="menulinks" title="lien1">lien 1</a>       
                 </td>
            </tr>
     
            <tr>
                <td class="cellule">
      <a href="#" id="a2" class="menulinks" title="lien2">lien 2</a>       
                  </td>
              </tr>
              <tr>
                  <td class="cellule">
      <a href="#" id="a3" class="menulinks" title="lien3">lien 3</a>       
                </td>
            </tr>
            <tr>
                  <td class="cellule">
      <a href="#" id="a4" class="menulinks" title="lien4">lien 4</a>
                  </td>
            </tr>
            <tr>
                <td class="cellule"></td>
            </tr>
        </table>   
    </div>     
  </body>
</html>

Lien1.php

AMMA ASSIS
       
L'Anmma (ou amma) est une technique de massage japonais d'origine chinoise. Anmma qui signifie calmer avec les mains a été inventée en Chine sous le nom original Anmo, et adoptée par les japonais il y a plus de mille ans.
       

centre.php

<div id="centre">
</div>

Hors ligne

#15 17-03-2011 14:59:10

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

tu as oublié çà :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

a++

Hors ligne

#16 17-03-2011 15:03:12

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

tu as lu le script que je t'ai donné ????
vé essayer d'être un peu plus pédégogue big_smile:D


-----> <a id="choix1" href="#">Choix 1</a>
----->  $("#choix1").click(function(e){.....

capicho ??? big_smile

a++

Hors ligne

#17 17-03-2011 20:39:01

atino
Membre
Inscription : 06-03-2011
Messages : 8

Re : lien javascript vers une div sur la meme page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="http://www.w3.org/1999/xhtml">

     
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>menu</title>
<link rel="stylesheet" href="css/feuille.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>


   
<script type="text/javascript">
nSpace=4   // how many space maximum between each letter
nSpeed=100 // the speed of the animation
timerRADM=null;
function LetterSpacingMenu() {
        if(document.getElementById){
        lnks = Math.floor(Math.random()*lnk.length);
        letterSpacing = Math.floor(Math.random()*nSpace);
        lnk[lnks].style.letterSpacing = letterSpacing + "px";
        timerRADM = setTimeout("LetterSpacingMenu()", nSpeed);
    }
}
function StopMenu() {
        if(document.getElementById) {
        clearTimeout(timerRADM);
        for(i=0;i<lnk.length;i++){
            lnk[i].style.letterSpacing = 0 + "px";
        }
    }
}
function RADMenuInit() {
        if(document.getElementById) {
        lnk = document.getElementById("menugauche").getElementsByTagName("a");
        cnt = document.getElementById("menugauche");
        cnt.style.textAlign= "center";
        cnt.onmouseover=StopMenu;
        cnt.onmouseout=LetterSpacingMenu;
        LetterSpacingMenu();
    }
}
</script>  
         
  </head>    
  <body  onload="RADMenuInit();">    
 
    <div id="menugauche">    
    <table id="table_menugauche">
      <tr>
        <td class="cellule" >
        </td>
      </tr>
     
     
      <tr>
        <td class="cellule">
      <a id="choix1" href="#">Choix 1</a>
   
          </td>
      </tr>
     
        <tr>
          <td class="cellule">
      <a id="choix3" href="#">Choix 2</a>
     
            </td>
          </tr>
          <tr>
            <td class="cellule">
      <a href="#" id="a3" class="menulinks" title="naturopathie">Naturopathie</a>      
          </td>
          </tr>
            <tr>
            <td class="cellule">
      <a href="#" id="a4" class="menulinks" title="luminotherapie">Luminotherapie</a>
            </td>
          </tr>
          <tr>
            <td class="cellule"></td>
          </tr>
        </table>  
    </div>    
   
    <script type="text/javascript">
    $(document).ready(function() {
        $("#choix1").click(function(e){
            e.preventDefault();
            $('#centre').empty().append($.ajax({
                url: 'choixmenu1.php',
                async: true
            }).responseText);
            return false;
        });
        $("#choix2").click(function(e){
            e.preventDefault();
            $('#centre').empty().append($.ajax({
                url: 'choixmenu2.php',
                async: true
            }).responseText);
            return false;
        });
    });
</script>    

   
  </body>
</html>
 

j'ai créée 2 pages choix choixmenu1.php et choixmenu2.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>

<body>
<?php echo " l'utilisateur a choisi le 'menu 1'" >
</body>

</html>
 

il n'affiche pas "l'utilisateur a choisi...." et en bas il affiche "erreur sur la page"
je ne vois pas ou est l'erreur

désolé de mon noobisme hmm

Hors ligne

#18 17-03-2011 21:03:02

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

je crois que nu n'as pas bien compris wink

je me cite :

[citation]
-----> <a id="choix1" href="#">Choix 1</a>
----->  $("#choix1").click(function(e){.....
[/citation]

ensuite, le .php appelé en ajax doit retourner le strict html nécessaire au remplissage de la div,
donc aucune entête, pas de méta, pas de <html></html> pas de <body></body> wink

a++

Hors ligne

#19 18-03-2011 10:05:33

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

salut,

explication :


creation du lien en html :

<a id="choix1" href="#">Choix 1</a>

on remarque id="choix1"
creation de la div a rafraichir en html :
<div id="centre"></div>

interception du clique sur le lien :
$("#choix1").click(function(e){}

il faut comprendre que lors du clique sur l'élément qui a l'id="Choix1" le code qui est compris entre { et } sera exécuté.
donc en les accolades il faudra mettre le code qui :
1)chargera le html
2)l'inclura entre les balise <div> et </div>

comme suis :

        $("#choix1").click(function(e){
            e.preventDefault();
            $('#centre').empty().append($.ajax({
                url: 'choixmenu1.php',
                async: true
            }).responseText);
            return false;
        });

$('#centre') va sélectionner l'élément qui a pour id "centre".
empty() va vider son contenu
append(xx) va y mettre le contenu de xx

exemple :
xx='<p bgcolor ="red">Ce contenu est en rouge</p>';
$('#centre').empty().append(xx);
résultat :
-----------------------------------------------------
| Ce contenu est en rouge                         |
|                                                            |
|                                                            |
|                                                            |
|                                                            |
-----------------------------------------------------
xx='<br/><p bgcolor ="green">Ce contenu est en vert</p>';
$('#centre').append(xx);
résultat :
-----------------------------------------------------
| Ce contenu est en rouge                         |
| Ce contenu est en vert                           |
|                                                            |
|                                                            |
|                                                            |
-----------------------------------------------------
notez que le .empty() n'est pas signifié, donc le contenu existant restera.

xx='<p>Nouveau contenu sans attribut</p>';
$('#centre').empty().append(xx);
résultat :
-----------------------------------------------------
| Nouveau contenu sans attribut                 |
|                                                            |
|                                                            |
|                                                            |
|                                                            |
-----------------------------------------------------
Cette fois-ci le .empty() vide le contenu et le .append(xx) met le contenu de la variable xx dans la div qui a l'ID = "centre"

j’espère avoir été clair wink
bon, si tu as compris cela, on passe a la fonction ajax wink

Il n'est pas question que je debug ton code wink
Le but est que tu comprenne le principe de fonctionnement.
je te rappel qu'a la base, un lien te suffisait wink

Si tu as d'autre question, je reste à ta disp wink

bon courage.

a++

Hors ligne

#20 18-03-2011 12:20:18

atino
Membre
Inscription : 06-03-2011
Messages : 8

Re : lien javascript vers une div sur la meme page

Pour le code, j'aurai essayé wink

Merci pour l'explication du script, je pense l'avoir comprise
donc le script : $("#choix1").click(function(e){
                      e.preventDefault();
                      $('#centre').empty().append($.ajax({
                      url: 'choixmenu1.php',
                      async: true
                      }).responseText);
                      return false;
                      });

On l'appelle sur la page (menu.php) ou il y a le menu
On lui dit d'aller sur la div "centre" par $('#centre') ,cette div "centre" n'est pas dans la page menu.php mais dans la page centre.php

les pages menu.php et centre.php sont "incluses" dans la page index.php via <?php include ("menu.php") ?> et <?php include ("centre.php") ?>

le script que tu as expliqué ne doit pas s'appeler dans la page centre.php ni index.php ?

Hors ligne

#21 18-03-2011 12:45:19

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : lien javascript vers une div sur la meme page

Ton problème provient du fait que tu confonds la notion de page et de script.
En fait javascript ne connait pas PHP, il ne connait que le serveur http et la page d'appel (HTML, éventuellement générée par PHP).
Pour toi, il s'agit du script PHP incluant de plus haut niveau.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#22 18-03-2011 13:06:16

Pierrot
Ancien nouveau
Inscription : 08-05-2009
Messages : 1 165

Re : lien javascript vers une div sur la meme page

Salut,
les pages menu.php et centre.php n'existent pas.
la page, c'est index.php.

et le script js, tu ne l'appel jamais wink
il est appelé par l'utilisateur quand il clique sur le lien.


a++

Hors ligne

#23 06-02-2014 09:20:46

rafiki
Membre
Inscription : 06-02-2014
Messages : 1

Re : lien javascript vers une div sur la meme page

Bonjour à tous et toutes et attention au déterrage de topic! smile

Plutôt débutant dans la conception de site, je cherche à faire la même chose qu'Atino a tenté, et j'avoue que je bloque un peu.

pour tenter de faire simple mais relativement structuré, j'ai fait un menu déroulant horizontal, avec forcément des liens qui renvoient à des pages. Sauf qu'une structure "simple" comme j'ai fait en première ébauche ne suffira pas à arriver au résultat attendu (j'aimerais implanté un historique de navigation sur ce site, et la possibilité de garder des articles en favoris).

Et je me suis donc dit (j'espère à juste titre big_smile) que la gestion de l'historique ne navigation serait plus simple si il y a une seule et unique page, avec les différents contenus imbriqués dans celle ci.

J'en suis rendu à ce point :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Le Chocolat</title>
<link rel="stylesheet" media="screen" type="text/css" href="menu.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("menu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
        this.className+="sfhover";
      }
      sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("sfhover\\b"), "");
      }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}  
</script>
</head>

<BODY>
<div style="text-align : center;">
<h1 class="centre">Le chocolat</h1>
<br />
<p style="text-indent:30px"><ul id="menu">

<li>
<a id="maya" href="#">Histoire et Origine</a>
<ul>
<li><a id="maya" href="#">Epoque Maya</a></li>
<li><a id="azteque" href="Azteque.html">Epoque Aztèque</a></li>
<li><a id="1494" href="1494.html">1494 - 1662</a></li>
<li><a id="1700" href="1700.html">1700 - 1950</a></li>
</ul>
</li>

<li>
<a id="fabrication" href="Fabrication.html">Techniques de Fabrication</a>
<ul>
<a id="fabrication" href="Fabrication.html">Fabrication</a>
<li><a id="ecabossage" href="Ecabossage.html">Les étapes</a>
<ul>
<li><a id="ecabossage" href="Ecabossage.html">Ecabossage, fermentation et séchage</a></li>
<li><a id="torrefaction" href="Torrefaction.html">Torréfaction, concassage et broyage</a></li>
<li><a id="ajout" href="Ajout.html">Ajout d'ingrédients et conchage</a></li>
<li><a id="moulage" href="Moulage.html">Tempérage et Moulage</a></li>
</ul></li>
<li><a id="blanchiment" href="Blanchiment.html">Blanchiment du chocolat</a></li>
</ul>
</li>


<li>
<a id="type" href="Type.html">Formes et Types de Chocolat</a>
<ul>
<li><a id="type" href="Type.html">Types de chocolat</a></li>
<li><a id="appelation" href="Appelation.html">Appélations spécifiques</a></li>
<li><a id="crus" href="Crus.html">Principaux crus de cacao</a></li>
<li><a id="formes" href="Formes.html">Différentes formes</a></li>
</ul>
<li><a id="degustation" href="Degustation.html">Consommation</a>
<ul>
<li><a id="degustation" href="Degustation.html">Dégustation</a></li>
<li><a id="consommation" href="Consommation.html">Consommation mondiale</a></li>
</ul></li>

</li>

<li>
<a id="effets" href="Effets.html">Santé</a>
<ul>
<li><a id="effets" href="Effets.html">Préambule</a></li>
<li><a id="circulatoire" href="Circulatoire.html">Effets prouvés</a>
<ul>
<li><a id="circulatoire" href="Circulatoire.html">Système circulatoire</a></li>
<li><a id="metaux" href="Metaux.html">Métaux lourds</a></li>
<li><a id="obesite" href="Obesite.html">Risques d'obésité</a></li>
<li><a id="psycho" href="Psycho.html">Psychostimulation</a></li>
<li><a id="benefices" href="Benefices.html">Autres bénéfices</a></li>
</ul></li>
<li><a id="aphrodisiaque" href="Aphrodisiaque.html">Effets non prouvés</a>
<ul>
<li><a id="aphrodisiaque" href="Aphrodisiaque.html">Aphrodisiaque</a></li>
<li><a id="acne" href="Acne.html">Acné</a></li>
<li><a id="addiction" href="Addiction.html">Addictions</a></li>
</ul></li>
<li><a id="animaux" href="Animaux.html">Chez les animaux</a></li>
</ul>
</li>
</ul>
<br />
<br />
</p>
</div>

<div id="principal">

</div>


<script type="text/javascript">
  $(document).ready(function() {
        $("#maya").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'maya.php',
                async: true
            }).responseText);
            return false;
        });
            $("#azteque").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'azteque.php',
                async: true
            }).responseText);
            return false;
        });
            $("#1494").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: '1494.php',
                async: true
            }).responseText);
            return false;
        });
            $("#1700").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: '1700.php',
                async: true
            }).responseText);
            return false;
        });
            $("#fabrication").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'fabrication.php',
                async: true
            }).responseText);
            return false;
        });
            $("#ecabossage").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'ecabossage.php',
                async: true
            }).responseText);
            return false;
        });
            $("#torrefaction").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'torrefaction.php',
                async: true
            }).responseText);
            return false;
        });
            $("#ajout").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'ajout.php',
                async: true
            }).responseText);
            return false;
        });
            $("#moulage").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'moulage.php',
                async: true
            }).responseText);
            return false;
        });
            $("#blanchiment").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'blanchiment.php',
                async: true
            }).responseText);
            return false;
        });
            $("#type").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'type.php',
                async: true
            }).responseText);
            return false;
        });
            $("#appelation").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'appelation.php',
                async: true
            }).responseText);
            return false;
        });
            $("#crus").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'crus.php',
                async: true
            }).responseText);
            return false;
        });
            $("#formes").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'formes.php',
                async: true
            }).responseText);
            return false;
        });
            $("#degustation").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'degustation.php',
                async: true
            }).responseText);
            return false;
        });
            $("#consommation").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'consommation.php',
                async: true
            }).responseText);
            return false;
        });
            $("#effets").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'effets.php',
                async: true
            }).responseText);
            return false;
        });
            $("#circulatoire").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'circulatoire.php',
                async: true
            }).responseText);
            return false;
        });
            $("#metaux").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'metaux.php',
                async: true
            }).responseText);
            return false;
        });
            $("#obesite").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'obesite.php',
                async: true
            }).responseText);
            return false;
        });
            $("#psycho").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'psycho.php',
                async: true
            }).responseText);
            return false;
        });
            $("#benefices").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'benefices.php',
                async: true
            }).responseText);
            return false;
        });
            $("#aphrodisiaque").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'aphrodisiaque.php',
                async: true
            }).responseText);
            return false;
        });
            $("#acne").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'acne.php',
                async: true
            }).responseText);
            return false;
        });
            $("#addiction").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'addiction.php',
                async: true
            }).responseText);
            return false;
        });
            $("#animaux").click(function(e){
            e.preventDefault();
            $('#principal').empty().append($.ajax({
                url: 'animaux.php',
                async: true
            }).responseText);
            return false;
        });
  });
</script>

</body>
</html>


Explications :

dans le premier encadré : le haut de mon index.php, avec les différents scripts (pour mon menu, pour jquery entre autres), et la feuille de style.

dans le deuxième encadré : la liste dont je me sers pour mon menu. Avec comme seule entrée modifiée correctement (c'est mon test pour voir si ça fonctionne, et en l'occurence, non) :

<li><a id="maya" href="#">Epoque Maya</a></li>

Et enfin le troisième encadré avec le script sensé renvoyé le lien de la liste dans la div "principal".


Du coup, j'aimerais si possible solliciter votre aide pour m'aider à comprendre ce que j'oublie, ou ce que je fais mal, parce qu'en bon "autodidacte", j'avoue avoir quelques difficultés.

Je reste à votre disposition, et vous remercie dans tous les cas, ne serait-ce que pour l'aide qu'a pu me procurer la lecture de quelques topics de ce forum!

Lucas

Hors ligne

#24 08-02-2014 15:37:28

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 620
Site Web

Re : lien javascript vers une div sur la meme page

Bonjour

@Atino

1)

if(document.getElementById){...

Ce code va générer une erreur, car il faut préciser quel ID d'élément on veut tester l'existence : ex: if (document.getElementById('MaDiv')){....
2)

lnk = document.getElementById("menugauche").getElementsByTagName("a");

Ce code ne veut rien dire. En effet si on recherche un élément par son ID, étant unique, inutile d'aller rechercher une balise <a> qui elle ne l'est pas. Autant mettre une ID en attribut de la balise <a> ciblée cela sera plus performant et plus simple.
3) Si l'on souhaite appeler une fonction ajax à partir d'un lien, personnellement je déconseille d'utiliser une balise <a> avec un href="#", le lien hypertexte étant toujours prioritaire sur l'appel javascript et pouvant générer des effets de bords selon le navigateur utilisé (et évite un traitement supplémentaire jquery avec un e.preventDefault partout dans le code). Je conseille plutôt de passer par un <span>, une <div> ou un titre <h4> (en respectant la hierarchie des titres en conséquence pour le référencement SEO) avec sur lequel on rajoutera en style CSS un cursor:pointer pour montrer que l'élément est cliquable et dans lequel on ajoutera un event onclick pointant vers la fonction js, réservant ainsi les events au niveau jquery à la mécanique applicative de l'interface. Avec un span cela donnerait : <span id="choix1" style="cursor:pointer" onclick="appel_ajax()">Choix 1</span>. Ensuite du côté javascript au lieu de passer par une fonction anonyme on écrit : function appel_ajax(){ ... }

++

Dernière modification par Jc (08-02-2014 15:38:22)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#25 17-10-2014 15:51:00

Atqazd
Membre
Inscription : 17-10-2014
Messages : 2

Re : lien javascript vers une div sur la meme page

C'est une merveille pour l'partage , les yeux et la découverte

Hors ligne

Pied de page des forums