Tom's Guide > Forum > Programmation > Liens Ajax

Liens Ajax

Forum Programmation : Liens Ajax

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
stephane81   13-08-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

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
OmaR   13-08-2007 à 19:02:29
- 0 +

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

Message cité 1 fois
------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
stephane81   13-08-2007 à 20:45:42
- 0 +

OmaR a écrit :

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

Répondre à stephane81
OmaR   13-08-2007 à 22:09:55
- 0 +

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

 

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

Message cité 2 fois
Message édité par OmaR le 13-08-2007 à 22:10:54
------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
stephane81   13-08-2007 à 23:20:55
- 0 +

OmaR a écrit :

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

Répondre à stephane81
stephane81   14-08-2007 à 00:40:58
- 0 +

OmaR a écrit :

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

Répondre à stephane81
OmaR   14-08-2007 à 09:15:58
- 0 +

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...

Message cité 2 fois
------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
stephane81   16-08-2007 à 15:31:45
- 0 +

OmaR a écrit :

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 écrit :



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


Message édité par stephane81 le 16-08-2007 à 15:53:56
Répondre à stephane81
stephane81   18-08-2007 à 18:10:11
- 0 +

OmaR a écrit :


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)

Répondre à stephane81
OmaR   19-08-2007 à 00:32:52
- 0 +

ç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

Message cité 1 fois
------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
stephane81   19-08-2007 à 23:17:45
- 0 +

OmaR a écrit :

ç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)

Répondre à stephane81
OmaR   19-08-2007 à 23:27:52
- 0 +

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 ?

Message cité 1 fois
Message édité par OmaR le 19-08-2007 à 23:28:20
------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
stephane81   25-08-2007 à 01:13:54
- 0 +

OmaR a écrit :

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);
}

Répondre à stephane81
OmaR   26-08-2007 à 11:46:25
- 0 +

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.

Message cité 1 fois
------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
stephane81   29-08-2007 à 16:51:44
- 0 +

OmaR a écrit :



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 !!!

Répondre à stephane81
OmaR   29-08-2007 à 17:14:58
- 0 +

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

Message cité 1 fois
------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
stephane81   04-09-2007 à 21:14:52
- 0 +

OmaR a écrit :

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: ):

Code :
  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. }
  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. }
  38. var xhr2 = null;
  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. }
  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>
  75. <style type='text/css'>
  77. #menu1 {
  78. background-color:red;
  79. margin-left:200px;
  80. }
  82. #menu2 {
  83. background-color:blue;
  84. margin-left:400px;
  85. }
  86. </style>
  87. </head>
  89. <script type="text/javaScript">
  90. menu1(1)</script>
  91. <div id="menu1"></div>
  93. <script type="text/javaScript">
  94. menu2(1)</script>
  95. <div id="menu2"></div>



Voici le contenu des pages que j'appele:

Page1.php:

Code :
  1. $num1=$_GET['num1'];
  3. if($num1==1){
  5. echo '<a href="#" onClick="menu1(1)>Lien 1</a>';
  6. echo ' <a href="#" onClick="menu1(2)>Lien 2</a>';
  8. echo ' Contenu 1 de la page 1'
  9. }
  11. if($num1==2){
  13. echo '<a href="#" onClick="menu1(1)>Lien 1</a>';
  14. echo ' <a href="#" onClick="menu1(2)>Lien 2</a>';
  16. echo ' Contenu 2 de la page 1'
  17. }




Page2.php:

Code :
  1. $num2=$_GET['num2'];
  3. if($num2==1){
  5. echo '<a href="#" onClick="menu2(1)>Lien 1</a>';
  6. echo ' <a href="#" onClick="menu2(2)>Lien 2</a>';
  8. echo ' Contenu 1 de la page 2'
  9. }
  11. if($num2==2){
  13. echo '<a href="#" onClick="menu2(1)>Lien 1</a>';
  14. echo  '<a href="#" onClick="menu2(2)>Lien 2</a>';
  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.


Message édité par stephane81 le 04-09-2007 à 21:27:28
Répondre à stephane81
OmaR   05-09-2007 à 15:49:54
- 0 +

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

Message cité 1 fois
------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
stephane81   06-09-2007 à 22:19:23
- 0 +

OmaR a écrit :

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:

Répondre à stephane81
OmaR   06-09-2007 à 22:42:05
- 0 +

IE n'aime pas les document.getElementById().
C'est trop chiant IE, je sais pas programmer pour IE, désolé :/

------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Liens Ajax
Aller à :

Il y a 1268 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,347 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens