Se connecter avec
S'enregistrer | Connectez-vous

Liens Ajax

Dernière réponse : dans Programmation

Bonjour à tous.

J'ai créée un menu avec des liens au milieu gauche de ma page web.

J'ai utilisé la technique ajax pour que lorsque je clique sur un lien, la page
s'affiche sans qui yai un rechargement de la page, c-a-d tout en restant sur la même page.
Jusqu'ici tout va bien, mais le problème c'est que lorsque je fait un clique sur un de mes liens, la position de ma page remonte en haut , alors que moi je veux que ca reste toujours au milieu gauche, c-a-d l'endroit où mes menu sont placés

Merci

Autres pages sur : liens ajax

Lassé par la pub ? Créez un compte
Expert Programmation

Bonjour,

La solution pourrait-être de mettre une ancre, et d'appeler la page avec l'ancre.

Tu créé une ancre appellée "menu" par exemple, et quand tu appelles ta page, tu appelles tapage.html#menu

OmaR a dit :
Bonjour,

La solution pourrait-être de mettre une ancre, et d'appeler la page avec l'ancre.




Salut Omar,

Je pense ne pas avoir très bien compris ta solution.

Ques tu veux dire par un ancre ??? un div ??

As-tu des exemples ?

Merci
Expert Programmation

qu'appelles tu "charger" une page ?
Tu veux ouvrir une nouvelle page ?

Sinon, tu peux rajouter des instructions dans la balise, tu peux faire :
<body onload="page(1);page(2);page(3);"></body>

etc...

OmaR a dit :
qu'appelles tu "charger" une page ?
Tu veux ouvrir une nouvelle page ?



Avec la fonction "page(num)", j'appelle un numéro page.

Et j'aimerai que dés que j'ouvre ma page d'accueil, les autres pages puissent se charger en même temps : page(1),page(2),etc...

OmaR a dit :


Sinon, tu peux rajouter des instructions dans la balise, tu peux faire :
<body onload="page(1);page(2);page(3);"></body>


Je vais essayer ca, merci
Expert Programmation

ça doit être parce que tu appelles une page en lui donnant un nom, et que tu la rappelles trois fois, donc c'est le dernier appel qui fonctionne.

Fais voir à quoi ressemble ta fonction page() sinon

OmaR a dit :
ça doit être parce que tu appelles une page en lui donnant un nom, et que tu la rappelles trois fois, donc c'est le dernier appel qui fonctionne.



Non je l'appel pas trois fois.

Bon je t'explique comment ca se passe:

J'ai 2 pages html.

Sur la permiere page j'ai un body.
Dans le body j'ai:
<body onLoad="Page(1)"> code..............etc...</body>

Dés que je charge ma page d'accueil, il y'a une autre page qui se charge avec l'appel de la fonction Page(1), que je met dans un div afin que cette page soit placée à l'endroit où je veux.

Jusqu'ici ca fonctionne.

J'ai une deuxième page qui utilise le body de la première (Avec la fonction include), mais j'aimerais que sur cette deuxième page
je charge 2 autres pages que je vais positionner avec un div aussi.

Donc suite à ce que tu m'a dit, j'ai fait :

<body onload="page(1);page(2);page(3);"></body>

Sur ma page d'accueil j'ai bien une page qui s'affiche à l'aide
de la fonction Page(1). Sur la deuxième page seulement la fonction Page(3) qui est pris en compte et non Page(2)
Expert Programmation

Par curiosité, je pourrais voir le code de ta fonction page() ??

Cette fonction page s'exécute toujours dans le même div, ou en fonction du numéro passé, ça change de div ?

OmaR a dit :
Par curiosité, je pourrais voir le code de ta fonction page() ??


function page(num)
{
getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
document.getElementById('num').innerHTML=xhr.responseText;
}
}
xhr.open("GET","get_page.php?num="+num,true);
xhr.send(null);
}
Expert Programmation

C'est simple, en fait, quand tu fais un document.getElementById('num'), tu récupères l'élément avec comme id="num", pas id="1", ou id="2", en fonction du numéro de page.

Il faudrait que tu fasses document.getElementById(num) pour avoir l'élément avec comme id="1", ou id="2", etc...

Car là, pour tes trois fonctions, tu les mets toutes dans le même élément, sauf que tu remplaces le contenu à chaque fois.

OmaR a dit :
As tu des éléments avec comme id égal à 1 ou égal à 2 dans ta page HTML ?


Le mieux c'est de te montrer tout mon code:

