jQuery.charger pour charger un fichier HTML

J'ai jamais utilisé jQuery avant cela, mais je vais vous expliquer ce que je suis en train de faire.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Website</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>

<!--    <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe> I used to use this - but i cant have dropdown menus. -->
            <!-- This is my problem -->
        <script>
                $('#navbar').load('./navbar.html');
        </script>
        <noscript>
            <h1>Please enable Javascript!</h1>
        </noscript>

        <div id="container">
                <!-- Content Here -->
        </div>

    </body>
</html>

navbar.html

<div id="navbar">
        <li><object width="64" height="64" data="favicon.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/tech.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/games.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/contact.svg" type="image/svg+xml"></object></li>
</div>

Donc ce que j'essaie de faire ici, c'est avoir beaucoup de pages HTML qui tous lien à une barre de navigation de la page html, donc quand j'ai changer la navbar.html, je n'ai pas changer à chaque page.

J'ai déjà une autre question ici. Davor Milnaric suggéré "si vous utilisez jquery, vous pouvez essayer avec '.load () de la fonction. api.jquery.com/load" mais je ne peux pas le faire fonctionner. Ce que je fais mal? Comment puis-je résoudre ce problème? Toute aide serait grandement appréciée.

InformationsquelleAutor Yharooer | 2013-05-26
  1. 9

    Vous avez besoin de faire 2 choses:

    1. Utiliser $(document).prêt() - lire ici; Tous jQuery code doit être placé comme ceci:

      $(document).ready(function(){

    //jquery code goes here....        

});

    2. Changement

      $('#navbar').load('./navbar.html');

    à

    $('#container').load('./navbar.html');

    .. vous n'avez pas un élément avec id="navbar"
    et selon cette:

    Si aucun élément n'est égalée que par le sélecteur — dans ce cas, si le document ne contient pas un élément avec id="result" (dans notre cas, "navbar") — la requête Ajax ne sera pas envoyé.

    InformationsquelleAutor Yotam Omer
  2. 3

    Il est également possible que vous ayez à attendre pour les DOM à charger.

        <script>
        $(document).ready(function() {
            $('#result').load('navbar.html #navbar', function() {
                alert("loaded");
            });
        });
    </script>

    <div id="result">
    </div>
    • Salut, Merci pour vous réponse. 🙂 Quand j'ai essayer cela, rien ne change, la barre de navigation toujours ne charge pas... des idées?
    • si vous ouvrez dev tools pour le navigateur, vous verrez l'erreur, il pourrait être 'origine de la Croix demandes sont prises en charge uniquement pour les protocoles: http, de données...'
    InformationsquelleAutor eklhad