Loading PHP includes in an AJAX called file

Question

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 ajax 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>

This is the code for page1, that calls page2.php via Ajax. I will also post page2.php's content. — PHP Noob
– PHP Noob, Commented Jun 29, 2011 at 21:16
it is hard to give an answer without seeing page2.php's content — BumbleB2na
– BumbleB2na, Commented Jun 29, 2011 at 21:25
Here are the pages: 1) dev.autoquotefinders.com/ajax/page2.php loads the ajax function after 3000ms. but as you can see the css and the facebook functions don't load. here's what is should look like when called: dev.autoquotefinders.com/ajax/formcode_page2b.php — PHP Noob
– PHP Noob, Commented Jun 29, 2011 at 21:34

BumbleB2na · Accepted Answer · 2011-06-29 22:33:51Z

2

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>');
});

edited Jun 29, 2011 at 22:33

answered Jun 29, 2011 at 21:49

BumbleB2na

10.8k6 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

PHP Noob Over a year ago

I just made this screencast to hire some live help. perhaps this will explain the problem better. please help. I'll try the ajax code above in the mean time. screencast.com/t/fpzg9tafNrV2

PHP Noob Over a year ago

Here is my javascript. can you edit so that I can paste it into my code and try. Im not to sure what to do with the code above..

PHP Noob Over a year ago

Hmm, nope. it now loads a second form on top of the other. dev.autoquotefinders.com/ajax/page2.php should 'somedata' be edited to somethign?

PHP Noob Over a year ago

is there some limitation with using php includes within the content of a file called in ajax?

BumbleB2na Over a year ago

No you are very close to having this work. I updated my answer again.

|

Collectives™ on Stack Overflow

Loading PHP includes in an AJAX called file

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related