Link to an External Page / Framework is lost
Hi !
I'm very, very newbie to JQM, although very experienced with web development, dynamic content as well.
To start, I have built a simple page with 3 sections. All of them same document. On the 3rd section I have a link to an external page that has dynamic content (that queries a data base server).
Need to have this external page EMBEDED into the original DOM and Framework, that is, as if it was loaded originally INSIDE the first page.
On my tests below, the external page is loaded but it looses framework (headers/foorters).
Main page original code is this :
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>Testes Unimep</h1></header>
<div class="content" data-role="content">
<p>First page!</p>
<p><a href="#page2">Go to the second page!</a></p>
</div>
<footer data-role="footer"><h1>GT</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header"><h1>Testes Unimep</h1></header>
<div class="content" data-role="content">
<p>Second page!</p>
<p><a href="#page3">Go to Third Page</a></p>
</div>
<footer data-role="footer"><h1>GT</h1></footer>
</section>
<section id="page3" data-role="page">
<header data-role="header"><h1>Testes Unimep</h1></header>
<div data-role="content" class="content">
<p>Third page!</p>
<p><a href="#page1">Go back to First Page</a></p>
<p><a href="/X4/external.html?">fixo 322</a></p>
<p></P>
</div>
<footer data-role="footer"><h1>GT</h1></footer>
</section>
</body>
</html>
The external page is simple like this :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section id="page4" data-role="page">
<header data-role="header"><h1>Testes Unimep</h1></header>
<div data-role="content" class="content">
<p>External XPage!</p>
</div>
<footer data-role="footer"><h1>GT</h1></footer>
</section>
</body>
</html>
What's wrong ? This should be so simple !
What's the trick ?