Se connecter / S'enregistrer
Votre question

Liens dans une pages chargées en ajax + pblm de div

Tags :
  • Ajax
  • Php
  • Navigation
  • CSS
  • Javascript
  • Programmation
Dernière réponse : dans Programmation
21 Mars 2012 11:56:59

Bonjour, je cherche à savoir comment je peux faire ceci:

j'ai ma navigation qui se fait en ajax, je voudrais que les liens situés dans les pages chargées en ajax se chargent dans la même div que la page contenant ce même liens (que la nouvelle page remplace l'autre en gros ! )

les pages chargés dans la div ne prennent pas en compte les css qui leurs sont liés ! !

et deuxième soucis:

j'ai 2 div, une de 700px de large, l'autre de 240px de large, entre les deux un écart de 20px tout ça est donc égal à 960px (taille de ma div main)
j'ai mis un float left sur les deux div mais rien n'y fait, la div de 240px passe en dessous !

merci d'avance !



les codes:

ajax pour charger mes pages depuis le menu :

  1. $(document).ready(function(){ // le document est chargé
  2. <!-- $('#content').load('test.html');-->
  3. $("a").click(function(){ // on selectionne tous les liens et on d�finit une action quand on clique dessus
  4. page=($(this).attr("href")); // on recuperer l' adresse du lien
  5. $.ajax({ // ajax
  6. url: page, // url de la page � charger
  7. cache: false, // pas de mise en cache
  8. success:function(html){ // si la requêté est un succès
  9. afficher(html); // on execute la fonction afficher(donnees)
  10.  
  11. },
  12. error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
  13. }
  14. });
  15. return false; // on desactive le lien
  16. });
  17. });
  18.  
  19. function afficher(donnees){ // pour remplacer le contenu du div contenu
  20. $("#content").empty(); // on vide le div
  21. $("#content").append(donnees); // on met dans le div le r�sultat de la requete ajax
  22. }




Html + Css de mes divs :

  1. <body>
  2.  
  3. <div id="main">
  4.  
  5. <div id="ban">
  6.  
  7. <img src="images/ban.jpg" width="960" height="250" alt="Logo Ad Mortam Aeternam" />
  8.  
  9. </div>
  10.  
  11. <div id="infos">
  12. </div>
  13.  
  14. <div id="playlist">
  15. </div>
  16.  
  17. </div>
  18.  
  19.  
  20. </body>
  21. </html>


  1. #main
  2. {
  3. width: 960px;
  4. height: auto;
  5. margin: 0 auto 0 auto;
  6. }
  7.  
  8. #ban
  9. {
  10. width: 960px;
  11. height: 250px;
  12. margin: 0 auto 0 auto;
  13. border: 1px solid #000;
  14. }
  15.  
  16. #infos
  17. {
  18. width: 700px;
  19. height: 800px;
  20. margin: 20px 20px 0 0;
  21. background-color: #fff;
  22. border: 1px solid #000;
  23. float: left;
  24. }
  25.  
  26. #playlist
  27. {
  28. width: 240px;
  29. height: 800px;
  30. margin: 20px 0 20px auto;
  31. background-color: #fff;
  32. border: 1px solid #000;
  33. float: left;
  34. }

Autres pages sur : liens pages chargees ajax pblm div

a c 232 L Programmation
21 Mars 2012 13:48:47

Salut,

Dans ton code javascript, tu as #content, mais tu n'as pas d'élément avec comme id="content" dans ton code ?

Et pour ton 2ème problème, je pense que c'est parce que tu as une bordure aussi dans tes 2 éléments. Ca rajoute du coup quelques pixels.
21 Mars 2012 14:02:53

hmmm pour l'ajax je crois que on s'est pas compris !


en plus clair :

page principale = presentation.html > la div "content" est sur cette page

page chargée = test.html > page chargée dans "#content" qui se situe sur "présentation.html"

ça ca marche nikel !

cependant, si je met un lien dans test.html, quand je clic dessus il me l'affiche dans une page toute seul avec fond blanc, et moi ce que je voudrais c'est qu'elle s'affiche dans "#content" sur presentation.html !

je sais pas si c'est plus clair la >_<


pour le 2eme problème, si je prends en compte les bordures en enlevant sur les largeurs des divs, je peux mettre que 19px d'écart, a 20px elle passe en dessous, et du coup a 19px il y a un décalage de 1px ! je comprend pas pourquoi !

dis moi si tu veux les sources je te les enverrais !

a c 232 L Programmation
21 Mars 2012 14:27:24

OK je vois.
Pour le 1), c'est parce que quand tu as changé de page (chargé ta page test.html), tu n'es pas repassé par tous les "a" pour passer ses liens en mode ajax.

