Ajax Login ajaxForm() issues

[pythondev]

I will paste a bt of code to show how things are working first then explain the problem...
Javascript (jQuery):

$(document).ready(function()
{
$('#loginf').ajaxForm({
            beforeSubmit: function () { $('#getLog').html('<img src="/img/ajax-loader.gif">')},
            target: '#getLog'
        });

$('#logOut').ajaxForm({
            beforeSubmit: function () { $('#getLog').html('<img src="/img/ajax-loader.gif">')},
            target: '#getLog'
        });

});

PHP

$s_doLogin = $this->loginDisp();

        if (isset($_POST['ajaxCall']) && $_POST['ajaxCall'] == '1'){
        echo $s_doLogin;
        die;
        }

[B]public function loginDisp[/B](){
        if ($this->obj_protect->showPage){
        $curUser=$this->obj_protect->getUser();
        $s_doLogin = "<span id=\"userLog\">Welcome<br>".$curUser."</span><br><br>\r\n";
        $s_register = $this->obj_language->get("language/ucPanel");
        $s_doLogin .= "<a href=\"/cp/\">".$s_register."</a><br>\r\n";
        
        if ($this->obj_protect->checkAdmin() == "1"){
        $s_doLogin .= "<a href=\"/adm/\">Admin</a><br>\r\n";
        }
        $s_doLogin .= $this->obj_layouts->doLogout();
        
        } else {
        
        $s_register = $this->obj_language->get("language/register");
        $s_user = $this->obj_language->get("language/login/username");
        $s_pass = $this->obj_language->get("language/login/pass");
        $s_remMe = $this->obj_language->get("language/logRem");

        $s_doLogin = $this->obj_layouts->doLogin($s_user, $s_pass, $s_remMe);
        $curUser=$this->obj_protect->checkLogin();
        $s_errMsg = $this->obj_language->get("language/userPass");
        $s_curUser= str_replace("{userPass}", $s_errMsg ,$curUser);
        $s_doLogin .= $s_curUser;
        $s_doLogin .= "<br><a href=\"/index.php?p=register\">$s_register</a>";
        

        
        }
        return $s_doLogin;
} 

PHP:

public function doLogin($s_user, $s_pass, $s_remember="Remember"){
    $getURI = $_SERVER['REQUEST_URI'];
    //"<form id=\"login\" name=\"login\" method=\"post\" action=\"".$getURI."\">
    $s_return = "<form id=\"loginf\" method=\"post\" action=\"".$getURI."\" >

      <label>".$s_user."
        <input type=\"text\" name=\"username\" id=\"username\" title=\"required\" size=\"16\" />
      </label>
      <br />
              <label>".$s_pass."
          <input type=\"password\" name=\"password\" id=\"password\" title=\"required\" size=\"16\"/>
        </label>
        <input type=\"hidden\"  id=\"action\" name=\"action\" value=\"login\" />
        <input type=\"hidden\" id=\"ajaxCall\" name=\"ajaxCall\" value=\"1\" />
        <input name=\"login\" type=\"submit\" id=\"login\" value=\"Login\"/><br>
    ".$s_remember."<input type=\"checkbox\" id=\"userRemember\" name=\"userRemember\" value=\"yes\">
       </form>";
    return $s_return;
    }

    public function doLogout(){
    $getURI = $_SERVER['REQUEST_URI'];
    $s_return = "<form id=\"logOut\" method=\"post\" action=\"".$getURI."\">
    <input type=\"hidden\" id=\"ajaxCall\" name=\"ajaxCall\" value=\"1\" />
        <input type=\"hidden\" id=\"action\" name=\"action\" value=\"logout\" />
        <input name=\"logout\" type=\"submit\" id=\"logout\" value=\"Log Out\" /><br>
      </form>";
    return $s_return;
    } 

Now the Issue:

the whole thing works fine as long as you click a link after you login and reload the page, but if you login, then logout straight away it throws you to the textResponse page instead of loading into the getLog division.

any idea's on how to counteract this and load the txtResponse into the right place?

[misson]

$(document).ready(function()
{
$('#loginf').ajaxForm({
            beforeSubmit: function () { $('#getLog').html('<img src="/img/ajax-loader.gif">')},
            target: '#getLog'
        });

$('#logOut').ajaxForm({
            beforeSubmit: function () { $('#getLog').html('<img src="/img/ajax-loader.gif">')},
            target: '#getLog'
        });

});

[...] if you login, then logout straight away it throws you to the textResponse page instead of loading into the getLog division.

When the page loads, #logOut doesn't exist, so the call to $('#logOut').ajaxForm() fails.

