Ne afficher page entiere avec ajax

20 sept. 2014, 18:15

Bonjour à tous je suis en train de développer un petit porfolio pour mon usage personnel je fais une navigation avec Ajax tout fonctionne niquel ! sauf un petit soucis quand je change de page au lieu de charger juste la div que je lui demande il charge tout la page donc du coup je me retrouve avec 2 page charger c'est très génant d'ailleur..
J'ai vue qu'il faillait bien configurer le .htaccess mais je suis très novice dans la matière je vous montre ce que j'ai fais :

mon menu :

<div class="column-left">
      <h3>MENU</h3>
      <a href="#skip-menu" class="hidden">Skip menu</a>
	  <div id="menuu">
      <ul class="menu">
        <li><a href="index.php" class="active">Home</a></li>
        <li><a href="about.php">About me</a></li>
        <li><a href="portfolio.php">Portfolio</a></li>
        <li class="last"><a href="contact.php">Contact</a></li>
      </ul>
	  </div>
    </div>

Mon script JS : [javascript]$(document).ready(function(){
$("#menuu a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "contenu/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,TextStatus, errorThrown){
alert(textStatus);
}
})
return false;
});
});

function afficher(data){
$("#contenu").empty();
$("#contenu").append(data);
}[/javascript]

et enfin mon .htaccess :

Code : Tout sélectionner

RewriteEngine on
RewriteRule ^([a-zA-Z0-9\-]*).html$ index.php?=$1 [L]

Si vous avez des explication je suis preneur merci !

20 sept. 2014, 19:06

Il faut que tu ais un élément fixe dans ta page contenant... Le contenu !
Javascript est fait pour travailler le DOM des pages, tu peux donc lorsque tu récupères la page complète n'en extraire que l'élément que tu veux.

http://www.xul.fr/dom/nodelist.php
http://www.finalclap.com/tuto/cours-jqu ... er-dom-66/

20 sept. 2014, 19:55

Bonjour merci d'avoir répondu m'ai je ne vois pas comment fixer uniquement le contenu ? avec le css tout simplement ?

20 sept. 2014, 20:07

Par exemple :

<html>
<body>
<div id="container">
  <div id="menu">
     ...
  </div>
  <div id="page">
    ...
  </div>
</div>
</body>
</html>

Ici on ne souhaite récupérer que le div portant l'id page.

20 sept. 2014, 20:18

ahh ! super je viens d'avoir le déclique cette exemple m'as ouvert l'esprit merci le contenu est bien fixe mais le header et les menu apparaisse quand même mais dans cette div dois-je procéder pareil pour ne plus les afficher ?

20 sept. 2014, 20:47

Le but est de ne récupérer que le div page et de l'afficher. (voir les liens que je t'ai passé plus haut pour ne récupérer que cela)

Ne afficher page entiere avec ajax

Qui est en ligne