Pour le 2), j'ai pris ta source, j'ai enlevé les bordures des 2 éléments, et ai ajouté un background-color red et yellow pour pouvoir les distinguer, et les 2 div sont bien l'une à côté de l'autre quand il n'y a pas de bordure.
Tu dois compter 4px de bordure normalement (2 éléments qui ont chacun 2 bordures d'1 pixel = 4px).
21 Mars 2012 14:32:27

je vais être honnête, je comprends rien pour le 1er problème >_<

pour le pblm 2 :

div infos : j'ai mis la largeur a 698 au lieu de 700 (2 bordure de 1px donc -2px sur la largeur)
div playlist : la meme chose, (240-2=238)
écart : 20px

ça ne fonctionne toujours pas !
a c 232 L Programmation
21 Mars 2012 14:40:02

Dans ta page principale, tu as un code Javascript:

  1. $(document).ready(function(){ // le document est chargé
  2. <!-- $('#content').load('test.html');-->
  3. $("a").click(function(){ // on selectionne tous les liens et on d�finit une action quand on clique dessus
  4. page=($(this).attr("href")); // on recuperer l' adresse du lien
  5. $.ajax({ // ajax
  6. url: page, // url de la page � charger
  7. cache: false, // pas de mise en cache
  8. success:function(html){ // si la requêté est un succès
  9. afficher(html); // on execute la fonction afficher(donnees)
  10.  
  11. },
  12. error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
  13. }
  14. });
  15. return false; // on desactive le lien
  16. });
  17. });


Ce code te permet de transformer tous les liens <a href=""> afin qu'ils utilisent une méthode ajax à la place.
On est d'accord ?

Ce code n'est exécuté qu'au chargement de ta page principale, donc tous les liens présents à ce moment là sont en mode "ajax".
Quand tu changes de page (que tu ouvres ta page test.html qui est chargée dans ton div), le code n'est pas réexécuté, du coup tous les liens de la page test.html ne sont pas en mode "ajax".


2) Quand je mets #infos à une width de 698 et #playlist à une width de 238px, ça fonctionne chez moi... testé sous Firefox, Chrome et IE9
21 Mars 2012 14:53:23

ha la c'est carément plus clair ! merci !

pour l'histoire des divs, je t'assure que chez moi ça ne fonctionne pas !

  1. #infos {
  2. background-color: #FFFFFF;
  3. border: 1px solid #000000;
  4. float: left;
  5. height: 800px;
  6. margin-top: 20px;
  7. width: 698px;
  8. }


et

  1. #playlist {
  2. background-color: #FFFFFF;
  3. border: 1px solid #000000;
  4. float: left;
  5. height: 800px;
  6. margin: 20px 0 20px 20px;
  7. width: 238px;
  8. }


pour l'ajax il faut donc que je réexecute le script à chaque chargement de pages c'est bien ça ?
a c 232 L Programmation
21 Mars 2012 15:08:47

Tu utilises quel navigateur ? Parce que ça fonctionne bien sous les 3 navigateurs que je t'ai dit...



Et oui, il faut que tu réexécutes ce code à chaque chargement de page.
Pour faire plus simple, tu dois pouvoir mettre ce code dans une fonction (oublie pas de l'appeler au départ...), et même modifier le success:
  1. success:function(html){ // si la requêté est un succès
  2. afficher(html); // on execute la fonction afficher(donnees)
  3. // TODO ici tu rappelles ta fonction
  4. },


Comme ça, ça rappellera automatiquement la fonction quand tu cliqueras sur un lien, une fois que ça sera chargé
21 Mars 2012 15:18:36

j'utilise firefox !


j'ai tout essayer ! ca se cale jamais nikel...

pour l'ajax j'essaye de rappeler la fonction mais bon c'est compliqué parce que c'est un code tout fait que j'ai pris, j'ai pas encore apris l'ajax !
a c 232 L Programmation
21 Mars 2012 15:23:23

Ca doit donner quelque chose dans ce genre :

  1. function AjaxifyLinks() {
  2. $(document).ready(function(){ // le document est chargé
  3. <!-- $('#content').load('test.html');-->
  4. $("a").click(function(){ // on selectionne tous les liens et on d�finit une action quand on clique dessus
  5. page=($(this).attr("href")); // on recuperer l' adresse du lien
  6. $.ajax({ // ajax
  7. url: page, // url de la page � charger
  8. cache: false, // pas de mise en cache
  9. success:function(html){ // si la requêté est un succès
  10. afficher(html); // on execute la fonction afficher(donnees)
  11. AjaxifyLinks(); // la page est chargée, on réexécute ça pour les nouveaux liens
  12. },
  13. error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
  14. }
  15. });
  16. return false; // on desactive le lien
  17. });
  18. });
  19. }
  20. AjaxifyLinks();
21 Mars 2012 15:25:44