En gros ce que je veux faire c'est 2 menus dans une seule page.
Chaque menu contient 2 hyperliens.
Ca fonctionne bien avec firefox mais non avec internet Explorer.
(Comme presque toujours :heink:  ):

  1. <head>
    

  2. <script type='text/JavaScript'>
    

  3. var xhr = null; 
    

  4. function getXhr()
    

  5. {
    

  6.      if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
    

  7. else if(window.ActiveXObject)
    

  8.   { 
    

  9.   try{
    

  10.      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    

  11.     } 
    

  12.     catch (e) 
    

  13.     {
    

  14.      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    

  15.     }
    

  16.   }
    

  17. else 
    

  18.   {
    

  19.   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    

  20.   xhr = false; 
    

  21.   } 
    

  22. }
    

  23.  
  24. function menu1(num1)
    

  25. {
    

  26. getXhr();
    

  27. xhr.onreadystatechange = function()
    

  28.     {
    

  29.      if(xhr.readyState == 4 && xhr.status == 200)
    

  30.      {
    

  31.      document.getElementById('num1').innerHTML=xhr.responseText;
    

  32.      }
    

  33.     }
    

  34. xhr.open("GET","page1.php?num1="+num1,true);
    

  35. xhr.send(null);
    

  36. }
    

  37.  
  38. var xhr2 = null; 
    

  39.  
  40. function getXhr2()
    

  41. {
    

  42.      if(window.XMLHttpRequest)xhr2 = new XMLHttpRequest(); 
    

  43. else if(window.ActiveXObject)
    

  44.   { 
    

  45.   try{
    

  46.      xhr2 = new ActiveXObject("Msxml2.XMLHTTP");
    

  47.     } 
    

  48.     catch (e) 
    

  49.     {
    

  50.      xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
    

  51.     }
    

  52.   }
    

  53. else 
    

  54.   {
    

  55.   alert("Votre navigateur ne supporte pas le XMLHTTPRequest..."); 
    

  56.   xhr2 = false; 
    

  57.   } 
    

  58. }
    

  59.  
  60. function menu2(num2)
    

  61. {
    

  62. getXhr2();
    

  63. xhr2.onreadystatechange = function()
    

  64.     {
    

  65.      if(xhr2.readyState == 4 && xhr2.status == 200)
    

  66.      {
    

  67.      document.getElementById('num2').innerHTML=xhr2.responseText;
    

  68.      }
    

  69.     }
    

  70. xhr2.open("GET","page2.php?num2="+num2,true);
    

  71. xhr2.send(null);
    

  72. }
    

  73. </script>
    

  74.  
  75. <style type='text/css'>
    

  76.  
  77. #menu1 {
    

  78. background-color:red;
    

  79. margin-left:200px;
    

  80. }
    

  81.  
  82. #menu2 {
    

  83. background-color:blue;
    

  84. margin-left:400px;
    

  85. }
    

  86. </style>
    

  87. </head>
    

  88.  
  89. <script type="text/javaScript">
    

  90. menu1(1)</script>
    

  91. <div id="menu1"></div>
    

  92.  
  93. <script type="text/javaScript">
    

  94. menu2(1)</script>
    

  95. <div id="menu2"></div>


Voici le contenu des pages que j'appele:

Page1.php: 

  1. $num1=$_GET['num1'];
    

  2.  
  3. if($num1==1){
    

  4.  
  5.  echo '<a href="#" onClick="menu1(1)>Lien 1</a>';
    

  6.  echo ' <a href="#" onClick="menu1(2)>Lien 2</a>';
    

  7.  
  8.  echo ' Contenu 1 de la page 1' 
    

  9. }
    

  10.  
  11. if($num1==2){
    

  12.  
  13.  echo '<a href="#" onClick="menu1(1)>Lien 1</a>';
    

  14.  echo ' <a href="#" onClick="menu1(2)>Lien 2</a>';
    

  15.  
  16.  echo ' Contenu 2 de la page 1' 
    

  17. }



Page2.php: 

  1. $num2=$_GET['num2'];
    

  2.  
  3. if($num2==1){
    

  4.  
  5.  echo '<a href="#" onClick="menu2(1)>Lien 1</a>';
    

  6.  echo ' <a href="#" onClick="menu2(2)>Lien 2</a>';
    

  7.  
  8.  echo ' Contenu 1 de la page 2' 
    

  9. }
    

  10.  
  11. if($num2==2){
    

  12.  
  13.  echo '<a href="#" onClick="menu2(1)>Lien 1</a>';
    

  14.  echo  '<a href="#" onClick="menu2(2)>Lien 2</a>';
    

  15.  
  16.  echo ' Contenu 2 de la page 2' 
    

  17. }



J'ai enlevé les ' ', dans
document.getElementById(num1).innerHTML=xhr.responseText;
, mais ca ne m'affiche rien.

OmaR a dit :
Et si tu remplaces document.getElementById('num1').innerHTML=xhr.responseText; par document.getElementById('menu1').innerHTML=xhr.responseText;

Et la même chose pour le 2



Le problème persiste toujours sous IE.

Ce qui est bizzare, c'est que ca fonctionne la première fois que je charge ma page d'accueil qui contient les menus, mais dés que je fait un refresh, les menus disparaissent !!! :heink: 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde