11548 sujets

JavaScript, DOM et API Web HTML5

Afficher le contenu sans recharger la page

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 : http://nsa19.casimages.com/img/2010/10/24/mini_101024124524242317.gif

Merci beaucoup pour votre aide.
Bonjour,

Bien entendu que c'est possible. Tu peux utiliser la technologie AJAX, un intéraction entre javascript et un langage serveur (PHP, ASP, ...)
Renseigne toi là dessus ça devrait te permettre de t'aider. Si tu as besoin d'aide reviens ici Smiley cligne

A bientôt
J'ai regardé sur google et j'ai trouvé pas mal de choses.

En utilisant AJAX, je suis obligé d'appeler un page dans un div c'est bien cela ??

Sinon, auriez-vous un exemple de code pour mieux comprendre ??

Merci beaucoup
Voici un exemple simple.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>

<body>
	<a href="patate.html">
		adasdasd
	</a>
	<div 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>
</body>

</html>


Dans ton fichier patate.html, tu ne mets que ton code HTML du texte. ( Donc pas de balise body, head, ou autres. Ça doit ressembler qu'à ça


<div>
    <p>J'aime ça les <strong>patate</strong> !</p>
</div>


Donc, pour chaque lien, tu dois mettre le URL de destination de ta page, comme un URL normal. Le script va prendre le URL de ton <a> et "loadé" le contenu dans ta page courante.

Bon la façon dont j'ai fait ça implique que tu as une page HTML par lien. Si ton contenu est dans une DB, tu pourrais faire l'appel d'une page dynamique comme loadpage.php?pageID=20 et dans ton fichier loadpage, tu aurais ta requête SQL qui va chercher le contenu associé à la page 20 par exemple.
Sorano a écrit :
Voici un exemple simple.


&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
	&lt;a href=&quot;patate.html&quot;&gt;
		adasdasd
	&lt;/a&gt;
	&lt;div class=&quot;placeholder&quot;&gt;
	
	&lt;/div&gt;
	&lt;script&gt;
	$('a').click(function() {
	  loadContent( $(this).attr('href') );
	  return false;
	});
	
	function loadContent(page){
		$.ajax({
		  url: page,
		  success: function(data) {
			$('.placeholder').html(data);
		  }
		});
	}
	&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;


Dans ton fichier patate.html, tu ne mets que ton code HTML du texte. ( Donc pas de balise body, head, ou autres. Ça doit ressembler qu'à ça


&lt;div&gt;
    &lt;p&gt;J'aime ça les &lt;strong&gt;patate&lt;/strong&gt; !&lt;/p&gt;
&lt;/div&gt;


Donc, pour chaque lien, tu dois mettre le URL de destination de ta page, comme un URL normal. Le script va prendre le URL de ton &lt;a&gt; et &quot;loadé&quot; le contenu dans ta page courante.

Bon la façon dont j'ai fait ça implique que tu as une page HTML par lien. Si ton contenu est dans une DB, tu pourrais faire l'appel d'une page dynamique comme loadpage.php?pageID=20 et dans ton fichier loadpage, tu aurais ta requête SQL qui va chercher le contenu associé à la page 20 par exemple.


Et à chaque fois que je clique sur un lien, le texte chargé précedement disparait ou
il faut ajouter des paramètres dans le code js ??
J'ai fait un test avec ton exemple, voici me code que j'ai mis :

<!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&eacute;ation d'un design &eacute;tape par &eacute;tape - Etape n&deg;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/site%20Fab/presentation2css.php

Merci par avance pour ton aide.
Bonjour,
Quaresma tu a réussi a ne pas afficher une nouvelle fenêtre?
Si oui je voudrais bien des explications car j'ai le même problème.
Merci d'avance
Bonne journée et bonnes fêtes.
Miaou
Bonjour,
désolé je ne peux pas t'aider car la personne a tout compte fait décidé de ne pas faire de site internet du coup j'ai supprimé tout ce que j'avais fait.

Bonne journée
Sujet clos
Aller à