Loading PHP includes in an AJAX called file
I need help getting an ajax function to work properly. I have a page that does a simulated search of a person's zip code. It shows a Google map of their location and an ajax loader.gif. After a 3000 MS timeout, the 开发者_如何学Cajax function is called to load more content in a <div id="content"></div>
The problem I am having is that the content that is loaded in the div doesn't seems to be getting any of the CSS styles I need and a few php includes. If I load the page that is called via the ajax function directly in the browser, everything displays fine. But when loaded in the ajax, I am missing the CSS and the PHP includes. Need someone ASAP to help me figure this out! Please respond.
Here's my code:
<?php
include($_SERVER['DOCUMENT_ROOT'] .'/inc/tokens.php');
?>
<!DOCTYPE HTML>
<html lang="en" xml:lang="en">
<!--head code-->
<head>
<link type="text/css" rel="stylesheet" href="../css/v1.css" />
<style type="text/css">
#quotebtn {
position:relative;
margin: 5px 0 1px 0;
left:45px;
float:left;
width: 200px;
height:50px;
border: 0px;
border-radius: none;
}
#form
{
margin: 100px;
}
</style>
<!--start scripts-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script language="javascript">
function ajax_request() {
setTimeout('load_results()', 3000);
}
function load_results(url) {
$('#content').hide('fast');
/*$('#content').fadeIn('normal');*/
$('#content').slideDown('fast', function() {
// Animation complete.
});
$('#content').load('page2.php #content', "",
function(responseText, textStatus, XMLHttpRequest) {
if(textStatus == 'error') {
$('#content').html('<p>There was an error making the AJAX request</p>');
}
}
);
}
</script>
</head>
<body onload="ajax_request();">
<ul id="nav">
<li><a href="page2.php">welcome</a></li>
</ul>
<!--form-->
<div id="form">
<div id="top"><img src="<?php echo $imgpath;?>/step1_boxtop.png" width="365px" height="100px" border="0" /></div>
<!--content-->
<div id="content">
<div id="page2text_1"><?php echo $form_text1;?></div>
<div id="loader"><img src="<?php echo $imgpath;?>/ajax-loader.gif" width="128px" height="15px" border="0" /></div>
<div id="gmaps">
<?php include($_SERVER['DOCUMENT_ROOT'] .'/offer/v1/gmap.php');?>
</div>
<div id="page2text_2"><?php echo $form_text2;?></div>
</div>
<!--content-->
</div>
<!--form-->
</body>
</html>
Maybe you will have better luck with .ajax() instead:
Replace:
$('#content').load('page2.php #content', "",
function(responseText, textStatus, XMLHttpRequest) {
if(textStatus == 'error') {
$('#content').html('<p>There was an error making the AJAX request</p>');
}
}
);
With:
var jqxhr = $.ajax({ type: 'POST', cache: false, url: 'page2.php', data: {id: 'somedata'},
success: function(data) {
$('#content').html(data.find('#content').html());
}
})
.error(function() {
$('#content').html('<p>There was an error making the AJAX request</p>');
});
加载中,请稍侯......
精彩评论