Question

So I have an interesting problem

I am having issues with the jquery .load() function. I have a file structure as follows

index.php  
|  
|---header.html  
|---body.html  
|---footer.html

index.php sets three variables as so $variable_one = new Database('passedQuery');

header.html, body.html and footer.html are then included into index.php

In body.html I have something similar to

<div class="span4 well">
        <h3>Current Statistics</h3>
        <hr>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Users</th>
                    <th>Event One</th>
                    <th>Event Two</th>
                    <th>Event Three</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><?php echo $var1->result[0][0]; ?></td>
                    <td><?php echo $var2->result[0][0]; ?></td>
                    <td><?php echo $var3->result[0][0]; ?></td>
                </tr>
            </tbody>
        </table>
    </div>

I also have a form in body.html which is submitted through a generic jquery function as so

 $(document).ready(function(){
    $('.btn').bind('click', function(e){
        e.preventDefault();
        var form = $(this).parents('form');
        var vals = $(form).serialize();
        var form_id = $(form).attr('id');
        $.ajax({
            url: $(form).attr('action'),
            type: $(form).attr('method'),
            data: vals,
            dataType: 'json',
            success: function(data){
                console.log("Success");
                $('#information').html('<div class="alert alert-success">Great Success! :)</div>');
                setTimeout(function() {
                    $('#content').load('views/partials/body.html');
                }, 5000);
            },
            error: function(a, b, c){
                console.log("Error");
                $('#information').html('<div class="alert alert-error">Epic Failure</div>');
                setTimeout(function() {
                    $('#content').load('views/partials/body.html');
                }, 5000);
            }
        });
    });
 });

When I submit the form and reload the body the PHP variables that were echo’d in the html are now gone and I get an apache error similar to the following

[dateTime] [error] [client IP] PHP Notice:  Undefined variable: variable in /path/to/body.html on line 133, referer: myReferrer

I asked a few of my friends about this and they were all stumped, as was #jquery of Freenode. Anyone have any ideas?

UPDATE – FORM CODE AND index.php CODE
Form

<div class="span4 well">
        <form class="form-horizontal" id="admin_add" name="admin_add" method="post" action="routes/to/add_admin.php">
            <fieldset>
                <legend>Add Administrator</legend>
                <div class="control-group">
                    <label class="control-label" for="select03">Select a user</label>
                    <div class="controls">
                        <select id="select03" name="user">
                            <?php
                                foreach($var1->result as $key => $value)
                                    echo "<option>".$value[0]."</option>";
                            ?>
                        </select>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary form-submit-button">Submit</button>
                </div>
            </fieldset>
        </form>
    </div>

Index

$var2 = new Database('query', 'SELECT COUNT(uid) FROM attendees WHERE eid = 1');
$var3 = new Database('query', 'SELECT COUNT(uid) FROM attendees WHERE eid = 2');

/**
 * List users to add to database
 */
$var1 = new Database('query', 'SELECT name FROM users WHERE admin=0');

/**
 * Include all the visuals
 */
include('views/partials/header.html');
require_once('views/partials/body.html');
include('views/partials/footer.html');

Answer 1

When you load body.html the first time I guess that you’re loading it using php’s include() function. Well, what this does is “concatenate” the php so on the server side it’s like its one long php file. This works with your variables because its as if there is no break in the code.

When you use jQuery’s load() functions this happens client side. What is happening is that you’re getting the html output of JUST body.html and you are dynamically (on the client side) putting that content into the client’s page.

The problem you’re having then is that the PHP is no longer concatenated. load() takes body.html in its singularity and puts it into the page.

Another way to look at it is that when someone goes to index.php the php is parsed, all the variables that are echo’d are turned into bog standard text/html and shipped to the browser. Once there they are no longer php variables, they are just text/html. Making a new request to body.html via javascript means that those variables you’re referencing are no longer available. They’ve already been converted to HTML and shipped to the browser, then the php stopped, and this is a new request.

I don’t know how you want to fix this to be honest. You might want to look into a templating system like smarty. Or you might want to put your functions into a file called functions.php include it into your body.html and then reference those functions in your body.html rather than relying on code in the index page.

i.e. your body.html will look like this:

<?php include "functions.php"; ?>
<div ...>
<?php 
    $var1 = getVar1(); // function in functions.php
    echo $var1->result[0][0];
    // ... etc
?>
</div>

Then when it is called from javascript, before it is delivered to the browser, the php will be evaluated and everything will work.

Hope I’ve explained this well dude. 🙂