page refreshes on logout

**wizkid** · 01-08-2009 12:57 PM

i made a login system using php and ajax.
the login is perfectly fine but however when i logout (by making a post request to logout.php) the whole page automatically refreshes after the request and response is complete.

Code:


	PHP Code:
	
//logout.phpsession_start();unset($_SESSION['uid']);unset($_SESSION['pwd']);session_destroy();?>

Code:

//ajax call
function logout()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }

var param="";
//url=url+"&sid="+Math.random();
//alert("THIS IS THE REQ param :\n"+param);
xmlHttp.onreadystatechange=function () 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
     logged_false();

// document.getElementById("register").innerHTML+=xmlHttp.responseText ;

 }
 
 }
xmlHttp.open('POST',url,true);
//xmlhttp.setRequestHeader("POST /"+url+"HTTP/1.1");
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length" , param.length);
xmlHttp.setRequestHeader("connection", "close");
//xmlHttp.setRequestHeader("\r\n\r\n");
xmlHttp.send(param);

    

}

the function logged_false() is called and executed and then the refresh takes place.

NOTE :: check out the above at phoenix.exofire.net using "nitesh" as both the username and password

**misson** · 01-11-2009 06:34 PM

You've done a decent job describing what you expect to happen and what actually happens, but didn't post enough information to answer your question. Whenever you ask a question, post a minimal test case, including all relevant source code (HTML & JS in this case, as it's a client side issue). In creating a minimal test case, you also may just figure out the problem.

What steps have you taken to debug the problem?

Note: you don't need to embed PHP tags within CODE tags.

**wizkid** · 01-12-2009 08:42 AM

here is a minimal php page for this site
check out phoenix.exofire.net/minimal.php

HTML Code:

//minimal.php
<?php
session_start();
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contact Us -Phoenix '09</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="stylesheet" type="text/css" href="home.css" />
<link rel="stylesheet" type="text/css" href="event_menu.css" />
<link rel="stylesheet" type="text/css" href="head.css" />
<link rel="stylesheet" type="text/css" href="left.css" />



</head>

<body>
<div id="container">
<div id="head">
</div>
<div id="main_menu">
</div>
<div id="event_menu">
<div id="event_menu_container">
</div>
</div>

<div id="left">
  <script language="JavaScript" src="login.js"></script>
				<div id="msg"></div>
                <div id="login_form"></div>
                <div id= "user_details"></div>
				<div id="register"> </div>
				
</div>

<div id="content">
For enquireis and suggestions contact:
</div>
<div id="right">
<div id="update" >
</div>
</div>
</div>
</body>
</html>

as far as the js is concerned i had only posted the minimal functions
just for reference posting the entire script

Code:

//login.js
// JavaScript Document
var status;
status=check_status();

function check_status()
{
	var xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null)
	 {
	 alert ("Browser does not support HTTP Request");
	 return;
	 }
	var url="check_status.php";
	
	var param="";
	//url=url+"&sid="+Math.random();
	//alert("THIS IS THE REQ URL :\n"+url);
	xmlHttp.onreadystatechange=function () 
			{ 
			if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
			 { 
			// document.getElementById("showstatus").innerHTML=xmlHttp.responseText ;
			status=xmlHttp.responseText;
			//alert(status);
			select_content(status);
			} 
	
	}
	xmlHttp.open('POST',url,true);
	//xmlhttp.setRequestHeader("POST /"+url+"HTTP/1.1");
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.setRequestHeader("Content-Length" , param.length);
	xmlHttp.setRequestHeader("connection", "close");
	//xmlHttp.setRequestHeader("\r\n\r\n");
	xmlHttp.send(param);
}


function select_content( status)
{
	if(status==1)
	logged_true();
	else
	logged_false();
	
}
function logged_true()
{
 	 document.getElementById("user_details").style.visibility="visible" ;
	 fetch_details();
	 document.getElementById("register").innerHTML="<a href=\"\" onClick=\"logout()\">Logout</a>" ;
	 document.getElementById("msg").innerHTML="";
	 document.getElementById("login_form").innerHTML="" ;
	 document.getElementById("login_form").style.visibility="hidden" ;

	
}
function logged_false()
{
 	 document.getElementById("login_form").style.visibility="visible" ;
	 show_form();
	 document.getElementById("register").innerHTML="<a href=\"register.php\" >Register</a>" ;	
	 document.getElementById("msg").innerHTML="";
	 document.getElementById("user_details").innerHTML="" ;
 	 document.getElementById("user_details").style.visibility="hidden" ;
	}