public function doLogin($s_user, $s_pass, $s_remember="Remember"){
    $getURI = $_SERVER['REQUEST_URI'];
    //"<form id=\"login\" name=\"login\" method=\"post\" action=\"".$getURI."\">
    $s_return = "<form id=\"loginf\" method=\"post\" action=\"".$getURI."\" > 

Why use double quoted strings when you're not using variable interpolation? Why use double quotes for HTML attributes in a double quoted string, which requires escaping the quotes, when you can use single quotes?

There are three alternatives, each of which is less messy.

• Single quote the PHP string, double quote the attributes, concatenate the variables:
  

      $s_return = '<form id="loginf" method="post" action="' . $getURI . '" >
  ...'; 

• Double quote the PHP string, single quote the attributes, rely on interpolation:
  

      $s_return = "<form id='loginf' method='post' action='$getURI' >
  ... 

• (my recommendation for this case) use heredoc strings:
  

      $s_return = <<<EOS
  <form id="loginf" method="post" action="$getURI" >
  ...
  EOS; 

  Note you can use any word to end the heredoc string. I used "EOS" for "End Of String", but "EOF" and "ETB" (from the End of Transmission Block control character) are also common.

[pythondev]

When the page loads, #logOut doesn't exist, so the call to $('#logOut').ajaxForm() fails.


Why use double quoted strings when you're not using variable interpolation? Why use double quotes for HTML attributes in a double quoted string, which requires escaping the quotes, when you can use single quotes?

There are three alternatives, each of which is less messy.

• Single quote the PHP string, double quote the attributes, concatenate the variables:
  

      $s_return = '<form id="loginf" method="post" action="' . $getURI . '" >
  ...'; 

• Double quote the PHP string, single quote the attributes, rely on interpolation:
  

      $s_return = "<form id='loginf' method='post' action='$getURI' >
  ... 

• (my recommendation for this case) use heredoc strings:
  

      $s_return = <<<EOS
  <form id="loginf" method="post" action="$getURI" >
  ...
  EOS; 

  Note you can use any word to end the heredoc string. I used "EOS" for "End Of String", but "EOF" and "ETB" (from the End of Transmission Block control character) are also common.

After some playing around, I found, my php looks nice, doesn't change it's effect.. but does nothing to deal with the AJAX issue.
any advice on that ?

[misson]

After some playing around, I found, my php looks nice, doesn't change it's effect..

The string format was a matter of readability.

but does nothing to deal with the AJAX issue. any advice on that ?

Did you work on the problem with #logOut not existing when the argument to $(document).ready(...) is invoked?

When the page loads, #logOut doesn't exist, so the call to $('#logOut').ajaxForm() fails.

[pythondev]

although your post not that informative, it did give me a few idea's...

I spent a whole lot of time re-writing the code to add both classes and then use $('#mydiv1).show(); plus the hide function and also the jquery.cookie plugin to look for the cookie set or not set to show and hide the different divisions as needed, then put the textresponse into different fields...

alot of extra bits here and there, but is working the way I intended now... working with legacy code from others is never fun...LOL
will post the code just in case it is usefull for someone else.

HTML now looks like this:

<div id="getLog">Welcome User</div>
<div id="LogErr"></div>

<div id="log_in">
    <form id="loginf" method="post" action="/index.php?lang=en" > <label>Username
	 <input type="text" name="username" id="username" title="required" size="16" />
         </label>
         <br />
              <label>Password
          <input type="password" name="password" id="password" title="required" size="16"/>
          </label>
          <input type="hidden"  id="action" name="action" value="login" />
          <input type="hidden" id="ajaxCall" name="ajaxCall" value="1" />
          <input name="login" type="submit" id="login" value="Login"/><br>
	  Remember Me<input type="checkbox" id="userRemember" name="userRemember" value="yes">
       </form><br><a href="/index.php?p=register">Register New User</a>
</div>

<div id="log_out">
      <form id="logOut" method="post" action="/index.php?lang=en">
	<input type="hidden" id="ajaxCall" name="ajaxCall" value="1" />
        <input type="hidden" id="action" name="action" value="logout" />
        <input name="logout" type="submit" id="logout" value="Log Out" /><br>
      </form>
</div>

And JQuery Looks like this

$(document).ready(function()
{

    var COOKIE_NAME = 'User-Name';

    if ($.cookie( COOKIE_NAME) != undefined){ // check the value // returns test
	$('#log_in').hide();
	$('#log_out').show();
	} else {
	$('#log_out').hide();
	$('#log_in').show();
	}

$('#loginf').ajaxForm({
			target: '#getLog',
			resetForm: true,
			beforeSubmit: function () { $('#log_in').hide(); $('#getLog').html('<img src="/img/ajax-loader.gif">'); },
			success:       function () { 
			$('#LogErr').removeClass().addClass('LogErr').html(' ')
			 if ($.cookie( 'User-Name' ) != undefined){ // check the value // returns test
			$('#log_in').hide();
			$('#log_out').show();
			$('#LogErr').removeClass().addClass('LogErr').html(' ')
			showResponse; 
			} else {
			$('#log_out').hide();
			$('#log_in').show();
			$('#LogErr').removeClass().addClass('errorMsg').html('Username or Password Invalid!')
			showResponse; 
			}
			
			}
			
	
		});

$('#logOut').ajaxForm({
			target: '#getLog',
			beforeSubmit: function () { $('#log_out').hide(); $('#getLog').html('<img src="/img/ajax-loader.gif">'); },
			success:       function () {  $('#log_in').show(); showResponse;}
		});

});

jscript includes are:

<script type="text/javascript" src="/templates/jquery.js"></script>
<script type="text/javascript" src="/templates/jquery.form.js"></script>
<script type="text/javascript" src="/templates/jquery.cookie.js"></script>

hope it is usefull to someone...

[descalzo]

When the page loads, #logOut doesn't exist, so the call to $('#logOut').ajaxForm() fails.

Did you work on the problem with #logOut not existing when the argument to $(document).ready(...) is invoked?

In jQuery, $(document).ready() is called after the page is loaded, so that is not an issue.

[misson]

although your post not that informative, it did give me a few idea's...

Where's the fun if I give away all the answers? In truth, your code was advanced enough that I figured you only needed a nudge to work out a solution, and you did. Besides, I was curious to see what you'd come up with.

In jQuery, $(document).ready() is called after the page is loaded, so that is not an issue.

It is an issue if content doesn't exist when the page is loaded, such as when it's the result of an AJAX query. Note that loginDisp() calls exactly one of doLogin() or doLogout(), which generate #loginf and #logOut, respectively. When $_POST['ajaxCall'] is set, the script outputs the result of loginDisp() and (it's a fair bet) nothing else. Note also that the result of each form is placed in #getLog. These facts, along with the behavior pythondev mentions, suggests that the forms are loaded into the page after the document finishes loading, except for one instance that's loaded when the page is.

[pythondev]

actually both of you are right and wrong.. what started me on this with jQuery was browser compatability and the way different browsers handle javascript.. for example the "Original javascript" I wrote works fine in IE and Firefox but not Chrome. so I had to come up with a new way of doing it that was cross compatable with all browsers.

Original pure javascript code(this doesn't care if logOut not loaded)

// Callback function to handle the event.
  function getForm(fobj) {  
    var str = "";  
    var ft = "";  
    var fv = "";  
    var fn = "";  
    var els = "";  
    for(var i = 0;i < fobj.elements.length;i++) {  
     els = fobj.elements[i];  
     ft = els.title;  
     fv = els.value;  
     fn = els.name;  
    switch(els.type) {  
     case "text":  
     case "hidden":  
     case "password":  
     case "textarea":  
     // is it a required field?  
     if(encodeURI(ft) == "required" && encodeURI(fv).length < 1) {  
       alert('\''+fn+'\' is a required field, please complete.');  
       els.focus();  
       return false;  
     }  
     str += fn + "=" + encodeURI(fv) + "&";  
     break;   
     
     case "checkbox":  
     case "radio":  
      if(els.checked) str += fn + "=" + encodeURI(fv) + "&";  
     break;      
     
     case "select-one":  
       str += fn + "=" +  
       els.options[els.selectedIndex].value + "&";  
     break;  
     } // switch  
    } // for  
    str = str.substr(0,(str.length - 1));  
    return str;  
   }  
   
      var req = createXMLHttpRequest();  
      
    function createXMLHttpRequest() {  
     var ua;  
     if(window.XMLHttpRequest) {  
     try {  
      ua = new XMLHttpRequest();  
     } catch(e) {  
      ua = false;  
    }  
    } else if(window.ActiveXObject) {  
     try {  
       ua = new ActiveXObject("Microsoft.XMLHTTP");  
     } catch(e) {  
       ua = false;  
     }  
    }  
   return ua;  
   }  
	
	
//login Ajax
	var frm = "";
	var sFile = "";
	var file = "";
    function sendRequest(frm, sFile, file) {  

    var rnd982g = Math.random();  
    var str = "";  
    var show = document.getElementById(sFile);

    if(str = getForm(frm) ) {  
	
     req.open('POST', file, true);
     req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");  
     req.setRequestHeader("Content-length", str.length);
     req.setRequestHeader("Connection", "close");
      
     req.onreadystatechange = function() {
  if (req.readyState == 4 && req.status == 200) {
   show.innerHTML = req.responseText;
   return false; 
  }else{
   if (req.readyState == 4 && req.status == 404) {
    show.innerHTML = "Page Not Found";
    return false; 
   }else{
    show.innerHTML = "<img src=\"/img/ajax-loader.gif\"><br>Loading ...";
    return false; 
   }
  }
 }
     req.send(str+'&ajaxPost='+rnd982g);
    req.close; 
    }  
    return false;  
   }

[pythondev]

Arkham's Razor: The simplest explanation is the best.

after doing all that stuff I found that the whole thing didn't work with session variables(server side)
so I had to rethink again and went back to my original code...

here are the changes i made to my original code...

$(document).ready(function()
{
$('#loginf').ajaxForm({
            beforeSubmit: function () { $('#getLog').html('<img src="/img/ajax-loader.gif">');},
            target: '#getLog',
            success:       function () {  
            var response = showResponse;
            if (response != undefined){
            	$('#getLog').html(showResponse).fadeIn("slow");

            	} 
            }
        });

});

php changes:

$s_doLogin = $this->loginDisp();

        if (isset($_POST['ajaxCall']) && $_POST['ajaxCall'] == '1'){
        echo $s_doLogin;
        die;
        }

public function loginDisp(){
        if ($this->obj_protect->showPage){
        $curUser=$this->obj_protect->getUser();
        $s_doLogin = "<span id=\"userLog\">Welcome<br>".$curUser."</span><br><br>\r\n";
        $s_register = $this->obj_language->get("language/ucPanel");
        $s_doLogin .= "<a href=\"/cp/\">".$s_register."</a><br>\r\n";
        
        if ($this->obj_protect->checkAdmin() == "1"){
        $s_doLogin .= "<a href=\"/adm/\">Admin</a><br>\r\n";
        }
        $s_doLogin .= $this->obj_layouts->doLogout();
        
        } else {
        
        $s_register = $this->obj_language->get("language/register");
        $s_user = $this->obj_language->get("language/login/username");
        $s_pass = $this->obj_language->get("language/login/pass");
        $s_remMe = $this->obj_language->get("language/logRem");

        $s_doLogin = $this->obj_layouts->doLogin($s_user, $s_pass, $s_remMe);
        $curUser=$this->obj_protect->checkLogin();
        $s_errMsg = $this->obj_language->get("language/userPass");
        $s_curUser= str_replace("{userPass}", $s_errMsg ,$curUser);
        $s_doLogin .= $s_curUser;
        $s_doLogin .= "<br><a href=\"/index.php?p=register\">$s_register</a>";
        

        
        }
        return $s_doLogin;
} 

and the forms (this is the important part)

public function doLogin($s_user, $s_pass, $s_remember="Remember"){
    $getURI = $_SERVER['REQUEST_URI'];

    $s_return = "<label>".$s_user."
        <input type=\"text\" name=\"username\" id=\"username\" title=\"required\" size=\"16\" />
      </label>
      <br />
              <label>".$s_pass."
          <input type=\"password\" name=\"password\" id=\"password\" title=\"required\" size=\"16\"/>
        </label>
        <input type=\"hidden\"  id=\"action\" name=\"action\" value=\"login\" />
        <input type=\"hidden\" id=\"ajaxCall\" name=\"ajaxCall\" value=\"1\" />
        <input name=\"login\" type=\"submit\" id=\"login\" value=\"Login\"/><br>
    ".$s_remember."<input type=\"checkbox\" id=\"userRemember\" name=\"userRemember\" value=\"yes\">
       ";
    return $s_return;
    }

    public function doLogout(){
    $getURI = $_SERVER['REQUEST_URI'];
    $s_return = "<input type=\"hidden\" id=\"ajaxCall\" name=\"ajaxCall\" value=\"1\" />
        <input type=\"hidden\" id=\"action\" name=\"action\" value=\"logout\" />
        <input name=\"logout\" type=\"submit\" id=\"logout\" value=\"Log Out\" /><br>
      ";
    return $s_return;
    } 

You will notice I removed the form line!!!
HTML now looks like this.....

  <table width="140" align="left" border="0" cellspacing="0" cellpadding="0" id="sidebar1">
  <tr>
    <td align="center" height="150">
<form id="loginf" method="post" action="index.php">
<div id="getLog">{LOGIN}</div></form>
      </td>
  </tr>
  <tr>
    <td align="center" valign="top">{SIDEBAR}</td>
  </tr>
</table>

I placed the form tag OUTSIDE of the "getLog" division....

Now all works perfect and less effort then the original re-write...:facesjump

[misson]

Much nicer and cleaner.