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 '<script type="text/javascript">$(".menu.row").load("index.php");</script>'; but where is jQuery being loaded? — j08691
– j08691, Commented Apr 10, 2013 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
– David Kroukamp, Commented Apr 10, 2013 at 15:09
Yes, that's jQuery and if you're not including jQuery then it won't do a thing. — j08691
– j08691, Commented Apr 10, 2013 at 15:11
Okay but I see I have text/javascript" I attempted changing to echo '<script type="text/jquery">$(".menu.row").load("index.php");</script>'; 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
– David Kroukamp, Commented Apr 10, 2013 at 15:12

Alwayslearning · Accepted Answer · 2013-04-10 15:52:19Z

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

thanks this is now half working but now somehow my footer is replacing my nav bar???? and the code is still what I posted
What happens when you change the echo to: echo '<script type="text/javascript">$(".menu.row").load("nav.php");</script>';
The issue is include('nav.php') is being executed before the $_SESSION['logged_in'] variable is being set to true

George · Accepted Answer · 2013-04-10 15:37:41Z

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.
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?

Travesty3 · Accepted Answer · 2013-04-10 15:39:05Z

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.

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?
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
It looks like there are a few problems. I will update my answer.

Collectives™ on Stack Overflow

Div won't refresh in PHP using include and Javascript

3 Answers 3

7 Comments

2 Comments

3 Comments

Linked

Hot Network Questions