Ajax Login ajaxForm() issues

P

pythondev

New Member
Messages
59
Reaction score
0
Points
0
I will paste a bt of code to show how things are working first then explain the problem...
Javascript (jQuery):
Code: 
$(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
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:
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?
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
pythondev said:
Code: 
$(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.
Click to expand...
When the page loads, #logOut doesn't exist, so the call to $('#logOut').ajaxForm() fails.

pythondev said:
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."\" >
Click to expand...
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:
    PHP: 
        $s_return = '<form id="loginf" method="post" action="' . $getURI . '" >
...';
  • Double quote the PHP string, single quote the attributes, rely on interpolation:
    PHP: 
        $s_return = "<form id='loginf' method='post' action='$getURI' >
...
  • (my recommendation for this case) use heredoc strings:
    PHP: 
        $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.
 
P

pythondev

New Member
Messages
59
Reaction score
0
Points
0
misson said:
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:
    PHP: 
        $s_return = '<form id="loginf" method="post" action="' . $getURI . '" >
...';
  • Double quote the PHP string, single quote the attributes, rely on interpolation:
    PHP: 
        $s_return = "<form id='loginf' method='post' action='$getURI' >
...
  • (my recommendation for this case) use heredoc strings:
    PHP: 
        $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.
Click to expand...

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

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
pythondev said:
After some playing around, I found, my php looks nice, doesn't change it's effect..
Click to expand...
The string format was a matter of readability.

pythondev said:
but does nothing to deal with the AJAX issue. any advice on that ?
Click to expand...
Did you work on the problem with #logOut not existing when the argument to $(document).ready(...) is invoked?


misson said:
When the page loads, #logOut doesn't exist, so the call to $('#logOut').ajaxForm() fails.
Click to expand...
 
P

pythondev

New Member
Messages
59
Reaction score
0
Points
0
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:
Code: 
<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
Code: 
$(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:
Code: 
<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...
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
misson said:
When the page loads, #logOut doesn't exist, so the call to $('#logOut').ajaxForm() fails.
Click to expand...



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

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

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
pythondev said:
although your post not that informative, it did give me a few idea's...
Click to expand...
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.

descalzo said:
In jQuery, $(document).ready() is called after the page is loaded, so that is not an issue.
Click to expand...
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.
 
P

pythondev

New Member
Messages
59
Reaction score
0
Points
0
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)
Code: 
// 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;  
   }
 
P

pythondev

New Member
Messages
59
Reaction score
0
Points
0
Arkham's Razor: The simplest explanation is the best.
Click to expand...

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

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:
PHP: 
$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)
PHP: 
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.....
Code: 
  <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
 
Last edited:
You must log in or register to reply here.
Top