[AJAX] Chargement de pages

Bonjour,

Je suis en train de concevoir le nouveau site web de ma société en AJAX et j'ai un problème incompréhensible.

Ma page principale est en php avec plusieurs div.

Lorsque je clique sur un lien, j'execute une fonction javascript qui recoit en parametre un identifiant.

Dans cette fonction, un bête switch sur l'identifiant qui appelle un Ajax.Updater sur le div souhaité avec le contenu d'une page php.

Cependant, le problème est que la page se recharge automatiquement dans son intégralité et ne reste donc jamais sur le contenu qui m'interesse.Elle recharge toujours le contenu initialement présent au chargement.

Citation:

principale.php

<html>
<head>
<title>
Pygram - Services informatiques et solutions de gestion pour PME-PMI
</title>
<link href="css/menu.css" type="text/css" rel="stylesheet" >
<link href="css/piedpage.css" type="text/css" rel="stylesheet" >
<link href="css/menu2.css" type="text/css" rel="stylesheet" >
<link href="css/contenu.css" type="text/css" rel="stylesheet" >
<link href="css/contenumep.css" type="text/css" rel="stylesheet" >
<script src="JS/prototype.js" type="text/javascript"></script>
<script src="JS/fonction.js" type="text/javascript"></script>

</head>

<body onload="contenu('1');">
<div id='menu'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="800" height="250" id="menuswf" align="middle">
<param name="allowScriptAccess" value="always" /><param name="movie" value="menu.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><embed src="menu.swf" quality="high" scale="noscale" width="800" height="250" name="menuswf" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<A href="" onclick="contenu('2');">Test</A>
<A href="" onclick="contenu('3');">Test2</A>
</div>
<div id='contenu'>
</div>
</body>
</html>

fonction.js

function contenu(ident)
{
switch (ident)
{
case "1":
new Ajax.Updater('contenu',
'contenu1.php',
{method: 'get'});
alert('1');
break;

case "2":
new Ajax.Updater('contenu',
'contenu2.php',
{method: 'get'});
alert('2');
break;

case "3":
new Ajax.Updater('contenu',
'contenu3.php',
{method: 'get'});
alert('3');
break;
}
}

En gros quand je clique sur Test, il lance la fonction 'contenu', charge la page 'contenu2.php' dans le div 'contenu', ET LA, recharge ma page 'principale.php' alors qu'il ne devrait pas.

Merci d'avance pour votre aide.

En fait je viens de résoudre le problème mais je ne comprends toujours pas.

Tout simplement, dans le code, à la place de

Citation:

<A href="" onclick="contenu('2');">Test</A>
<A href="" onclick="contenu('3');">Test2</A>

j'ai maintenant

Citation:

<A href="javascript:contenu('2')">Test</A>
<A href="javascript:contenu('3')">Test2</A>

Quelqu'un peut-il m'expliquer la différence ?

Merci

Bonjour,

Citation:

Envoyé par nunurs007

Quelqu'un peut-il m'expliquer la différence ?

dans le 1° cas, suite à l'exécution de la fonction, le clic déclenche l'appel à l'url du href (non défini => page courante).
Dans le 2° tu ne ne fais qu'appeler le lien ... qui consiste en la fonction elle-même.
Dans ton 1° cas, tu aurais aussi pu corriger en faisant terminer ton onclick par un return false; (qui interrompt l'évènement onclick) ...

A+

Citation:

Envoyé par E.Bzz

(non défini => page courante).

Je dirais pas "non defini" mais chaine vide, et cela correspond à la page
par défaut du dossier courant. Dans le cas d'une page index on voit pas
la différence.

D'autre part, les onclick c'est très DOM0 :-) même si c'est très pratique,
à lire pour info http://developer.mozilla.org/fr/docs...dEventListener