Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» JavaScript et DOM
» Menu, ajax/java
Auteur
yinkoh
# 03 Jul 2007 - 11:03:44
Citer
9 Posts
 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.
^
Krafton
# 03 Jul 2007 - 11:50:39
Citer
58 Posts
 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>
^
yinkoh
# 03 Jul 2007 - 13:00:06
Citer
9 Posts
 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.
^
Krafton
# 03 Jul 2007 - 13:02:33
Citer
58 Posts
 On peut voir ta page quelque part?
^
yinkoh
# 03 Jul 2007 - 13:25:48
Citer
9 Posts
 http://yinkoh.jal-informatique.net/

je viens de l'uploader mais ce n'est en rien l'aspect definitif donc bon faudra etre indulgent hein smile

Ps: Je lui fais charger une page "rank.php" qui contient la chaine
"eh oui ca marche !!"

Malheureusement il ne s'affiche pas
^
Krafton
# 03 Jul 2007 - 13:42:36
Citer
58 Posts
 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>
^
koala64
# 03 Jul 2007 - 13:54:56
Citer
Modérateur
4011 Posts
 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. 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. cligne
Modifié par koala64 (03 Jul 2007 - 14:03)
^
yinkoh
# 03 Jul 2007 - 14:08:10
Citer
9 Posts
 @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 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 smile

^
koala64
# 03 Jul 2007 - 14:11:18
Citer
Modérateur
4011 Posts
 Pourquoi ne pas commencer par le départ -> appel d'une include php ? C'est la base. smile

^
yinkoh
# 03 Jul 2007 - 14:14:24
Citer
9 Posts
 Euuuuuuhh je saisis mal là.

J'utilise include_once() pour appeler les scripts & pages dont j'ai besoin.
^
koala64
# 03 Jul 2007 - 14:21:39
Citer
Modérateur
4011 Posts
 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.
^
yinkoh
# 03 Jul 2007 - 14:24:50
Citer
9 Posts
 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 smile

^
koala64
# 03 Jul 2007 - 14:27:46
Citer
Modérateur
4011 Posts
 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. cligne

^
yinkoh
# 03 Jul 2007 - 14:31:36
Citer
9 Posts
 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
^
koala64
# 03 Jul 2007 - 14:34:52
Citer
Modérateur
4011 Posts
 Ce que tu cherches à faire est caractéristique des débutants en fait. 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)
^
yinkoh
# 03 Jul 2007 - 14:38:11
Citer
9 Posts
 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. ravi

^
koala64
# 03 Jul 2007 - 14:44:03
Citer
Modérateur
4011 Posts
 Oui mais ce n'est pas rendre service aux joueurs ; en faisant cela, tu les brides. 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 ?
^
yinkoh
# 03 Jul 2007 - 14:47:09
Citer
9 Posts
 De toutes les facon je sens que je vais poster souvent ici ^^

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

En tout cas, merci de l'aide et des conseils.
^
Krafton
# 03 Jul 2007 - 15:06:52
Citer
58 Posts
 Quand je vais sur http://yinkoh.jal-informatique.net/rank.php

Il me dit que rank.php n'existes pas c'est normal alors qu'il ne t'affiches rien.
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.6 beta in 28.7 ms © dew