1

I want to load an html file ("hello_world.html") inside another html page ("index.html") both files in the same location. This is the code I wrote. But It is not loading anything. both alerts are working ( which I intentionally gave to check whether jquery is working or not .no other use with it) what is the error in the code ? I dont want to use ajax.

</head>
 <script type="text/javascript" src="../jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $("document").ready(function() {
        alert("ya loaded");
        $('#container').load('hello_world.html');
    alert("finished");  
  });
</script>
</head>

<body>
<div id="container">
</div>

</body>
Bhavin Bhaskaran
  • 572
  • 5
  • 17
  • 41
  • 2
    Both alert will fire even if your `.load` doesn't work, because `.load` is asynchronous. And you are using AJAX. – Matt Burland Nov 16 '12 at 21:14
  • 1
    What errors are occuring in your debugging console? Is the request being sent? what is the response? – Kevin B Nov 16 '12 at 21:15
  • 1
    If you don't want to use AJAX, you're going to need to use a server-side technology to include hello_world.html in the html being delivered to the client's browser. – Aaron Nov 16 '12 at 21:16
  • 1
    Is there a specific reason you're using jQuery `1.3.2`? It's very outdated, use an up to date version if you can. May not help with your problem though. – Rory McCrossan Nov 16 '12 at 21:16
  • If you are testing this on your local machine AJAX will not work due to the HTTP requests not having domain headers. – Rory McCrossan Nov 16 '12 at 21:17
  • i am getting this error XMLHttpRequest cannot load file:///D:/Development/JQuery/jQuery%20Essential%20Training%20(RAKSHITHB)/Exercise%20Files/01_overview/hello_world.html. Origin null is not allowed by Access-Control-Allow-Origin. I am a begginer – Bhavin Bhaskaran Nov 16 '12 at 21:18

3 Answers3

4

Well, I have the following files in one directory:

helloworld.html

<p>hello!</p>

test.html

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $("document").ready(function() {
            $('#container').load('helloworld.html');
        });
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

Loading test.html in browser produces "hello!", so check if you jQuery is loaded properly.

Anton Egorov
  • 1,328
  • 1
  • 16
  • 33
  • XMLHttpRequest cannot load file:///D:/helloworld.html. Origin null is not allowed by Access-Control-Allow-Origin. I am getting this error in console :( when i put an alert inside script, alert was working – Bhavin Bhaskaran Nov 16 '12 at 21:35
  • That's because you are not running it with a server....Try running it with a localhost server.. It will work. @BhavinBhaskaran – Gil Baggio Jun 23 '16 at 11:05
3

Use your firebug or chrome development console to check out possible mistakes.

Edit:

When you use ajax, sometimes browser will not load it using file:/// protocol. You should be using a web server locally (such as xampp on windows or just apache), and aproach your website in http:// protocol.

That is very likely cause of your problem.

tonino.j
  • 3,837
  • 28
  • 27
  • XMLHttpRequest cannot load file:///D:/helloworld.html. Origin null is not allowed by Access-Control-Allow-Origin. I am getting this error in console :( when i put an alert inside script, alert was working – Bhavin Bhaskaran Nov 16 '12 at 21:37
  • Download from here: http://www.apachefriends.org/en/xampp-windows.html xampp and use it to serve your html files. – tonino.j Nov 16 '12 at 21:45
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/19683/discussion-between-bhavin-bhaskaran-and-toninoj) – Bhavin Bhaskaran Nov 17 '12 at 17:52
-1

the solution is so simple:

the ready function (line) you wrote is incorrectly so you have to write document work without quotation mark it will look like: 

$(document).ready(function()({

});
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Jebreel Alziadna
  • 11
  • 4