call ajax page in current ajax page
i created two page "index.php" & "library.php" in the index.php page i include library page in a div using ajax.the problam is when i call library.php page in index.php the ajax which is exist library.php is not working.please help......
here is my code
Index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var rootdomain = "http://" + window.location.hostname
function ajaxinclude(url) {
var page_request = false
if (window.XMLHttpRequest) page_request = new XMLHttpRequest()
else if (window.ActiveXObject) {
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
}
} else return false
page_request.open('GET', url, false)
page_request.send(null)
writecontent(page_request)
}
function writecontent(page_request) {
if (window.location.href.indexOf("http") == -1 || page_request.status == 200) document.write(page_request.responseText)
}
</script>
</head>
<body>
<div style="width:400px; height:500px;">
<script type="text/javascript">
ajaxinclude("Library.php")
</script>
</div>
</body>
</html>
Library.php
(include in index.php page)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>
<script src="javascript/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="javascript/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="javascript/jquery.tabs.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">
<style type="text/css" media="screen, projection">
body {
font-size: 16px; }
* html body {
font-size: 100%;
}
body * {
font-size: 87.5%;
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
}
body * * {
开发者_开发百科font-size: 100%;
}
h1 {
margin: 1em 0 1.5em;
font-size: 18px;
}
h2 {
margin: 2em 0 1.5em;
font-size: 16px;
}
p {
margin: 0;
}
pre, pre+p, p+p {
margin: 1em 0 0;
}
code {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<h2>Slide and Fade Effect Combined</h2>
<div id="container-5">
<ul>
<li><a href="#fragment-13"><span>One</span></a></li>
<li><a href="#fragment-14"><span>Two</span></a></li>
<li><a href="#fragment-15"><span>Three</span></a></li>
</ul>
<div id="fragment-13">
<p>Use a combined slide and fade effect to switch tabs:</p>
<pre><code>$('#container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre>
</div>
<div id="fragment-14">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-15">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<script type="text/javascript">
$(function() {
$('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
});
</script>
</body>
</html>
after reading your code, it looks like you want to add a page in an existing page, then why you are using those ... again ?
Just try with the plain text ! no html, head !
script, and style can be used :)
you can use this jQuery code
$("#targetDiv").load("library.php");
Edit 2
try jQuery with this Library.php
<script src="javascript/jquery-1.1.3.1.pack.js" type="text/javascript"/>
<script src="javascript/jquery.history_remote.pack.js" type="text/javascript" />
<script src="javascript/jquery.tabs.pack.js" type="text/javascript" />
<link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">
<style type="text/css" media="screen, projection">
body {
font-size: 16px; }
* html body {
font-size: 100%;
}
body * {
font-size: 87.5%;
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
}
body * * {
font-size: 100%;
}
h1 {
margin: 1em 0 1.5em;
font-size: 18px;
}
h2 {
margin: 2em 0 1.5em;
font-size: 16px;
}
p {
margin: 0;
}
pre, pre+p, p+p {
margin: 1em 0 0;
}
code {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<h2>Slide and Fade Effect Combined</h2>
<div id="container-5">
<ul>
<li><a href="#fragment-13"><span>One</span></a></li>
<li><a href="#fragment-14"><span>Two</span></a></li>
<li><a href="#fragment-15"><span>Three</span></a></li>
</ul>
<div id="fragment-13">
<p>Use a combined slide and fade effect to switch tabs:</p>
<pre><code>$('#container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre>
</div>
<div id="fragment-14">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-15">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<script type="text/javascript">
$(function() {
$('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
});
</script>
加载中,请稍侯......
精彩评论