Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3065 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Afficher le contenu sans recharger la page

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Afficher le contenu sans recharger la page

n°2031814
quaresma
Posté le 24-10-2010 à 12:46:24  profilanswer
 

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.

mood
Publicité
Posté le 24-10-2010 à 12:46:24  profilanswer
 

n°2031842
David Bori​ng
Posté le 24-10-2010 à 16:28:05  profilanswer
 

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/

n°2031912
quaresma
Posté le 24-10-2010 à 23:42:35  profilanswer
 

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 :
  1. function afficheDescURL(toThis)
  2.   {
  3.   if (document.getElementById)
  4.     {
  5.     document.getElementById("textDiv" ).innerHTML = toThis;
  6.     }
  7.   else if (document.all)
  8.     {
  9.     document.all["textDiv"].innerHTML = toThis;
  10.     }
  11.   }


 
code HTML
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="robots" content="index, follow" />
  6. <meta name="keywords" content=" "/>
  7. <meta name="description" content=" "/>
  8. <title></title>
  9.      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  10.  <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
  11.      <link rel="stylesheet" href="css/contenu.css" type="text/css" />
  12.  <script type="text/javascript" src="js/copie_functions.js"></script>
  13.      <script type="text/javascript" src="js/functions_contenu.js"></script>
  14. <style type="text/css">
  15. <!--
  16. body {
  17. margin-top: 0px;
  18. }
  19. -->
  20. </style>
  21. </head>
  22. <body bgcolor="#333333">
  23. <table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
  24. <tr>
  25. <td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
  26. </tr>
  27. <tr>
  28.   <td width="183" valign="top"><?php include("menu/copie_menu.php" ) ?></td>
  29.   <td width="800" valign="top" style="width: 665px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  30.   <tr>
  31.     <td width="47%" valign="top" bgcolor="#FFFFFF" class="titre_lien">
  32. <?php
  33. $titre = $_GET['lib'];
  34. print''.$titre.''; ?><br>
  35.       <br><a href="#" onclick="afficheDescURL(' Contient mon C.V., entre autres [moimeme.fr] ')">nom_lien</a><br>
  36.       <a href="#" onclick="afficheDescURL(' Contient un autre CV ')">nom_lien2</a></td>
  37.     <td width="2%">&nbsp;</td>
  38.     <td width="51%" bgcolor="#FFFFFF"><div id="textDiv"></div></td>
  39.   </tr>
  40. </table></td>
  41. <td width="17" style="background: #000;">&nbsp;</td>
  42. </tr>
  43. </table>
  44. </body>
  45. </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

n°2032139
quaresma
Posté le 25-10-2010 à 23:01:32  profilanswer
 

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

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape - Etape n&deg;1 : Le code xhtml</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  6.  <meta http-equiv="Content-Style-Type" content="text/css" />
  7.  <meta http-equiv="Content-Language" content="fr" />
  8.   <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
  9.       <link rel="stylesheet" href="css/contenu.css" type="text/css" />
  10.   <script type="text/javascript" src="js/copie_functions.js"></script>
  11.       <script type="text/javascript" src="js/functions_contenu.js"></script>
  12.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  13. </head>
  14. <body>
  15. <div id="conteneur">
  16.     <div id="entete"></div>
  17.     <div id="conteneur2">
  18.     <div id="cellulegauche"><?php include("menu/copie_menu.php" ) ?></div>
  19.  <div id="contenucel1">
  20.  <div class="titre_lien"><?php
  21. $titre = $_GET['lib'];
  22. print''.$titre.''; ?></div>
  23. <?php
  24. include ("requetes/requete_lien.php" );
  25. ?>
  26.  </div>
  27.         <div id="contenucel2"></div>
  28.         <div id="contenucel3" class="placeholder"></div>
  29.      <script>
  30.     $('a').click(function() {
  31.       loadContent( $(this).attr('href') );
  32.       return false;
  33.     });
  34.    
  35.     function loadContent(page){
  36.         $.ajax({
  37.           url: page,
  38.           success: function(data) {
  39.             $('.placeholder').html(data);
  40.           }
  41.         });
  42.     }
  43.     </script>
  44.         </div>
  45.  </div>
  46. </body>
  47. </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.

n°2032149
David Bori​ng
Posté le 26-10-2010 à 00:07:13  profilanswer
 

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 :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title>index</title>
  7. </head>
  8. <body>
  9. <!-- wrapper -->
  10. <div id="wrapper">
  11.  <!-- menu -->
  12.  <ul class="nav">
  13.   <li>
  14.    <a href="http://example.com/">Écrits</a>
  15.    <ul>
  16.     <li><a href="http://example.com/">items 1</a></li>
  17.     <li><a href="http://example.com/">items 2</a></li>
  18.     <li><a href="http://example.com/">items 3</a></li>
  19.    </ul>
  20.   </li>
  21.   <li>
  22.    <a href="http://example.com/">Écrits</a>
  23.    <ul>
  24.     <li><a href="http://example.com/">items 1</a></li>
  25.     <li><a href="http://example.com/">items 2</a></li>
  26.     <li><a href="http://example.com/">items 3</a></li>
  27.    </ul>
  28.   </li>
  29.   <li>
  30.    <a href="http://example.com/">Écrits</a>
  31.    <ul>
  32.     <li><a href="http://example.com/">items 1</a></li>
  33.     <li><a href="http://example.com/">items 2</a></li>
  34.     <li><a href="http://example.com/">items 3</a></li>
  35.    </ul>
  36.   </li>
  37.   <li>
  38.    <a href="http://example.com/">Écrits</a>
  39.    <ul>
  40.     <li><a href="http://example.com/">items 1</a></li>
  41.     <li><a href="http://example.com/">items 2</a></li>
  42.     <li><a href="http://example.com/">items 3</a></li>
  43.    </ul>
  44.   </li>
  45.  </ul>
  46.  <!-- /menu -->
  47.  <!-- content -->
  48.  <div id="content">
  49.   <!-- main -->
  50.   <div id="main">
  51.    <h1><a href="#">Niveau titre 1</a></h1>
  52.    <h2>Niveau titre 2</h2>
  53.    <h3>Niveau titre 3</h3>
  54.    <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>
  55.    <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>
  56.    <ul>
  57.     <li>Ceci est une liste</li>
  58.     <li><a href="http://example.com/">Ceci est une liste avec un lien</a></li>
  59.     <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>
  60.    </ul>
  61.   </div>
  62.   <!-- /main -->
  63.   <!-- info -->
  64.   <div id="info">
  65.    <ul>
  66.     <li><strong>Lieu</strong> : Paris</li>
  67.     <li><strong>Titre</strong> : Sur le pont</li>
  68.     <li><em>Date &amp; pagination</em> : 1980 | 689 pg</li>
  69.     <li><em>Éditeur</em> : Flammarion</li>
  70.    </ul>
  71.   </div>
  72.   <!-- /info -->
  73.  </div>
  74.  <!-- content -->
  75. </div>
  76. <!-- wrapper -->
  77. </body>
  78. </html>


n°2032153
quaresma
Posté le 26-10-2010 à 00:39:51  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Afficher le contenu sans recharger la page

 

Sujets relatifs
Integration de de un et plusieurs XML dans page html[Résolu] afficher répertoire windows en web
Couleurs survol souris différent selon endroit sur la pageRécupérer contenu d'un JTextField
session qui fait "planter" la page ?Pb contenu html en PHP
Comment renvoyer un formulaire automatiquementcomment placer une frame dans le body d'une page
Scanner une page webafficher valeur tableau echo' '
Plus de sujets relatifs à : Afficher le contenu sans recharger la page


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR