Se connecter / S'enregistrer
Votre question

Liens Ajax

Tags :
  • Html
  • Programmation
Dernière réponse : dans Programmation
13 Août 2007 18:51:28

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

a c 232 L Programmation
13 Août 2007 19:02:29

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
13 Août 2007 20:45:42

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
Contenus similaires
13 Août 2007 23:20:55

OmaR a dit :
une ancre en HTML : http://nephi.unice.fr/CoursHTML/coursp9.php

Edit: regarde la partie "Les liens vers une partie d'un document local"



Salut,


J'ai créée l'autre topic car je pensais être plus clair et plus précis que celui-ci....merci comme même pour la réponse
14 Août 2007 00:40:58

OmaR a dit :
une ancre en HTML : http://nephi.unice.fr/CoursHTML/coursp9.php




Merci Omar, ton lien m'a été utile.

Mais j'ai une autre petite question pour toi.

Comment je pourrais charger plus qu'une page avec la
balise <body onload=" "></body> ?
Pour l'instant je l'utilise avec une seule page qui se charge dés l'ouverture de ma page.

Ex: <body onload="page(1)"></body>

Merci
a c 232 L Programmation
14 Août 2007 09:15:58

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...
16 Août 2007 15:31:45

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
18 Août 2007 18:10:11

OmaR a dit :

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

etc...


J'ai essayé ta méthode, mais seulement page(3) qui est chargé, et non page(1) et page(2)
a c 232 L Programmation
19 Août 2007 00:32:52

ç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
19 Août 2007 23:17:45

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)
a c 232 L Programmation
19 Août 2007 23:27:52

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 ?
25 Août 2007 01:13:54

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);
}
a c 232 L Programmation
26 Août 2007 11:46:25

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.
29 Août 2007 16:51:44

OmaR a dit :


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



Salut

Dés que j'enlève les Apostrophes, rien ne fonctionne !!!
a c 232 L Programmation
29 Août 2007 17:14:58

As tu des éléments avec comme id égal à 1 ou égal à 2 dans ta page HTML ?
4 Septembre 2007 21:14:52

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.
a c 232 L Programmation
5 Septembre 2007 15:49:54

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
6 Septembre 2007 22:19:23

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: 
a c 232 L Programmation
6 Septembre 2007 22:42:05

IE n'aime pas les document.getElementById().
C'est trop chiant IE, je sais pas programmer pour IE, désolé :/ 
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS