11548 sujets

JavaScript, DOM et API Web HTML5

Menu, ajax/java

Bonjour à vous,

Je suis débutant en ajax,css & javascript.

En farfouillant sur ce site et bien d'autres j'ai finalement réussi a faire le menu que je souhaitais. Ce dernier est completement en css et sur 3 niveaux.

Avant d'aller plus loin dans mon site je souhaitais faire en sorte que lorsque que je clique sur un élement de mon menu, la page soit chargée dans un id d'une autre page: (Je precise que j'ai bien mis les balises dhtml)

Page: "menu.php"

<div class="menu">
 <ul>
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Saison</a></li>
 <ul>
</div>


Page: "content.php"

<div id="display"></div>


Page: "index.php"

<html><head>....</head><body>
 <div id="content">      
  <?php 
  require_once('menu.php');
  require_once('content.php');
  ?>
 </div>
</body></html>



Par exemple je souhaiterai qu'en cliquant sur "Saison" la page content.php ait l'id "display" chargée par le contenu d'une autre page "seasons.php".

J'ai cherché en java, en ajax et pour l'instant j'ai .... keudalle :s

Est-ce-que ce que je cherche à faire est impossible ou bien suis-je juste trop mauvais (pour l'instant ^^) ?

D'avance merci.
Bonjour,

Tu devrais pouvoir le faire en ajax.

Voici le code javascript a utiliser :


function loadPageAjax(page,Id)
  	{
  		var xmlHttp;
  		try
    			{ xmlHttp=new XMLHttpRequest(); }
  		catch (e)
    			{
    				try
      					{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
    				catch (e)
      					{
      						try
        						{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
      						catch (e)
        						{
        							alert("Votre navigateur ne supporte pas la technologie AJAX!");
        							return false;
        						}
      					}
    			}
    		xmlHttp.onreadystatechange=function()
      			{
      				if(xmlHttp.readyState==4)
        				{ document.getElementById(Id).innerHTML=xmlHttp.responseText; }
				else
					{ document.getElementById(Id).innerHTML="Chargement de la page..."; }
      			}
    		xmlHttp.open("GET",page,true);
    		xmlHttp.send(null);
  	}


Et voici comment appeler le chargement :


<a href="#" onClick="loadPageAjax('seasons.php','display'); return false;">Saison</a></li>
Merci d'avoir répondu.

J'ai essayé ton code mais il semblerait que cela ne fonctionne pas.

La page ne se charge pas. J'ai bien le témoin de chargement qui s'affiche puis disparait mais le contenu lui reste vide.
Dans quel repertoire se trouve rank.php?

Ton lien est un peu etrange,

<li onClick="loadPageAjax('rank.php','display');"><a href="">Informations</a></li>

Tu devrais plustot le faire comme cela :

<li><a href="#" onClick="loadPageAjax('rank.php','display');">Informations</a></li>
Modérateur
Bonjour,

Quelques petites remarques...

- Le menu est inaccessible au clavier et ne prévoit pas de temporisation (à trois niveaux, ça devient utile)... Il serait préférable, vu tes besoins, de t'orienter sur les menus de FairyTells ou doSimple.

- Le code Ajax, tel quel :

-> ne prend pas en compte les derniers activeX,
-> renvoie le résultat sans se soucier d'avoir reçu ou non un résultat correct (voir la propriété status),
-> supprime la possibilité de bookmarker et de naviguer via "précédent" et "suivant" (à prévoir impérativement),
-> n'annule pas la requête en cas de non réception,
-> oublie d'annihiler l'action normale du lien... donc la page se recharge et l'include rank.php ne peut être visualisée,
-> n'a pas lieu d'être vu que l'appel de l'include n'est pas encore fait via php (Ajax doit être vu comme une surcouche et non comme une alternative)

Par ailleurs, si on tape "http://yinkoh.jal-informatique.net/rank.php", l'include ne s'y trouve visiblement pas. Smiley confus

PS :
- Un lien <a href="">...</a> ne devrait pas être présent... Un vrai lien avec une url serait préférable.
- Ne pas confondre Java et Javascript... ça n'a vraiment rien à voir. Smiley cligne
Modifié par koala64 (03 Jul 2007 - 14:03)
@koala

Je n'ai pas prévu tous les details dont tu m'as fais la liste pour le moment pour la bonne et simple raison que je n'arrive deja pas a faire fonctionner en l'état actuel Smiley smile
Je vais tout de meme regarder les liens que tu as mis.
Ps: Pour le fait que la saisie directe l'url ne marche pas, ca s'est volontaire puisque je ne souhaite pas que cela soit possible. (Mais je n'ai pas encore coder la gestion de ce type de cas)

@kraft

les pages sont dans le dossier root/pages et le java dans root/dev/java
mais j'ai deja essayé de mettre le chemin d'accès au dossier dans l'url et sans succès Smiley smile
Euuuuuuhh je saisis mal là.

J'utilise include_once() pour appeler les scripts & pages dont j'ai besoin.
Modérateur
Tu pourrais faire quelquechose du genre :
<a href="index.php?id=rank">informations</a>

(...)

<div id="display">
<?php

if(!empty($_GET['id']) && $_GET['id'] === 'rank')
     require 'root/pages/rank.php';

?>
</div>


Ensuite, dans ton code javascript, il faut annihiler la transmission du lien via un return false; et lancer l'appel de l'include via Ajax. Ainsi, que l'utilisateur dispose de js ou non, il obtient la page.
J'avais envisagé qq chose comme ca au départ mais un pote m'a vanté ajax

Donc j'ai essayé et je suis mauvais perdant en programmation donc j'aime pas me faire carrer par un ordinateur ... même si je dois avouer que l'instant je me prends une branlée Smiley smile
Modérateur
hum... Je te le répète :

Ajax n'est pas une alternative à la méthode normale. Beaucoup font cette erreur ce qui rend leur site inaccessible; c'est ce que j'essaie de te dire. Smiley cligne
J'ai un peu cherché tout de meme avant de me lancer dans ajax et c'est vrai que par rapport a ce que je cherchais ca me semblait.

Comme par exemple le fait de ne pas avoir a passer un argument via l'url

La page corrigée donne:


	  <?php
	   if (!empty($_GET['content'])) {
       $page = '';	   
	   $content = $_GET['content'];
	    switch($content) {
		 case 1: $page = "rank"; break;
		}
       require_once("$path_pages/$page.php");		
	   }
	  ?>


Mais bien evidemment l'url devient plus longue, j'avais envie de pouvoir garder l'url "simple" juste l'url d'acces au site quoi.
A l'evidence je n'ai pas le niveau pour ca, dommage :s
Modérateur
Ce que tu cherches à faire est caractéristique des débutants en fait. Smiley ravi

L'url sert à identifier la page de manière unique. Si tu t'amuses à ne conserver que le nom du site, tu supprimes toute possibilité de bookmarker ou de naviguer normalement -> ce n'est pas souhaitable pour tes visiteurs.

Le principe pour rétablir ces fonctions une fois Ajax actif consiste justement à remodifier cette url pour la rendre à nouveau unique.
Modifié par koala64 (03 Jul 2007 - 14:36)
Concernant le bookmark ou l'acces via le clavier ce n'est pas tres grave puisque ce site n'aura pas vocation a etre "pro".
Il s'agira juste d'un point de passage pour les joueurs d'une equipe de foot pour recuperer des infos vite et eventuellement faire un tour complet de temps en temps.

C'est pour ca que je souhaitais garder une url unique. Smiley ravi
Modérateur
Oui mais ce n'est pas rendre service aux joueurs ; en faisant cela, tu les brides. Smiley smile

Le fait que ce ne soit pas à vocation pro fait que, justement, tu pourrais t'essayer à ces techniques ; c'est un bon exercice.
Le but est quand même d'offrir un service donc autant le faire bien non ?
De toutes les facon je sens que je vais poster souvent ici ^^

J'aurai donc l'occasion de debattre a nouveau avec toi Smiley biggrin

En tout cas, merci de l'aide et des conseils.
Sujet clos
Aller à