page refreshes on logout

W

wizkid

New Member
Messages
25
Reaction score
0
Points
0
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]
//logout.php
session_start();
unset($_SESSION['uid']);
unset($_SESSION['pwd']);
session_destroy();
?>[/php]
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
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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.
 
Last edited:
W

wizkid

New Member
Messages
25
Reaction score
0
Points
0
here is a minimal php page for this site
check out phoenix.exofire.net/minimal.php

HTML: 
//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

port5900

New Member
Messages
150
Reaction score
0
Points
0
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.
 
W

wizkid

New Member
Messages
25
Reaction score
0
Points
0
port5900 said:
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.
Click to expand...

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 [B]href=\"\" [/B]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...........:)
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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.
 
You must log in or register to reply here.
Top