Friday 1 March 2013

Dynamically loading HTML from another page using Javascript

And here's another great JQuery feature. If you want to include content from another html page you can use JQuery to drag it in. Here's a sample page with a button that pulls in and uses text from a second HTML page.
<html>
    <head>
     <script src="js/jquery-mobile/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            function a() {
                $('#contentFromOtherPage').load('test2.html #iphone');
            }
        </script>
    </head>
    <body>
    <div id="contentFromOtherPage">
        this text will be replaced
    </div>
    <button onclick= "javascript:a();">click</button>    
</html>
... and here's the second page where the content comes from
<html>
<head></head>
<body>
<div id="iphone">
 this is iphone content
</div>
<div id="android">
 this is android content
</div>
</body>
</html>