This may be a very basic issues but i do not have very much experiance with ajax and php,

What i am trying to do is create a login feild on my website, Once the user clicks login if they are successfull the login feild will be replaced with the conent that the user is authroized to see.

I have already created my Login script and everything but calling it with ajax....is proving to be a headache

Any help would be greatly appretiated.

Here is the Code i have done up for my login

Login Index. Contains Ajax Code (I did not write it) as well as the php includes for the login

<script type="text/javascript">
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
<?php
define("IN_APP",0);
require("app.php");

if(!$blnLoggedin){

include("javascript:ajaxpage('pages/login.php','colTwo');");

} else {

include("javascript:ajaxpage('pages/home.php','colTwo');");

}
?>

Here is the Page that should be loaded Upon opening up index assuming the user has not been logged in

<?php
if(!defined("IN_APP")){ die(); }

if(isset($_POST['Submit'])){

//Get variables
$strUsername = $_POST['username'];
$strPassword = $_POST['password'];

//Check login
if(!$cMySQL->doLogin($strUsername, $strPassword)){

	$strError = "Username/password combination incorrect.";

} else {

	header("Location: index.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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Login</title>
</head>

<body>
<form method="post" action="index.php">
<table width="250" border="0" cellspacing="2" cellpadding="0" style="border: 1px solid black;">
  <tr style="background-color:#000000; color:#FFFFFF;">
    <th colspan="2" scope="col">Login</th>
  </tr>
  <tr>
    <td>Username:</td>
    <td><input name="username" type="text" id="username" /></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input name="password" type="password" id="password" /></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><?php if(isset($strError)){ echo("<font color=\"red\">".$strError."</font><br/>"); } ?><input type="submit" name="Submit" value="Login" /></td>
  </tr>
</table>
</form>
</body>
</html>

If the user has been authenticated or succesfully loged in with the previous script it would them show them there page

Sorry if i was not supposed to all that code. I just hitting my head against the wall trying to get this to work so.

    Niroshan,

    Am i correct in assuming that the index.php is meant to be the login script?

      hi..

      well you can point the index.php file as well. But as you know ajax is developed using javascript so after validating the logins with the database values the results also should be handle through javascript.

      if(!$cMySQL->doLogin($strUsername, $strPassword)){

	$strError = "Username/password combination incorrect.";

} else {

	header("Location: index.php");

}

      see the above code of yours. you try to handle the end result through PHP, for example your trying to redirect the file using PHP. but in ajax you cannt do that.

      check my code. youll see what im talking about.

        Sorry about the late reply,

        I took a look it seems that this replaces the entire login procedure which is not what i really wanted to do.

        All i wanted was that when a user clicks login instead of a new window opening either saying invalid info or displaying the page it would open it in the same window that the current login box is sitting in. Which in this case happens to be Div=colTwo

          hi,

          sorry for the late reply. well in my code its replaces everything since i have my main div (mainBody , which is equal to your colTwo) covering whole the body part of the file. so if you do not want to replace whole contents you just place the mainbody div outside the login box.

          see the example below,

          
<table border="0" width="100%">
  <tr>
    <td>your login box</td>
    <td><div id="mainBody "></div></td>
  </tr>
</table>

          hope this is what you wanted. if any probs please let me know.

          note: depending on the login result if you want to redirect user to a different page just use javascript.

          window.location.href='redirect file name';

          this will load specified page in the same window.

          Thanks
          Niroshan

            Write a Reply...