Div won't refresh in PHP using include and Javascript

Question

I am attempting to create a login page.

For now you simply click Login on the login.php page, it then sends a request to index.php which shows a message for a successful login and changes a variable loggedin which is used in the session to see if user has logged in or not, then redirects to the home page.

Now my navigation bar (nav.php) checks the session variable loggedin and will display contents accordingly i.e whether a user is logged in or not and if they can see the My profile link etc...

The problem is when the login page (login.php) sends a request to index.php for the logged in page it does a check like this:

index.php:

.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }

...

.menu.row { height: 75px; top: 75px; background-color: #EDEDED;  }
...

<div class="menu row">
    <?php 
        include("nav.php"); ?>
</div> 

...

case 'logged_in':
    $_SESSION['loggedin'] = true;   
    print '<script type="text/javascript">'; 
    print 'alert("You have been logged in successfully and will be re-directed to your homepage...")'; 
    print '</script>';
    include('home.html');
    echo '<script type="text/javascript">$(".menu.row").load("index.php");</script>';
break;

as you can see the last echo statement attempts to update the menu row div class which contains nav.php in order to reflect the changes from the session variable loggedin being displayed but it only shows changes after I click another link on the nav.php page.

So basically I'm asking why does my

echo '<script type="text/javascript">$(".menu.row").load("index.php");</script>';

doesn't refresh the div which contains my nav.php and thus allowing nav.php to execute the PHP code to check the variable loggedin and act accordingly?

Here is some of the code:

index.php:

<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CC Chat</title>
        <meta 
        http-equiv="content-type" content="text/html; charset=utf-8" 
        />
        <!-- 
        Thanks too http://stackoverflow.com/a/7851347/1133011 for the help
        on layout which acts more like frames but avoids them and using divs. As frames have 
        known draw backs see here http://stackoverflow.com/questions/4600648/frames-with-php we
        should thus rather use include in php
        !-->
        <style type="text/css" media="screen">
        /* Generic pane rules */
        body { margin: 0 }
        .row, .col { overflow: hidden; position: absolute; }
        .row { left: 0; right: 0; }
        .col { top: 0; bottom: 0; }
        .scroll-x { overflow-x: auto; }
        .scroll-y { overflow-y: auto; }

        .header.row { height: 75px; top: 0; background-color: #E5E5E5; }
        .menu.row { height: 75px; top: 75px; background-color: #EDEDED;  }
        .body.row { top: 150px; bottom: 50px; background-color: #F5F5F5; }
        .footer.row { height: 75px; bottom: 0; background-color: #EBEBEB; }
        </style>
    </head>
    <body>
        <div class="header row">
        <?php include("header.html"); ?>
        </div> 

        <div class="menu row">
        <?php 
            include("nav.php"); ?>
        </div> 

        <div class="body row scroll-y">
        <?php
            if(isset($_GET['page'])) {
                switch ($_GET['page']) {
                    case 'login':
                        include('login.php');
                    break;
                    case 'logged_in':
                        $_SESSION['loggedin'] = true;   
                        print '<script type="text/javascript">'; 
                        print 'alert("You have been logged in successfully and will be re-directed to your homepage...")'; 
                        print '</script>';
                        include('home.html');
                        echo '<script type="text/javascript">$(".menu.row").load("index.php");</script>';
                    break;
                    case 'log_out':
                        $_SESSION['loggedin'] = false;
                        include('loggedout.html');
                    break;
                    case 'profile':
                        include('profile.php');
                    break;
                    case 'contact_us':
                        include('contact.html');
                    break;
                    default:
                    include('home.html');
                    break;
                }
            } else
                include('home.html'); 
        ?>
        </div> 

        <div class="footer row">
        <?php include("footer.php"); ?>
        </div>
    </body>
</html>

nav.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Navigator</title>
        <meta
        http-equiv="content-type"
        content="text/html; charset=iso-8859-1"
        />
    </head>

    <body>
            <p align="center">
                <?php 
                    if(isset($_SESSION['loggedin'])) {
                        switch ($_SESSION['loggedin']) {
                            case true:
                                echo "<a href=\"index.php?page=home\">Home</a> <a href=\"index.php?page=contact_us\">Contact Us</a> <a href=\"index.php?page=profile\">My profile</a> <a href=\"index.php?page=log_out\">Log out</a>";
                            break;
                            default:
                                echo "<a href=\"index.php?page=home\">Home</a> <a href=\"index.php?page=contact_us\">Contact Us</a> <a href=\"index.php?page=login\">Login</a>";
                            break;
                        }
                    } else {
                        echo "<a href=\"index.php?page=home\">Home</a> <a href=\"index.php?page=contact_us\">Contact Us</a> <a href=\"index.php?page=login\">Login</a>";
                    }
                ?>  
            </p>
    </body>

</html>

login.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Login</title>
        <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-1"
        />
    </head>

    <body>
        <h2 align="center">Login</h2>
        <p align="center">
            <?php 
                $var=true;//user password was correct
                if($var==true){
                    echo '<a href="index.php?page=logged_in">Login</a>';
                } else {
                    print '<script type="text/javascript">'; 
                    print 'alert("Password is incorrect.")'; 
                    print '</script>';
                }
            ?> 
        </p>
    </body>

</html>

You're using jQuery in `echo '';` but where is jQuery being loaded? — j08691, Apr 10 '13 at 15:08
@j08691 Is that JQuery?? Beats me I got it from another answer on SO cant find it now to link it but thats what the OP marked as the answer for refershing a div in php after an `include(..)`.... — David Kroukamp, Apr 10 '13 at 15:09
Yes, that's jQuery and if you're not including jQuery then it won't do a thing. — j08691, Apr 10 '13 at 15:11
Okay but I see I have `text/javascript"` I attempted changing to `echo '';` but still no effect after I press Login I still have to click a link on the nav.php for it to refresh — David Kroukamp, Apr 10 '13 at 15:12
@crimson_penguin I see sorry for my ignorance I changed it back to what is was... obviously still not working though maybe my identifier for the `div` `menu row` is wrong? — David Kroukamp, Apr 10 '13 at 15:20

Alwayslearning · Accepted Answer · 2013-04-10T15:52:19.500

2

Okay but I see I have text/javascript" I attempted changing to echo cript type=text/jquery">$(".menu.row").load("index.php");; but still no effect after press Login I still have to click a link on the nav.php for it to refresh – David Kroukamp 4 mins ago

I'm afraid I can't make comments so have to use an answer. Changing the type to text/jquery won't work. Include the following before you call the jQuery....

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

And leave your script type as text/javascript

You can also download the latest jquery.min.js and link to it on your own server rather than linking to googleapis.com

UPDATE

At the moment you are including the nav.php and THEN setting the session variable. This is why it works when you click on nav.php after the page has loaded.

case 'logged_in':
                        $_SESSION['loggedin'] = true;

the above needs to be set before

include('nav.php');

edited Apr 10 '13 at 15:52

answered Apr 10 '13 at 15:21

Alwayslearning

171
8

thanks this is now half working but now somehow my footer is replacing my nav bar???? and the code is still what I posted – David Kroukamp Apr 10 '13 at 15:29
What happens when you change the echo to: echo ''; – Alwayslearning Apr 10 '13 at 15:35
Nothing it just stays the same until I click the nav.php – David Kroukamp Apr 10 '13 at 15:36
The issue is include('nav.php') is being executed before the $_SESSION['logged_in'] variable is being set to true – Alwayslearning Apr 10 '13 at 15:51
How would I get around that? – David Kroukamp Apr 10 '13 at 15:55
+1 thank you moved my div which contains nav below my body div which has the php code to change variable and it worked thanks a million – David Kroukamp Apr 10 '13 at 15:58
You need to move the case when page=loggedin set $_SESSION['loggedin'] = true to before the include('nav.php'); line – Alwayslearning Apr 10 '13 at 15:59

Travesty3 · Answer 2 · 2013-04-10T15:39:05.567

1

A JavaScript library is a bunch of code that someone has written to provide you with certain functionality. It's not its own separate language. So your type should still be text/javascript. But you need to include that library on your page. You can either download the it from http://jquery.com/download/ or you can use a hosted version, like this:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Or use Google's CDN if you prefer:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

UPDATE:

nav.php looks like it holds an entire HTML document. You're inserting that into a div in another HTML document. You should modify nav.php to just include the content that you want to go into the div (probably just the contents of the <p> tag.

Also, it doesn't look like you're starting your PHP session in nav.php. So it will not have access to $_SESSION variables. Make sure you call session_start(); in nav.php.

edited Apr 10 '13 at 15:39

answered Apr 10 '13 at 15:21

Travesty3

14,351
6
61
98

1

Calling `$(".menu.row").load("index.php");` will replace the contents of the element with the classes `menu` and `row` with the contents of `index.php`. So it sounds like the contents of `index.php` is your footer, or all of your page, and only the bottom of the div (the footer) is showing in the div. Perhaps you meant to load `nav.php` instead of `index.php`? – Travesty3 Apr 10 '13 at 15:31
Hmm thank you I never knew that I now changed index.php to nav.php as thats what I want to refresh but no difference except my footer is no more rpelacing the nav.php page – David Kroukamp Apr 10 '13 at 15:34
It looks like there are a few problems. I will update my answer. – Travesty3 Apr 10 '13 at 15:36

George · Answer 3 · 2013-04-10T15:37:41.210

Try this in nav.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Navigator</title>
        <meta
        http-equiv="content-type"
        content="text/html; charset=iso-8859-1"
        />
    </head>

    <body>
            <p align="center">
                <?php 
                    if(isset($_GET) && isset($_GET['page'])) {
                        if($_GET['page'] == 'logged_in') {
                            echo "<a href=\"index.php?page=home\">Home</a> <a href=\"index.php?page=contact_us\">Contact Us</a> <a href=\"index.php?page=profile\">My profile</a> <a href=\"index.php?page=log_out\">Log out</a>";
                        } else {
                            echo "<a href=\"index.php?page=home\">Home</a> <a href=\"index.php?page=contact_us\">Contact Us</a> <a href=\"index.php?page=login\">Login</a>";
                        }
                    } else {
                        echo "<a href=\"index.php?page=home\">Home</a> <a href=\"index.php?page=contact_us\">Contact Us</a> <a href=\"index.php?page=login\">Login</a>";
                    }
                ?>  
            </p>
    </body>

</html>

Switch statements are tricky, so I tend to stand clear of them. Your initial mistake was referencing the variable $_SESSION['logged_in'] rather than $_SESSION['page'].

I have it working in my sandbox. Copy & pasted everything from your post. Edited my post to include full code. — George, Apr 10 '13 at 15:38
OOh very nice its nearly working but now it lgs me in and shows Im logged in but if I click another link it goes back to as if I was not logged in... I guess thats the side effect of checking the page? — David Kroukamp, Apr 10 '13 at 15:54

Div won't refresh in PHP using include and Javascript

3 Answers3