Problems Loading Html into a div using Jquery

Question

I'm having trouble loading an HTML file into a div using Jquery. From what I know, this should work, and the html file i'm loading has a simple tag in it saying "Hello World!" However, when I click the link that should trigger the event and load the HTML into the div, nothing happens, and "Hellow World!" doesn't display anywhere on the screen. Here's the code:

<html>
<link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> <script src="js/bootstrap.js"></script>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<head>
</head>
<script src="js/funstuff.js"></script>
<body background="images/home_cooking.jpg" height="1000px">
     <div class="navbar navbar-default navbar-fixed-top" role="Navigation" style="margin-bottom: 0">
     <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
         </button>
         <a href="#" class="navbar-brand" style="font-size: 29px; margin-top: 7px">Cookbook</a>
        </div>
          <div class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
              <li> <a href="#" style="padding-top: 24px; padding-bottom: 28px; font-size: large; font-weight: 600; text-shadow: 0 0 5px #000000">About us</a> <li>
              <li> <a href="#" id="load_home" style="padding-top: 24px; padding-bottom: 28px; font-size: large; font-weight: 600; text-shadow: 0 0 5px #000000">Contact us</a></li>
            </ul>
            <form action="userlogin.html" class="navbar-form navbar-right" method="post">

              <div class="form-group">
                <input type="text" class="form-control col-lg-8" placeholder="Username" name="user">
                <br> <input type="checkbox" name="check"> Remember me
              </div>
              <div class="form-group">
                <input type="password" class="form-control col-lg-8" placeholder="Password" name="pass"> <br>
                <a href="#">Forgot your password? </a>
              </div>
              <button type="submit" class="btn btn-primary" style="margin-bottom: 20px">Login</button>

            </form>
          </div> 
        </div>
      </div>
    </div>
  <div id="content">

  </div>
  <script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("test.html");
    });
});
</script>
</body>
</html>

I apologize if the indentation an everything is sloppy, i'm just trying to get something functional right now! Any help would be greatly appreciated!

EDIT: It's also worth noting that everything is based locally on my computer. test.html is located in the same folder as index.html.

put your link and script tags on the head also the script that you have — Hector Sanchez, Apr 08 '14 at 22:34
The console is also returning No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. — user3450827, Apr 08 '14 at 22:36
@user3450827 that's cause the `test.html` you're trying to grab it's not on your domain. But with a line of PHP there's a cure for that `same-origin` "issue"/restriction. — Roko C. Buljan, Apr 08 '14 at 22:37
@user3450827 see here: http://stackoverflow.com/questions/14999573/jquery-load-external-site-page — Roko C. Buljan, Apr 08 '14 at 22:38
the test.html file is sitting in the same folder on my computer as index.html, so im confused why it wouldn't be in my domain. — user3450827, Apr 08 '14 at 22:45
Also make sure before you use AJAX `.load()` that you're on `localhost` on online ( `http://` ) instead of locally `file://` cause it will not work. — Roko C. Buljan, Apr 08 '14 at 22:45

score 0 · Answer 1 · answered Apr 08 '14 at 22:23

0

You need to return false to cancel the default action of the anchor tag

 $(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("test.html");
        return false;
    });
});

answered Apr 08 '14 at 22:23

pizzarob

11,711
6
48
69

2

Don't misuse `return false`, pass the event `function(event){` and use `event.preventDefault();` – Roko C. Buljan Apr 08 '14 at 22:34

devX · Answer 2 · 2014-04-08T22:41:33.573

0

You can also write the script in this way:

$(document).ready( function() {
   $("a").on("click", function() {
     var id=$(this).attr('id');
     if(id=="load_home"){
       $("#content").load('test.html');
     }
   });
});

edited Apr 08 '14 at 22:41

answered Apr 08 '14 at 22:38

devX

65
11

instead of jQuery's `$(this).attr('id')` don't forget that JS gave us from heaven `this.id` – Roko C. Buljan Apr 08 '14 at 22:39
oh..yes we can use it that too. – devX Apr 08 '14 at 22:43

Problems Loading Html into a div using Jquery

2 Answers2