Skip to content Skip to sidebar Skip to footer

Loading One Html Page Inside Other Using Jquery

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.

Solution 1:

Well, I have the following files in one directory:

helloworld.html

<p>hello!</p>

test.html

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

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

Solution 2:

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.

Solution 3:

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()({

}); 

Post a Comment for "Loading One Html Page Inside Other Using Jquery"