HTML jQuery .load() not working

Question

I am trying to use the jQuery .load() function in a bootstap html but I can't get it to work.

I'd like to import some parts saved in another HTML (accueil.html) in a tab-content (#accueil).

Please find below my index code & the accueil.html that I'd like to include.

<!DOCTYPE html> <html>   <head>
    <!-- En-tete de la page -->
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Paul's website</title>
    <meta name="description" content="Le site de Paul">

    <!-- links -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Bootrap & jQuery -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->   </head>   <body>
    <div class="container-fluid">
      <!-- Corps de la page -->
      <div class="row">
        <header class="page-header hidden-xs col-sm-12">
          <h1>Site de Paul</h1>
        </header>
      </div>
      <div class="row">
      <section>
        <nav class="navbar navbar-default navbar-left" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#">Site de Paul</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse  navbar-ex1-collapse">
            <ul class="nav nav-pills nav-stacked">
              <li class="active"><a href="#accueil" data-toggle="tab">
                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                Accueil</a>
              </li>
              <li><a href="#programme" data-toggle="tab">
                <span class="glyphicon glyphicon-glass" aria-hidden="true"></span>
                Programme</a>
              </li>
              <li><a href="#hotel" data-toggle="tab">
                <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                Lieu & Hotels</a>
              </li>
              <li><a href="#liste" data-toggle="tab">
                <span class="glyphicon glyphicon-gift" aria-hidden="true"></span>
                Liste de Mariage</a>
              </li>
              <li><a href="#album" data-toggle="tab">
                <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
                Album photo</a>
              </li>
              <li><a href="#covoiturage" data-toggle="tab">
                <span class="glyphicon glyphicon-road" aria-hidden="true"></span>
                Covoiturage</a>
              </li>
              <li><a href="#contacts" data-toggle="tab">
                <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                Contacts</a>
              </li>
            </ul> 
          </div>
        </nav>
        <div class="tab-content col-sm-9" style="border:1px solid red;">
          <div class="tab-pane active in" id="accueil">
            <!-- Accueil Tab-content -->
          </div>
          <div class="tab-pane" id="programme"><h2>Programme</h2></div>
          <div class="tab-pane" id="hotel"><h2>Hotel</h2></div>
          <div class="tab-pane" id="liste"><h2>Liste</h2></div>
          <div class="tab-pane" id="album"><h2>Album photo</h2></div>
          <div class="tab-pane" id="covoiturage"><h2>Covoiturage</h2></div>
          <div class="tab-pane" id="contacts"><h2>Contacts</h2></div>
        </div>
      </section>
      </div>
      <div class="row">
        <footer class="well col-xs-12">
          <p style="text-align:center;">- Paul's tests -</p>
        </footer>
      </div>
    </div>
    <!-- Scripts to load at the end -->
    <!-- Set JQuery env -->
    <script   src="http://code.jquery.com/jquery-2.2.4.js"   integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- functions jQuery -->
    <script type="text/javascript">
      $(function(){
        $("#accueil").load("accueil.html");
      });
    </script>

  </body> </html>

Html to add in the "#accueil" tab

<section  class="tab-section">
  <h1>Bienvenue a tous</h1>
  <div id="welcomeTxt">
    <figure class="">
      <img id="imgAccueil" src="img/accueil.jpg" alt="Photo accueil" title="Welcome to our website">
      <figcaption>Photo champs de tournesol</figcaption>
    </figure>

    <article class="">
      <p>
        Nous sommes très heureux de vous acceuillir sur notre site!
      </p>
    </article>
  </div>
</section>

Define "not working". Look at your browser's developer tools. Look at the JavaScript console. Does it report any errors? Look at the Net tab. Is the request being made? Does it get a response? Do they contain the data you expect? — Quentin, May 31 '16 at 19:29
4:1 on this being a duplicate of [this](http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local) once the error messages are reported. — Quentin, May 31 '16 at 19:35

score -1 · Answer 1 · answered May 31 '16 at 19:35

-1

I don't see '#accueil' referenced anywhere in your HTML you provided except for the link >>> <a href="#accueil" data-toggle="tab">

Perhaps create one of these <div id="accueil"></div> where you want that content to load?

EDIT: When you call $('#myId').load ... in jQuery, you basicly telling jQuery to grab that DOM element and stick the loaded content into that element.

answered May 31 '16 at 19:35

ajm113

936
1
8
18

"don't see '#accueil' referenced anywhere in your HTML" – It's right there https://www.evernote.com/l/AAMlVQ6SDA9Gmabrqj2W7rZ9sc2wPS6OZ20 – Quentin May 31 '16 at 19:40
Ah my mistake. Keep thinking my Ctrl+F knows about css select queries. haha Code is working fine for me. How are you testing your code exactly? Is the html files in the same directory? Are you using a server or are you using your browser w/ no server? (simply using the browser sometimes can cause issues loading resources) P.S I highly recommend using codepen or jsbin to test code. It can be very helpful and easy to write code with. :) – ajm113 May 31 '16 at 19:46

score -2 · Accepted Answer · edited Mar 08 '17 at 00:05

-2

You should try something like this

$( "#accueil" ).load( "accueil.html .tab-section" );

Here's a demo.

edited Mar 08 '17 at 00:05

Andrew Li

55,805
14
125
143

answered May 30 '16 at 22:44

Evandro Cavalcate Santos

365
3
13

Thanks for your help, but unfortunately, it still not working, did I forget something? I'm a newbee in jQuery – paul olivier May 31 '16 at 06:11
@paulolivier your code is correct, there's any error on your console? – Evandro Cavalcate Santos May 31 '16 at 19:26
Why would loading *part* of the document work when loading the whole thing doesn't? – Quentin May 31 '16 at 19:30
@Evandro, I found the issue ^_^!! the function .load isn't working in local "file:///Users/..." but when I run it with localhost and when I put "../accueil.html" instead of "accueil.html" it's working fine. I still owe you a c(_) for your help ;-) – paul olivier May 31 '16 at 20:35

HTML jQuery .load() not working

2 Answers2