11548 sujets

JavaScript, DOM et API Web HTML5

Charger une div par un contenu qui a déjà été chargé en Ajax

Bonjour à tous,

je suis ce qu'il convient d'appeler un débutant. Je me suis mis en tête de réaliser un site grâce aux principes de l'ajax.
Ayant compris les problèmes soulevés par l'ajax (historiques, référencements, désactivation du javascript...), je suis tombé sur une solution qui me paraît utilisable pour un novice (comprendre mauvais).

Je suis tombé après de longues recherches sur une solution exposée ici grâce à Jquery Tools http://flowplayer.org/tools/tabs/index.html

A l'heure actuelle voilà où en sont mes recopiages des codes trouvés ici et là sur le net : http://label.2k10.free.fr/test/index.html

Mon soucis principal est le suivant : une fois qu'un contenu a été chargé dans la <div id="navigation"> je voudrais récupérer les liens pour qu'ils injectent du contenu dans la <div id="principal">

Voilà le code html de ma page :

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Page d'essai de navigation par ajax et autres friandises</title>
    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript" src="accordeon.js"></script>
    <script type="text/javascript" src="overlay.js"></script>
    
    <!-- La feuille de styles "base.css" doit être appelée en premier. -->
    <link rel="stylesheet" type="text/css" href="base.css" media="all" />
    <link rel="stylesheet" type="text/css" href="modele11.css" media="screen" />
    <!-- Appel des feuilles de styles pour les tabs, accordéons et overlays-->
    <link rel="stylesheet" type="text/css" href="tabs-no-image.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="overlay.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="overlay-standalone.css"/>    
    <link rel="stylesheet" type="text/css" href="overlay-basics.css"/>
    <link rel="stylesheet" type="text/css" href="overlay-apple.css"/>
    
</head>

<body>

<div id="global">

    <div id="entete">
        <h1>
            <span>Gabarit 11</span>
        </h1>
        <p class="sous-titre"><strong> Caractéristiques : </strong>largeur fluide «intelligente», colonnes factices,colonnes latérales positionnées en float.</p>
    </div>
    <!-- #entete -->
    <div id="tab">
        <h1>Div pour les tabs</h1>
        <ul class="css-tabs">
        <li><a href="accueil.html">Accueil</a></li>
        <li><a href="presentation.html">Présentation</a></li>
        <li><a href="repertoire.html">Répertoire</a></li>
        <li><a href="musiciens.html">Musiciens</a></li>
        <li><a href="medias.html">Média</a></li>
        <li><a href="partenaire.html">Partenaires</a></li>
       <!-- si il y a trop de tabs, celles qui ne rentrent pas sur la ligne s'affichent au milieu en dessous de la ligne-->
        </ul>
</div>
<!-- #tab -->


<div id="centre">
    <div id="centre-bis">
        <div id="navigation">
            <div id="secondaire" class="css-panes">
                <div style="display:block">
                  </div>
            </div>
        </div>
<!-- #navigation -->

        <div id="secondaire">
    
        <h3>Nouvelles</h3>
            <div class="news">
            <p>Retrouvez ici les denières nouvelles de l'orchestre</p>
            </div>
        <div class="news">
        <ul class="subMenu">
        <li><a href="prochain.html" rel="#overlay">Prochain Concert</a></li>
        </ul>
        </div>
</div>
<!-- #secondaire -->

<div id="principal">
    <div class="apple_overlay" id="overlay">

    <!-- c'est depuis ici que les overlays s'affirechont-->
        <div class="contentWrap">
        </div>
    </div><!--#overlay-->
</div><!-- #principal -->
</div><!-- #centre-bis -->
</div><!-- #centre -->

    <div id="pied">
    </div><!-- #pied -->
<!-- #global -->
</div>


</body>

</html>

<!--gabarit : Mise en page © 2008 Elephorm et Alsacréations-->
<!-- tabs et accordeon :  http://flowplayer.org  -->


le javascript qui injecte mes requêtes dans mon div :

$(document).ready(function() {$("ul.css-tabs").tabs(".css-panes > div", {effect: 'ajax', history: true}); });


Bien évidemment je suis conscient que le but que je me suis fixé est très haut, mais pourquoi pas après tout. Je vous serais reconnaissant de bien vouloir m'épauler pour réfléchir sur ce sujet.

Merci à vous.
Modifié par label2k10 (18 Sep 2010 - 17:45)
Modérateur
Salut,

