Afficher le contenu sans recharger la page

Marsh Posté le 24-10-2010 à 12:46:24

Bonjour à toutes et tous,

Je suis en train de faire un site internet.
Comme vous allez pouvoir le constater sur l'image ci-dessous, j'ai un champ au milieu avec les liens et un autre champ à droite avec le contenu correspondant au lien.

J'aimerai savoir s'il est possible de faire en sorte que quand je clique sur un lien, le contenu du champ de droite change mais sans recharger la page ?

Voici l'image pour plus de compréhension :

Merci beaucoup pour votre aide.

Reply

Marsh Posté le 24-10-2010 à 12:46:24

Reply

Marsh Posté le 24-10-2010 à 16:28:05

Avec en ensemble de technologie, mais c'est assez compliqué.
Un exemple, avec la librairie javascript qui se nomme jquery
http://d2o0t5hpnwv4c1.cloudfront.n [...] html#index

Et voilà le code
http://net.tutsplus.com/tutorials/ [...] th-jquery/

Reply

Marsh Posté le 24-10-2010 à 23:42:35

J'ai trouvé un code qui à l'air pas mal.

Voici ce que ça donne : http://www.la-grange-sardieres.fr/site Fab/contenu2.php

code js

Code :

function afficheDescURL(toThis)
{
if (document.getElementById)
{
document.getElementById("textDiv" ).innerHTML = toThis;
}
else if (document.all)
{
document.all["textDiv"].innerHTML = toThis;
}
}

code HTML

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content=" "/>
<meta name="description" content=" "/>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
<link rel="stylesheet" href="css/contenu.css" type="text/css" />
<script type="text/javascript" src="js/copie_functions.js"></script>
<script type="text/javascript" src="js/functions_contenu.js"></script>
<style type="text/css">
<!--
body {
margin-top: 0px;
}
-->
</style>
</head>
<body bgcolor="#333333">
<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
<tr>
<td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
</tr>
<tr>
<td width="183" valign="top"><?php include("menu/copie_menu.php" ) ?></td>
<td width="800" valign="top" style="width: 665px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="47%" valign="top" bgcolor="#FFFFFF" class="titre_lien">
<?php
$titre = $_GET['lib'];
print''.$titre.''; ?><br>
<br><a href="#" onclick="afficheDescURL(' Contient mon C.V., entre autres [moimeme.fr] ')">nom_lien</a><br>
<a href="#" onclick="afficheDescURL(' Contient un autre CV ')">nom_lien2</a></td>
<td width="2%"> </td>
<td width="51%" bgcolor="#FFFFFF"><div id="textDiv"></div></td>
</tr>
</table></td>
<td width="17" style="background: #000;"> </td>
</tr>
</table>
</body>
</html>

Par contre, je voulais savoir si avec le code que j'ai, il est possible d'appeler dynamiquement en PHP/SQL des données dans la zone de droite ?

Si oui, de quelle manière ?

Merci beaucoup et bonne soirée

Reply

Marsh Posté le 25-10-2010 à 23:01:32

J'ai fait un test avec de l'ajax et jquery, voici le code que j'ai mis :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
<link rel="stylesheet" href="css/contenu.css" type="text/css" />
<script type="text/javascript" src="js/copie_functions.js"></script>
<script type="text/javascript" src="js/functions_contenu.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>
<body>
<div id="conteneur">
<div id="entete"></div>
<div id="conteneur2">
<div id="cellulegauche"><?php include("menu/copie_menu.php" ) ?></div>
<div id="contenucel1">
<div class="titre_lien"><?php
$titre = $_GET['lib'];
print''.$titre.''; ?></div>
<?php
include ("requetes/requete_lien.php" );
?>
</div>
<div id="contenucel2"></div>
<div id="contenucel3" class="placeholder"></div>
<script>
$('a').click(function() {
loadContent( $(this).attr('href') );
return false;
});
function loadContent(page){
$.ajax({
url: page,
success: function(data) {
$('.placeholder').html(data);
}
});
}
</script>
</div>
</div>
</body>
</html>

Problème, lorsque je clique sur le menu de gauche, il m'ouvre une nouvelle fenêtre dans la même page.

Je ne comprends pas pourquoi.

Voici le résultat : http://www.la-grange-sardieres.fr/ [...] on2css.php

Merci par avance pour votre aide.

Message cité 1 fois

Reply

Marsh Posté le 26-10-2010 à 00:07:13

quaresma a écrit :

Problème, lorsque je clique sur le menu de gauche, il m'ouvre une nouvelle fenêtre dans la même page.

Je ne comprends pas pourquoi.

C'est ce tu demande faire pourtant, tu load au click de n'importe quelle lien (pas seulement ceux de ton menu) une page dans un container qui est à droite des autres. Mais ce n'est pas le bon endroit, tu envoies toute une page et répète tout ton contenu.

Mais sans être méchant, tu te lances dans une entreprise difficile pour ton niveau.
Essayes de faire déjà un site normal, avec des nouvelles pages qui se lance, pas besoin de faire d'ajax dans ton cas.
Tu peux déjà faire des progrès en html, en faisant un menu avec des liste, employer les bonnes balise pour ton texte

Par exemple le site que je t'ai proposé plus haut ou encore

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>index</title>
</head>
<body>
<div id="wrapper">
<ul class="nav">
<li>
<a href="http://example.com/">Écrits</a>
<ul>
<li><a href="http://example.com/">items 1</a></li>
<li><a href="http://example.com/">items 2</a></li>
<li><a href="http://example.com/">items 3</a></li>
</ul>
</li>
<li>
<a href="http://example.com/">Écrits</a>
<ul>
<li><a href="http://example.com/">items 1</a></li>
<li><a href="http://example.com/">items 2</a></li>
<li><a href="http://example.com/">items 3</a></li>
</ul>
</li>
<li>
<a href="http://example.com/">Écrits</a>
<ul>
<li><a href="http://example.com/">items 1</a></li>
<li><a href="http://example.com/">items 2</a></li>
<li><a href="http://example.com/">items 3</a></li>
</ul>
</li>
<li>
<a href="http://example.com/">Écrits</a>
<ul>
<li><a href="http://example.com/">items 1</a></li>
<li><a href="http://example.com/">items 2</a></li>
<li><a href="http://example.com/">items 3</a></li>
</ul>
</li>
</ul>
<div id="content">
<div id="main">
<h1><a href="#">Niveau titre 1</a></h1>
<h2>Niveau titre 2</h2>
<h3>Niveau titre 3</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">ceci est un lien</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Ceci est une liste</li>
<li><a href="http://example.com/">Ceci est une liste avec un lien</a></li>
<li>Ceci est une liste avec un long texte orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</div>
<div id="info">
<ul>
<li><strong>Lieu</strong> : Paris</li>
<li><strong>Titre</strong> : Sur le pont</li>
<li><em>Date & pagination</em> : 1980 | 689 pg</li>
<li><em>Éditeur</em> : Flammarion</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Reply

Marsh Posté le 26-10-2010 à 00:39:51

J'ai vu ton lien plus haut, mais je n'ai pas compris grand chose.

les menus avec les ul et li je connais, mais je suis un peu pressé par le temps, du coup j'emploie les div.

Pourrais-tu m'aider pour le problème de fenêtre ??

Merci et bonne soirée

Reply

Afficher le contenu sans recharger la page

Sujets relatifs:

Leave a Replay