Using AJAX to dynamically load information from a PHP file

Question

Hi Treehouse Family. I was hoping you could help me with a project I am working on.

I want to use ajax requests to load php files that are based on db info. So a user clicks on the link to a category of things, ajax/jquery loads inner html of #container with resulting info from the stuff.php file. Like a single page app.

Although I can see my html code from stuff.php coming through when I call it, I keep getting error messages from my foreach loop ("$stuff not declared" in my current configuration). It appears my variables in my index.php file will not communicate with the rule loaded by stuff.php when it is called. I've tried moving around my require statements and variables to different parts of the files (including into stuff.php) with no success. What am I missing here? Is this even possible? I can't find anyone else who has tried to do this. Thanks

This is my index code

<?php 
     require_once("models.php"); 
     $stuff = functional_sql_statement(); 
?>
<div id="container">
    <a href="#" onclick="sendAJAX">Load List of Things</a>
</div>

This is my jquery code

function sendAJAX(){
    $('#container').load('stuff.php');
    console.log('sendAJAX'); 
};

This is the list view from stuff.php I am trying to load

<?php       
    foreach($stuff as $thing){
        echo '<li><a href="./things?id='. $thing["id"] .'">' . $thing["name"] . '</a></li>'; 
    }
?>

Answer 1 · 2015-05-20T18:23:52Z

May 20, 2015 6:23pm

When you make a request to a file using the jQuery load() method, it sends data just like any regular request through your browser. It has no knowledge of any of your existing PHP variables unless you pass them along with your ajax request as data. See jQuery's documentation

Your data, or $stuff should be in a json object like this...

function sendAJAX(){
    $('#container').load(
    "stuff.php",  // url
    { // json object of data to pass to the page
        stuff: "all your stuff goes in here...",
        moreStuff:  "even more stuff"
    });
    console.log('sendAJAX'); 
};

Then you have to be looking for that stuff on the PHP file.

Welcome to the Treehouse Community

Looking to learn something new?

Travis Stewart

Travis Stewart

Using AJAX to dynamically load information from a PHP file

1 Answer

Ron McCranie

Ron McCranie

Travis Stewart

Travis Stewart