En fait, pour que les liens insérés via Ajax réagissent comme tu le souhaites, il faut systématiquement réévaluer le DOM une fois le contenu inséré pour que tu puisses leur affecter un gestionnaire d'évenement au clic. Pour cela, tu peux donc créer une fonction de callback que tu éxécutes à la suite de l'insertion de contenu.

Concernant l'historique, tu semblais, d'après la documentation, t'y être pris comme il faut.
Merci de ta réponse, j'avoue que je ne comprends pas franchement ce qu'il faut faire. Je vais regarder tout ça sur google et je reviens.

Bonne journée.
Modifié par label2k10 (20 Sep 2010 - 09:01)
J'avoue que je sèche complétement.
Si j'avais plus de temps, je me mettrais à potasser correctement le javascript plus en l'occurrence jquery.

C'est la limite du copié-collé-adapté (à l'arrache).

Je continue mes recherches, si à tout hasard Koala64, l'envie te prend de jeter un oeil sur mon problème j'en t'en serais reconnaissant (jusqu'à la 42ème génération).


merci encore.
Modérateur
Se lancer dans une telle tâche sans prendre le temps de potasser Javascript, c'est juste impossible donc dire :
label2k10 a écrit :
je suis conscient que le but que je me suis fixé est très haut, mais pourquoi pas après tout.
et
label2k10 a écrit :
Si j'avais plus de temps, je me mettrais à potasser correctement le javascript plus en l'occurrence jquery.
Va falloir faire un choix parce que sinon, tu vas tout droit dans le mur. Smiley rolleyes (On ne se lance pas dans un grand prix de F1 si on n'a pas le permis - c'est ce que tu es en train de faire - à moins d'être prêt à s'investir au moins autant que ses propres ambitions... et ça ne se fait certainement pas en 1 semaine !)

Par ailleurs, je ne connais pas le plugin dont tu te sers donc plonger là-dedans, ça ne me tente que moyennement vu que ça m'oblige à me taper la doc.

Le truc à comprendre, en cas d'utilisation d'un plugin, c'est qu'il est vivement conseillé de se limiter à l'emploi qui est décrit dans leurs exemples parce que si tu en veux plus, va falloir mettre les mains dans le cambouis = plugin (auquel cas, rien ne vaut celui que tu as fait toi-même Smiley cligne ).

En tout cas, ce que j'ai déjà pu remarquer, c'est que tu n'as pas tout à fait saisi le principe de l'Ajax :

Actuellement, tes appels ramènent des pages entières et non seulement le bout de code à insérer.

En théorie, tu serais censé avoir des pages consultables sans Javascript, c'est à dire un site tout à fait normal avec des changements de page et, une fois cela fait, tu pourrais effectivement ajouter une surcouche Ajax pour ne rameuter que le contenu qui change (et non une page HTML entière).

Ce principe, au delà de la difficulté à le mettre en place correctement, n'est utile que dans de très rares occasions (pour un site basé sur de nombreuses animations, par exemple)

Pour ce qui est du callback à exécuter une fois ton contenu chargé, il y a la méthode ajaxComplete qui peut t'aider. Ça t'éviterait de disperser plein de bouts de code JS au sein de tes pages (-> tout peut être centralisé dans un fichier unique).

Pour ce qui est de l'historique, le problème est que cette fonctionnalité est intégrée au plugin, ce qui limite son utilisation aux éléments sélectionnés au départ (tes onglets). En fait, on voit que ça fonctionne correctement vu que le menu suit bien l'historique. Si le contenu ne suit pas, en revanche, c'est parce que tu relances une nouvelle requête pour l'insérer sans que l'historique soit mis à jour.

Aussi, si tu veux un comportement plus avancé et donc, gérer ton historique aux petits oignons, mieux vaut se servir d'un script découplé qui ne gère que ça (swfaddress par exemple) parce que là, ton plugin ne semble pas être prévu pour s'adapter à tes exigences.
Merci infiniment pour cette réponse.

Tu soulignes habilement ce que je me dis depuis un moment.

Du coup je vais me tourner vers l'étude du javascript, avec le temps que j'ai ça devrait me prendre un demi-siècle.

Ton explication m'éclaire vraiment sur la démarche à suivre, effectivement je fonctionne à l'envers.

Merci encore, mais tiens toi prêt à avoir de mes nouvelles Smiley lol
Sujet clos
Aller à