hmm ok c'est un peu plus clair ! merci !

mais du coup test.html a un css lié, mais il ne le prend pas en compte lors de l'appel ajax !
a c 232 L Programmation
21 Mars 2012 15:25:48

Pour le problème...

Voilà le code que tu m'as donné :

  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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Test</title>
  6.  
  7. <style type="text/css">
  8. #main
  9. {
  10. width: 960px;
  11. height: auto;
  12. margin: 0 auto 0 auto;
  13. }
  14.  
  15. #ban
  16. {
  17. width: 960px;
  18. height: 250px;
  19. margin: 0 auto 0 auto;
  20. border: 1px solid #000;
  21. }
  22.  
  23. #infos {
  24. background-color: #FFFFFF;
  25. border: 1px solid #000000;
  26. float: left;
  27. height: 800px;
  28. margin-top: 20px;
  29. width: 698px;
  30. }
  31.  
  32. #playlist {
  33. background-color: #FFFFFF;
  34. border: 1px solid #000000;
  35. float: left;
  36. height: 800px;
  37. margin: 20px 0 20px 20px;
  38. width: 238px;
  39. }
  40. </style>
  41.  
  42. </head>
  43. <body>
  44.  
  45. <div id="main">
  46.  
  47. <div id="ban">
  48.  
  49. <img src="images/ban.jpg" width="960" height="250" alt="Logo Ad Mortam Aeternam" />
  50.  
  51. </div>
  52.  
  53. <div id="infos">
  54. </div>
  55.  
  56. <div id="playlist">
  57. </div>
  58.  
  59. </div>
  60.  
  61. </body>
  62. </html>


Et ça marche très bien, non ?
21 Mars 2012 16:02:22

Lol Non ca ne fonctionne pas ! >_<

et pour l'ajax non plus d'ailleurs ! même les liens du menu qui fonctionnait ne fonctionne plus !
a c 232 L Programmation
21 Mars 2012 16:08:16

Essaie comme ça plutôt...:

  1. function AjaxifyLinks() {
  2. <!-- $('#content').load('test.html');-->
  3. $("a").click(function(){ // on selectionne tous les liens et on d�finit une action quand on clique dessus
  4. page=($(this).attr("href")); // on recuperer l' adresse du lien
  5. $.ajax({ // ajax
  6. url: page, // url de la page � charger
  7. cache: false, // pas de mise en cache
  8. success:function(html){ // si la requêté est un succès
  9. afficher(html); // on execute la fonction afficher(donnees)
  10. AjaxifyLinks(); // la page est chargée, on réexécute ça pour les nouveaux liens
  11. },
  12. error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
  13. }
  14. });
  15. return false; // on desactive le lien
  16. });
  17. }
  18.  
  19. $(document).ready(AjaxifyLinks());
22 Mars 2012 09:45:20

ça ne fonctionne pas, il me charge ma page a part pas dans la div, je peux te donner un autre code si tu veux, fais avec un prof de code justement ! donc des fois siça peut te permettre de repartir sur un truc peut être plus propre !

  1. $(document).ready(function(){
  2. $("a").click(function(){ // on selectionne tous les liens et on d�finit une action quand on clique dessus
  3. test=($(this).attr("id"));
  4.  
  5. //page=($(this).attr("href")); // on recuperer l' adresse du lien
  6. $.ajax({
  7. //url: "pages/artistes/liste/ame/ame.html",
  8. //url: page,
  9. url: "pages/artistes/liste/ame/"+test+".html",
  10. cache: false,
  11. success: function(html){
  12. $("#content").empty();
  13. $("#content").append(html);
  14. }
  15. });
  16. });
  17. });

a c 232 L Programmation
22 Mars 2012 09:51:38

Tu peux mettre tes pages en ligne et me donner le lien que je regarde ça ?
22 Mars 2012 13:52:21

oui c'est fait ! tiens :

site (clique sur "artistes")
a c 232 L Programmation
22 Mars 2012 15:53:36

Et c'est quoi qui marche pas là ?
Tu n'as aucun lien dans ta page "artistes", du coup on peut pas tester...

Et je n'ai pas vu le problème avec les 2 colonnes vu qu'il n'y en a qu'une seule ?
22 Mars 2012 16:17:52

ha bah enfaite du coup c'est pratiquement réglé j'ai pas fait gaffe je ré-uppais sur le ftp à chaque fois et enfaite j'ai trouvé une solution avec mon prof, et ça fonctionne !

je te remercie grandement pour ton aide !

et pour les div j'ai fait une mise en page différente comme ça plus de problème ^^

je te met tout ça en ligne si tu veux voir comment on a fait !

clique sur présentation puis a la deuxieme puce de la liste, il y a un lien tu clique dessus !
merci encore !
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS