CODEWITHSUNDEEP
phphtml
David Kroukamp
David Kroukamp

Reputation: 36423

Div won't refresh in PHP using include and Javascript

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>

Upvotes: 1

Views: 1074

Answers (3)

Alwayslearning
Alwayslearning

Reputation: 171

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

Upvotes: 2

Travesty3
Travesty3

Reputation: 14479

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.

Upvotes: 1

George
George

Reputation: 357

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'].

Upvotes: 1

Related Questions