11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Charger un 'div' avec un lien à l'intérieur de celui-ci.

Bonjour à tous,

Je suis entrain de remettre à jour un vieux site. J'ai mis en place une structure avec des conteneurs 'div' : header, menu, centre, footer,...
Et comme toutes mes pages ont le même header, menu, footer je voudrais simplement charger ce qui change, c'est à dire le centre.

Pour cela, j'ai repris un code (peut être un rien trop démodé) qui permet, à partir des différents liens du menu, de changer le contenu du centre en chargeant une page :


// JavaScript Document
$(document).ready(function(){   // le document est chargé
$(".changement_contenu").click(function(){   // on selectionne tous les liens et on définit une action quand on clique dessus
page=($(this).attr("href")); // on recuperer l' adresse du lien
$.ajax({ // ajax
url: page, // url de la page à charger
cache: false, // pas de mise en cache
success:function(html){ // si la requête est un succès
afficher(html);     // on execute la fonction afficher(donnees)
},
error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
}
});
return false; // on desactive le lien
});
});

function afficher(donnees){ // pour remplacer le contenu du div contenu
$("#centre").empty(); // on vide le div
$("#centre").append(donnees);
}


Tout marche comme sur des roulettes, sauf (ce qui ne m'a pas surpris) lorsque j'ai un lien à l'intérieur même de ce centre. Dans ce cas là, le lien va simplement me rediriger vers la page en question et je vais donc perdre le header, le footer et le menu Smiley ohwell .

Existe-t-il une solution miracle qui permettrait d'avoir le même effet lorsque j'ai le lien en dehors ou dans le 'div' centre ?

J'ai un peu cherché sans trouver de solution et je suppose que cette question a surement déjà dû être posée. J'ai vu aussi qu'il existait une fonction 'load' mais j'ai l'impression que mon problème persistera.

Merci d'avance,

pitou.
salut,
tu es entrain d'utiliser une navigation en Ajax. Je ne vais pas évoquer ici les pour et les contre mais si tu ne maîtrises pas ce genre de choses, il vaudrait mieux éviter de bricoler.
Le plus simple serait d'utiliser tout bêtement des include en PHP et de laisser le mode de navigation normal.
Effectivement, je n'ai jamais fait d'ajax (si ce n'est du copier-coller et comprendre + ou - ce que faisait les fonctions.) donc je vais peut être laisser tomber. C'est assez dommage car je trouvais ça assez sympa.

Mais bon , je vais te faire confiance car j'ai l'impression que ce ne sera pas mon seul problème. Notamment pensez à ceux qui n'activent pas le javascript et le problème d'affichage dans les liens. je vais simplement mettre une sorte de sytème include('get['page']').

Cependant, si quelqu'un a une solution pour le problème, ça m’intéresserait d'avoir la réponse Smiley smile .
Modérateur
Bonjour,

L'adresse du lien doit pointer vers un fichier html qui ne contient que le code html interne à la div.

Par exemple, si tu veux mettre dans ta div <div id="centre"><p>Bienvenu !</p></div>, il faut que le fichier html pointé par le lien ne contienne que <p>Bienvenu !</p> (donc pas de doctype, de balise html, ...).
Par ailleurs, il me semble que pour la fonction afficher(), il serait un poil plus efficace d'utiliser le code suivant :

function afficher(donnees){$("#centre").html(donnees);}


EDIT : Il faut aussi vérifier que tu n'as pas laissé trainer d'autres balises ayant un id="center" dans ton code, parce que le symptôme le laisse à penser.

Amicalement,
Modifié par parsimonhi (13 Jun 2014 - 10:55)
$(".changement_contenu").click(function(){   // on selectionne tous les liens et on définit une action quand on clique dessus

Le commentaire est trompeur si tu ne prete pas attention au code. en fait, 
$(".changement_contenu")
cible les element qui ont pour class changement_contenu.
Si c'est un lien avec un attribut 
href
, alors la suite du script fonctionne.
Si un lien n'a pas la class changement_contenu, alors il sera ignoré.
Si un élément autre qu'un lien a un attribut href et la class changement_contenu, il est possible que le script se déclenche.

Considère ce script comme une démo et qu'il te faut l'analysez et l'ameliorer pour en tirer le bon profit Smiley smile

++
Modérateur
Bonjour,

Autre idée : il manque peut-être un event.preventDefault() dans (à la fin?) de la fonction $(".changement_contenu").click(function(event){... (il faut penser à rajouter event en paramètre de la fonction).

EDIT (15/06/2014) : après réflexion, si on suppose que Pitou a tout fait correctement par ailleurs, c'est surement ça la solution.
EDIT (17/06/2014) : après réflexion supplémentaire, ce n'est pas la solution.

Amicalement,
Modifié par parsimonhi (17 Jun 2014 - 07:16)
Salut à tous,

Tout d'abord merci pour vos réponses et vos éclairages. J'avoue m'être lancé dans une solution plus simple à partir de get/include par manque de temps et peur de failles. Malgré tout je crois que je me pencherais sur cette solution 'ajax' qui me parait bien plus élégante une fois que j'aurai lu plus de documentation à son sujet.

Il me reste tout de même une question un peu plus technique. Si je mets le code (du 1er poste) dans le head de ma page principale (il ne sera donc que là bas et ce sera la seule page avec un head) alors celui-ci ne sera chargé qu'une seule fois (lors du chargement de cette page) et il prendra donc bien compte tout mes liens (ou éléments) ayant pour classe 'changement_contenu' et il fonctionnera donc correctement.

Si maintenant, je charge dans mon div une nouvelle page avec un nouveau lien possédant toujours la classe 'changement_contenu'. Ce dernier ne sera pas pris en compte par mon code ajax vu que celui-ci n'aura pas été relancé. Et donc lorsque je cliquerai dessus, je serais redirigé uniquement vers la page non ?

Enfin cette question doit surement avoir sa réponse dans les bons tutos ajax. J'avoue avoir post-poser cela par manque de temps et je m'y attellerai dés que possible.

A bientôt et merci pour tout.
Modérateur
Pitou a écrit :


Si maintenant, je charge dans mon div une nouvelle page avec un nouveau lien possédant toujours la classe 'changement_contenu'. Ce dernier ne sera pas pris en compte par mon code ajax vu que celui-ci n'aura pas été relancé. Et donc lorsque je cliquerai dessus, je serais redirigé uniquement vers la page non ?



Il faut tester.

Amicalement,
Modifié par parsimonhi (17 Jun 2014 - 06:04)
Modérateur
Bonjour,

Bon, ça m'apprendra à tester avant poster.

Les liens dans l'élément #centre doivent effectivement être "activés" à chaque modification du contenu.

Ci-dessous une solution avec le code de Pitou légèrement modifié qui semble marcher.

1) code de la page principale :


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<nav>
<ul>
<li><a class="changement_contenu" href="page1.html">Page 1</a></li>
<li><a class="changement_contenu" href="page2.html">Page 2</a></li>
</ul>
</nav>

<div id="centre">
<?php include("page1.html");?>
</div>

<script>
// JavaScript Document
var magic=function(){   // on selectionne tous les liens et on définit une action quand on clique dessus
page=($(this).attr("href")); // on recuperer l' adresse du lien
$.ajax({ // ajax
url: page, // url de la page à charger
cache: false, // pas de mise en cache
success:function(html){ // si la requête est un succès
afficher(html);     // on execute la fonction afficher(donnees)
},
error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
}
});
return false; // on desactive le lien
};

$(document).ready(function(){   // le document est chargé
$(".changement_contenu").click(magic);
});

function afficher(donnees){ // pour remplacer le contenu du div contenu
$("#centre").html(donnees);
$("#centre .changement_contenu").click(magic);
}
</script>

</body>
</html>


2) fichier "page1.html"


<p>Ceci est ma première page (page d'accueil) sans lien dans le contenu.</p>


3) fichier "page2.html"


<p>Ceci est ma deuxième page avec <a id="accueil" class="changement_contenu" href="page1.html">un lien dans le contenu vers la page d'accueil (la page 1)</a>.</p>


Amicalement,
Sujet clos
Aller à