function show_form()
{
	var form="\n \n<form action=\"#\" method=\"post\" id=\"login\">"+
				"\n<fieldset id=\"login_fieldset\" >"+
				"\n<legend>Log in</legend>"+
				"\n<p><label>username</label>"+
				"\n<input type=\"text\" name=\"username\"/></p>"+
				"\n<p><label>password</label>"+
				"\n<input type=\"password\" name=\"pass\"/><p>"+
				"\n<p><input type=\"button\" value=\"submit\" name=\"submit\" onClick=\"submit_form()\"></p>"+
				"\n</feldset>"+
				"\n</form>";
	
 	document.getElementById("login_form").innerHTML=form;
}
function submit_form()
{
var xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="validate_login.php";

var username=document.getElementById("login").username.value;
var pass=document.getElementById("login").pass.value;
var param="username="+username+"&pass="+pass;
//url=url+"&sid="+Math.random();
//alert("THIS IS THE REQ param :\n"+param);
xmlHttp.onreadystatechange=function () 
		{ 
		if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
		 { 
		
		var status=xmlHttp.responseText;
		if(status==1)
		{
		//alert(status);
		select_content(status);
		}
		else
		 document.getElementById("msg").innerHTML=xmlHttp.responseText ;
		} 
		}
xmlHttp.open('POST',url,true);
//xmlhttp.setRequestHeader("POST /"+url+"HTTP/1.1");
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length" , param.length);
xmlHttp.setRequestHeader("connection", "close");
//xmlHttp.setRequestHeader("\r\n\r\n");
xmlHttp.send(param);
}



function fetch_details()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="user_details.php";

var param="";
//url=url+"&sid="+Math.random();
//alert("THIS IS THE REQ URL :\n"+url);
xmlHttp.onreadystatechange=function () 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("user_details").innerHTML=xmlHttp.responseText ;

 }
 
 }
xmlHttp.open('POST',url,true);
//xmlhttp.setRequestHeader("POST /"+url+"HTTP/1.1");
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length" , param.length);
xmlHttp.setRequestHeader("connection", "close");
//xmlHttp.setRequestHeader("\r\n\r\n");
xmlHttp.send(param);

	
	
}





function logout()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="logout.php";
URL =window.document.location;
var param="url="+URL;
//url=url+"&sid="+Math.random();
//alert("THIS IS THE REQ param :\n"+param);
xmlHttp.onreadystatechange=function () 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 	logged_false();

// document.getElementById("register").innerHTML+=xmlHttp.responseText ;

 }
 
 }
xmlHttp.open('POST',url,true);
//xmlhttp.setRequestHeader("POST /"+url+"HTTP/1.1");
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length" , param.length);
xmlHttp.setRequestHeader("connection", "close");
//xmlHttp.setRequestHeader("\r\n\r\n");
xmlHttp.send(param);

	

}



function GetXmlHttpObject()
{
var  XmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 XmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  XmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return XmlHttp;
}

**port5900** · 01-13-2009 01:54 AM

Why are you doing so much? why don't you use jQuery?
I'm pretty sure you will get a logout with out a refresh.
The reason I say to use jQuery is less code results in less trouble shooting.

**wizkid** · 01-13-2009 08:56 AM

Originally Posted by port5900

Why are you doing so much? why don't you use jQuery?
I'm pretty sure you will get a logout with out a refresh.
The reason I say to use jQuery is less code results in less trouble shooting.

it was just that i wanted to learn more............... i wanted to write my own script.
but now odds are going i favour of jquery
Edit:
an interesting observation

when i press logout no POST request is made to the server.
only the page is refreshed.

and if i directly call the page logout.php via url i am able to logout otherwise not
Edit:
yahoo.........................
finally i made a breakthrough!!!!
the case of the missing #
the error was too small to be noticed

Code:

//login.js
function logged_true()
{
 	 document.getElementById("user_details").style.visibility="visible" ;
	 fetch_details();
	 document.getElementById("register").innerHTML="<a href=\"\" onClick=\"logout()\">Logout</a>" ;
	 document.getElementById("msg").innerHTML="";
	 document.getElementById("login_form").innerHTML="" ;
	 document.getElementById("login_form").style.visibility="hidden" ;

	
}

all that was wrong was that the logout link had its href attribute set to null due to which a refresh request was first sent and then only logout() was called.

i proved me signature...........

**misson** · 01-14-2009 03:51 AM

Good work. Note that it wasn't so much a page refresh as a page open, and there are other potential solutions: return "false" in the click handler (or call Event.preventDefault()/set event.returnValue to "false") or use an element other than a link for the logout button.

Thread: page refreshes on logout

LinkBack

Thread Tools

Display

page refreshes on logout

Re: page refreshes on logout

Re: page refreshes on logout

Re: page refreshes on logout

Re: page refreshes on logout

Re: page refreshes on logout

Similar Threads

[REQ][$$$]1 page image flash redesign for choclate sales

Use PHP to add Content to page through Admin

Unique php page

Need Help: Cpanel-Apache page displaying on my site

Passing variables from page to page

Posting Permissions