AJAX loading image in login page

espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
I've been working on having a loading gif when someone clicks on the login button but something always goes wrong even when I follow online tutorials. I was wondering if somebody could just show be the most basic html form with the corresponding ajax; I don't even really need the php file. I have some files I'm working on but... well let's just say it'd be a mess if I tried to upload it. Thanks!
 
Gouri

Gouri

Community Paragon
Community Support
Messages
4,565
Reaction score
245
Points
63
Hi espfutbol98,

It may be small one. So can you post the code and test page link to check. So that we can say where you are doing the little mistake.
 
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
Alright, here is what I have so far...
PHP: 
<?php
include "include.php";
include "conn.inc.php";
if ($_SERVER['HTTPS'] != "on") {
    $url = "https://". $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
    header("Location: $url");
    exit;
}
?>
<!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" xml:lang="hr-HR" lang="hr-HR"> 
<head> 
<style type="text/css"> 
	@import url("https://podaci.co.uk/design/style/core.css");
	@import url("https://podaci.co.uk/design/style/site.css");
	@import url("https://podaci.co.uk/design/style/classes.css);
</style> 
<style type="text/css" media="print"> 
	@import url("https://podaci.co.uk/design/style/print.css");
</style> 
<!--[if lt IE 6.0]>
<style>
div#maincontent-design { width: 100%; } /* This is needed to avoid width bug in IE 5.5 */
</style>
<![endif]--> 
<!--[if IE 7]>
<style>
@import url("https://podaci.co.uk/design/style/ie7fix.css");
</style>
<![endif]-->                
    <title><?php echo $t_login; ?>  | Podaci.Co.Uk</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-language" content="hr-HR" />
<link rel="Shortcut icon" href="https://podaci.co.uk/design/style/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="https://podaci.co.uk/design/style/prototype.js"></script>
<script type="text/javascript" src="https://podaci.co.uk/design/style/jquery.js"></script>
<script type="text/javascript">
//  $("load_Page").click(function(){
  function load (form) {
  $("allcontent").empty().html('<img src="https://podaci.co.uk/design/style/loading.gif" />');
  var username = form.username.value;
  var password = form.password.value;
var myAjax = new Ajax.Request('bypass_login.php?username='+username'&password='+password',{
  method: 'post',
  onComplete:handlerFunction
  });
  //$("allcontent").load("https://podaci.co.uk/naslovnica");
</script>
</head>
<body>
<div id="allcontent" class="sidemenu  current_node_id_0">
<div id="allheader">
	<div id="alltopmenu" class="float-break">
		<div id="alltopmenu-design">
			<div id="topmenu2">
				<ul class="inline-menu">
					<!--<li class="first"><a href="mapa_weba">Mapa Weba</a></li>
						<li class="last"><a href="english">English</a></li>-->
				</ul>
			<div class="break"></div>
			</div>
			<div id="topmenu1">
				<ul class="inline-menu">
					<li class="first"></li>
				</ul>
			<div class="break"></div>
			</div>
		</div>
	</div>
	<div id="allheader-design">
		<div id="topcontent">
			<div id="header">
				<div id="header-design">
					<div id="header-logo">
						<h1><a href="https://podaci.co.uk/">Podaci.Co.Uk</a></h1>
						<div class="print"><img src="https://podaci.co.uk/design/style/print_logo.gif" width="203" alt="logo" /></div>
					</div>
				 <div id="header-info-userbox">                           
						<div class="header-userbox logout">
							<ul>
								<li><a class="gumb" href="https://podaci.co.uk/login"><?php echo $t_login; ?></a>
								<p class="regse">
								<span><?php echo $t_registeras; ?>:</span><a href="https://podaci.co.uk/register" class="vise_2"><?php echo $t_user; ?></a> <a href="https://podaci.co.uk/guest" class="vise_2"><?php echo $t_guest; ?></a></p>
								</li>
							</ul>
						</div>
				</div>
			<div id="header-search">
				<h3><?php echo $t_SEARCH; ?></h3>
				<!--p>Upute!</p-->
				<form action="http://www.google.hr/search" name="f">
				     <input id="st1" class="inputtext" type="text" size="10" name="q" value="" />
				     <input type="submit" class="button" value="<?php echo $t_Search; ?>" />
				<!--<div class="optionblock float-break">
					<div>
						<input checked="checked" value="1" name="index" id="index1" class="radiobutton" type="radio" />
						<label for="index1"> Vlada RH</label>
					</div>
					<div>
						<input value="2" name="index" id="index2" class="radiobutton" type="radio" />
						<label for="index2"> Ministarstva</label>
					</div>
					<div>
						<input value="3" name="index" id="index3" class="radiobutton" type="radio" title="Tijela Državne Uprave"/>
						<label for="index3" title="Tijela Državne Uprave"> TDU</label>
					</div>
				</div>
				-->
				     <p class="napredno"><a class="vise_2" href="http://www.google.hr/advanced_search?hl=hr"><?php echo $t_advancedsearch; ?></a></p>
				</form>			
			</div>
		</div>
	</div>
	     <div class="break"></div>
	</div>
	<hr class="hide" />
		<div id="topmenu">
			<div id="topmenu-design">
				<h3 class="hide">Glavni izbornik</h3>
					<ul>
						<li ><div class="spacing"><a href="https://podaci.co.uk/naslovnica"><?php echo $t_home; ?></a></div></li>
						<li ><div class="spacing"><a href="https://podaci.co.uk/fotogalerije"><?php echo $t_photos; ?></a></div></li>
						<li ><div class="spacing"><a href="https://podaci.co.uk/glazba"><?php echo $t_music; ?></a></div></li>
						<li ><div class="spacing"><a href="https://podaci.co.uk/jezik"><?php echo $t_languagematerials; ?></a></div></li>
						<li ><div class="spacing"><a href="https://podaci.co.uk/preuzimanja"><?php echo $t_downloads; ?></a></div></li>
						<li ><div class="spacing"><a href="https://podaci.co.uk/kutak_za_korisnike"><?php echo $t_userarea; ?></a></div></li>
						<li class="last "><div class="spacing"><a href="https://podaci.co.uk/linkovi"><?php echo $t_links; ?></a></div></li>
					</ul>
				<div class="break">
				</div>
			</div>
		</div>
	</div>
	</div>
	<div id="columns">
		<hr class="hide" />
		<div id="path">
			<div id="path-design">
			</div>
		</div>
		<hr class="hide" />
			<div id="korisnicke_postavke" class="float-break">
			</div>
			<div id="rightmenu" class="nopad">
				<div id="rightmenu-design">												
				<h3 class="hide">Right menu</h3>
					<div id="toolbar-right">
						<div class="toolbar-design">
							<div class="toolbar-item first">
								<div class="toolbox">
									<div class="toolbox-design">
										<div class="embed-object-container htmlbox">
											<div id="helpbox" class="box btm-margin normal">
												<div class="in"> 
													<div class="body float-break">
														<div class="in2">
															<div class="floater">
<?php echo $t_loginwhyregister; ?>
		</div>
	</div>
</div><div class="toolbar-item last">
	<div class="toolbox">
		<div class="toolbox-design">
			<div class="embed-object-container htmlbox">
				<div class="box btm-margin istaknuto">
<div class="in">
<div class="body float-break">
<div class="in2">
<div class="floater">
<?php echo $t_loginpublicrelationsoffice; ?>
<div class="kontakt">
<div class="col2_1 float-break">
<div class="left">
<ul class="clean">
<li><span class="plavo_bold">T:</span> +385 (0) 1 45 69 239</li>
<li><span class="plavo_bold">F:</span> +385 (0) 1 45 69 022</li>
</ul>
</div>
<div class="right">
<ul class="clean">
<li class="right"><strong>TRG SV.MARKA 2,</strong></li>
<li class="right"><strong>10 000 ZAGREB</strong></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>			
</div>
		</div>
	</div>
</div>	
					</div>
				</div>
			</div>
			</div>
		<hr class="hide" />
		<div id="maincontent" class="sidemenu float-break">
			<div id="fix">
				<div id="maincontent-design">
					<!--<form method="post" action="login">-->
					<form>
<div class="message-warning float-break">
<?php echo $t_loginfailmessage; ?>
</div>
<input type="hidden" name="redirect" value="<?php echo $_GET['redirect']; ?>" />
<!--<input type="hidden" name="idcheck" value="<?php /*echo $idcheck;*/ ?>" />-->
<div class="login float-break">
	<div class="prijava">
		<h1><?php echo $t_login; ?></h1>
		<p class="napomena"><?php echo $t_loginnapomena; ?></p>
		<div class="block">
		<!-- <label for="id1">Korisnicko ime<i>(e-mail adresa)</i></label> -->
			<label for="id1"><?php echo $t_username; ?></label>
			<div class="labelbreak"></div>
			<input class="inputtext" type="text" size="10" name="username" id="username" value="" tabindex="1" />
			<div class="break"></div>
		</div>
		<div class="block">
			<label for="id2"><?php echo $t_Password; ?></label>
			<div class="labelbreak"></div>
			<input class="inputtext" type="password" size="10" name="password" id="password" value="" tabindex="1" />
			<div class="break"></div>
		</div>
		<div class="prijava-bottom">
			<div class="buttonblock">
				<input class="button" type="button" name="button" onClick="load(this.form)" value="Prijava" tabindex="1" />	
			</div>
			<div class="forgotpassword">
				<p><?php echo $t_loginforgotpass; ?></p>
			</div>
		</div>
					</div>
	<div class="registracija">
		<?php echo $t_loginregistrationdiv; ?>
	</div>
</div>
</form>
				</div>
				<div class="break"></div>
			</div>
		</div>
		<div class="break"></div>
	</div>
     <div class="break"></div>
</div><div id="footer">
	<div id="footer-design">
	<div class="head">
		<div class="d1">
			<div class="in"><a href="#allcontent" class="top"><?php echo $t_topofpage;?></a></div>
		</div>
		</div>
	</div>
	<div class="body">
		<div class="body-in float-break">
	<div class="footer float-break">
	<p style="text-align: center;">Copyright &copy; 2009  Podaci Inc.</p>
	</div>
	</div>
	</div>
	<p style="text-align: center;"><a href="https://podaci.co.uk/hr">Hrvatski</a>&nbsp;|&nbsp;<a href="https://podaci.co.uk/en">English</a><!--&nbsp;|&nbsp;<a href="https://podaci.selfip.net/ko">한국어</a>--></p>
</div>
</body>
</html>
(All of the $t_ are just variables from language files.)
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
To show the basic idea (using the Dojo toolkit)

Code: 
<?php

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

 sleep( 2 );

 echo "message recieved" ;

 exit() ;

}


?>
<!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>
    	<title>Spinner</title> 

       <!-- load the dojo stylesheet FROM AOL -->
<link rel="stylesheet" type="text/css"  href="http://o.aolcdn.com/dojo/1.3.2/dojo/resources/dojo.css" />

       <!-- load the DOJO LIBRARY FROM AOL  -->
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js"  > </script> 

<script type="text/javascript">


  function ajax(){
    
    dojo.xhrPost({
      url: 'spin.php',
      handleAs: 'text',
      timeout: 15000,
      content: { 'submission':'true' } ,
  
      load: function(response, args){
               // THIS OVERWRITES THE SPINNER GIF HTML, IE 'MAKES IT DISAPPEAR'
               // YOU DO THIS ON SUCCESS OR FAILURE
               dojo.byId("results").innerHTML = response ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId("results").innerHTML = "Error: The description is:  " + response.description ;
        return response; } 
      } );
  }

    function checkSubmit(){
         // MAKE SURE FORM IS FILLED OUT PROPERLY, ETC

         // DISPLAY THE SPINNER -- you do this just before you send the Ajax request
         dojo.byId("results").innerHTML = '<div class="centered"><img src="spinner.gif"></div>' ;

         // SEND THE FORM VIA AJAX
         ajax();
         return false;
    }


</script>

 </head>
 <body >
 


  <h3>Spinner Demo</h3>

  <form action="" method="POST" name="form01" id="form01" onSubmit="return checkSubmit();"    >


  Login Name: <input type="text" name="login_name" id="login_name"  ></input>

  <br />
  <input type='submit' id="submit_button" value="Submit" />
  <br />

</form>

<div id="results"></div>



<!-- PRELOAD THE SPINNER GIF -->
<span style="visibility:hidden;"  >
<img src="spinner.gif" height='16' width='16' >
</span>
</body>
</html>
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
espfutbol98 said:
HTML: 
    @import url("https://podaci.co.uk/design/style/classes.css);
Click to expand...
Missing a closing double-quote.

espfutbol98 said:
HTML: 
<script type="text/javascript" src="https://podaci.co.uk/design/style/prototype.js"></script>
<script type="text/javascript" src="https://podaci.co.uk/design/style/jquery.js"></script>
Click to expand...
Scripts shouldn't be in the style directory; they should be in a "scripts" or "js" directory. Also, why are you using both Prototype and jQuery? They do the same thing, more or less. Use one or the other.

espfutbol98 said:
Code: 
var myAjax = new Ajax.Request('bypass_login.php?username='+username'&password='+password',{
Click to expand...
Two syntax problems here: missing '+' operator and extra single quote. Should be:

PHP: 
var myAjax = new Ajax.Request('bypass_login.php?username='+username+'&password='+password,{

A colorizing editor can help find missing quotes. Your browser's error console can also help; Firefox's in particular will list JS and CSS errors and warnings.

espfutbol98 said:
PHP: 
  onComplete:handlerFunction
Click to expand...
handlerFunction isn't defined anywhere.

Many of the elements don't have close-tags. Try putting comments of the form <!-- #id --> or <!-- .classes --> (or any CSS selector to help identify the element) before close tags so you can keep track. Do it before the tag rather than after so the comment is a part of the element, rather than the next element. W3C's validator can help suss out HTML errors. See also "Coding Clean and Semantic Templates" for a few other tips.
 
Last edited:
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
Okay I got the example working and I fixed the errors in the css but I tried to get it to pass variables and it doesn't seem to work:
PHP: 
<?php
if(isset($_POST['username'])) {
 sleep( 2 );
 echo $_POST['username'];
 exit();
}
?>
<!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>
    	<title>Spinner</title> 
       <!-- load the dojo stylesheet FROM AOL -->
<link rel="stylesheet" type="text/css"  href="http://o.aolcdn.com/dojo/1.3.2/dojo/resources/dojo.css" />
       <!-- load the DOJO LIBRARY FROM AOL  -->
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js"></script> 
<script type="text/javascript">
var username = dojo.byId("login_name");
//var username = document.getElementById('login_name');
  function ajax(){
    
    dojo.xhrPost({
      url: 'spinner2.php',
      handleAs: 'text',
      timeout: 15000,
      content: { 'username': username } ,
  
      load: function(response, args){
               // THIS OVERWRITES THE SPINNER GIF HTML, IE 'MAKES IT DISAPPEAR'
               // YOU DO THIS ON SUCCESS OR FAILURE
               dojo.byId("results").innerHTML = response ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId("results").innerHTML = "Error: The description is:  " + response.description ;
        return response; } 
      } );
  }

    function checkSubmit(){
         // MAKE SURE FORM IS FILLED OUT PROPERLY, ETC

         // DISPLAY THE SPINNER -- you do this just before you send the Ajax request
         dojo.byId("results").innerHTML = '<div class="centered"><img src="https://podaci.co.uk/design/style/loading.gif"></div>' ;

         // SEND THE FORM VIA AJAX
         ajax();
         return false;
    }
</script>
 </head>
 <body >
  <h3>Spinner Demo</h3>
  <form action="" method="POST" name="form01" id="form01" onSubmit="return checkSubmit();">
  Login Name: <input type="text" name="login_name" id="login_name" />
  <br />
  <input type='submit' id="submit_button" value="Submit" />
  <br />
</form>
<div id="results"></div>
<!-- PRELOAD THE SPINNER GIF -->
<span style="visibility:hidden;"  >
<img src="https://podaci.co.uk/design/style/loading.gif" height='16' width='16' >
</span>
</body>
</html>
I've tried a number of thinks but it either outputs the page again, 0, null, NaN, or undefined. I'm terrible with javascript so why it the value not being passed?
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
espfutbol98 said:
PHP: 
<script type="text/javascript">
var username = dojo.byId("login_name");
...
  Login Name: <input type="text" name="login_name" id="login_name" />
Click to expand...
You're setting username before the #login_name element is defined. Remember, scripts are executed when the node is processed, not after the document loads. To set username, either do it in a <script> node placed after #login_name is defined or in a document load handler, using (e.g.) dojo.addOnLoad (note: if possible, hook the equivalent of the DOMContentLoaded event rather than the load event).

Better yet, don't use a global variable (they're almost always the wrong thing to do). Get a reference to #login_name within ajax() or checkSubmit. I suggest the latter, as getting the username is a form-manipulation task, and checkSubmit is a form-manipulation function, whereas ajax() is a network-communication function. Separation of concerns is the key phrase.

espfutbol98 said:
PHP: 
               dojo.byId("results").innerHTML = response ;
Click to expand...
response isn't HTML embedded in a string, and (I don't believe) is castable as such. I'm not certain what property of response will give you what you want (perhaps response.responseText), but a good JS debugger (FireBug, Safari's built-in inspector) can reveal this information.
 
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
To get the value of a text box, you have ask for the value:

Code: 
    var username = dojo.byId( "login_name" ).value ;

response isn't HTML embedded in a string, and (I don't believe) is castable as such. I'm not certain what property of response will give you what you want (perhaps response.responseText)
Click to expand...

response is text since you asked for it:

Code: 
handleAs: 'text',

Code: 
<?php

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

 sleep( 2 );

 if( isset( $_POST[ 'username' ] ) && trim( $_POST['username']) != '' ){
    echo 'submitted username is ' . trim( $_POST[ 'username' ] ) ;
 } else {
    echo 'no/blank username submitted' ;
 }

 exit() ;

}


?>
...


<script type="text/javascript">


  function ajax(){

    var username = dojo.byId( "login_name" ).value ;
    
    
    dojo.xhrPost({
      url: 'spin.php',
      handleAs: 'text',
      timeout: 15000,
      content: { 'submission':'true' , 'username': username } ,
  
      load: function(response, args){
               // THIS OVERWRITES THE SPINNER GIF HTML
               dojo.byId("results").innerHTML = response ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId("results").innerHTML = "Error: The description is:  " + response.description ;
        return response; } 
      } );
  }
 
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
Okay I moved the username variable but I've been looking online for documentation of response but I can't find anything. Here is what I have so far but it doesn't return anything.
PHP: 
<?php
if(isset($_POST['username'])) {
 sleep( 2 );
 echo $_POST['username'];
 exit();
}
?>
HTML: 
<!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>
    	<title>Spinner</title> 
       <!-- load the dojo stylesheet FROM AOL -->
<link rel="stylesheet" type="text/css"  href="http://o.aolcdn.com/dojo/1.3.2/dojo/resources/dojo.css" />
       <!-- load the DOJO LIBRARY FROM AOL  -->
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js"></script> 
<script type="text/javascript">
//var username = document.getElementById('login_name');
//var username = document.form.login_name.value;
  function ajax(){
    dojo.xhrPost({
      url: 'spinner2.php',
      handleAs: 'text',
      timeout: 15000,
      content: { 'username': username } ,
  
      load: function(response, args){
               // THIS OVERWRITES THE SPINNER GIF HTML, IE 'MAKES IT DISAPPEAR'
               // YOU DO THIS ON SUCCESS OR FAILURE
               dojo.byId("results").innerHTML = response.responseText ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId("results").innerHTML = "Error: The description is:  " + response.description ;
        return response; } 
      } );
  }
    function checkSubmit(){
    var username = dojo.byId("login_name");
         // MAKE SURE FORM IS FILLED OUT PROPERLY, ETC
         // DISPLAY THE SPINNER -- you do this just before you send the Ajax request
         dojo.byId("results").innerHTML = '<div class="centered"><img src="https://podaci.co.uk/design/style/loading.gif"></div>' ;
         // SEND THE FORM VIA AJAX
         ajax();
         return false;
    }
</script>
 </head>
 <body >
  <h3>Spinner Demo</h3>
  <form action="" method="POST" name="form01" id="form01" onSubmit="return checkSubmit();">
  Login Name: <input type="text" name="login_name" id="login_name" />
  <br />
  <input type='submit' id="submit_button" value="Submit" />
  <br />
</form>
<div id="results"></div>
<!-- PRELOAD THE SPINNER GIF -->
<span style="visibility:hidden;"  >
<img src="https://podaci.co.uk/design/style/loading.gif" height='16' width='16' >
</span>
</body>
</html>
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
espfutbol98 said:
Code: 
    function ajax(){
        dojo.xhrPost({
            url: 'spinner2.php',
            handleAs: 'text',
            timeout: 15000,
            content: { 'username': username } ,
            ...
        } );
    }
    function checkSubmit(){
        var username = dojo.byId("login_name");
        // MAKE SURE FORM IS FILLED OUT PROPERLY, ETC
        // DISPLAY THE SPINNER -- you do this just before you send the Ajax request
        dojo.byId("results").innerHTML = '<div class="centered"><img src="https://podaci.co.uk/design/style/loading.gif"></div>' ;
        // SEND THE FORM VIA AJAX
        ajax();
Click to expand...
Remember that all variables in JS have a scope: global or function. You need to pass the username to the ajax function.

Code: 
    function ajax(content){
      dojo.xhrPost({
            url: 'spinner2.php',
            handleAs: 'text',
            timeout: 15000,
            content: content,
            ...
        } );
    }
    function checkSubmit(){
        var username = dojo.byId("login_name").value;
        ajax({username: username});

Don't neglect Descalzo's note to use the value property of #login_name. Property names in object literals don't use quotes (not "a=1; {'a': a}" but "a=1; {a: a}").
 
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
YES! it works. Thanks everybody, here's the code becuause I'm sure this well be helpful to others:
PHP: 
<?php
if( isset( $_POST[ 'submission' ] ) ){
 sleep( 2 );
 if( isset( $_POST[ 'username' ] ) && trim( $_POST['username']) != '' ){
    echo 'submitted username is ' . trim( $_POST[ 'username' ] ) ;
 } else {
    echo 'no/blank username submitted' ;
 }
 exit() ;
}
?>
HTML: 
<!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>
    	<title>Spinner</title> 
<link rel="stylesheet" type="text/css"  href="http://o.aolcdn.com/dojo/1.3.2/dojo/resources/dojo.css" />
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js"></script> 
<script type="text/javascript">
    function ajax(){
    var username = dojo.byId( "login_name" ).value;
    dojo.xhrPost({
      url: 'spinner2.php',
      handleAs: 'text',
      timeout: 15000,
      content: { 'submission':'true' , 'username': username } ,
      load: function(response, args){
               // THIS OVERWRITES THE SPINNER GIF HTML
               dojo.byId("results").innerHTML = response ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId("results").innerHTML = "Error: The description is:  " + response.description ;
        return response; } 
      } );
  }
    function checkSubmit(){
         // MAKE SURE FORM IS FILLED OUT PROPERLY, ETC
         // DISPLAY THE SPINNER -- you do this just before you send the Ajax request
         dojo.byId("results").innerHTML = '<div class="centered"><img src="https://podaci.co.uk/design/style/loading.gif"></div>' ;
         // SEND THE FORM VIA AJAX
         ajax();
         return false;
    }
</script>
 </head>
 <body >
  <h3>Spinner Demo</h3>
  <form action="" method="POST" name="form01" id="form01" onSubmit="return checkSubmit();">
  Login Name: <input type="text" name="login_name" id="login_name" />
  <br />
  <input type='submit' id="submit_button" value="Submit" />
  <br />
</form>
<div id="results"></div>
<!-- PRELOAD THE SPINNER GIF -->
<span style="visibility:hidden;"  >
<img src="https://podaci.co.uk/design/style/loading.gif" height='16' width='16' >
</span>
</body>
</html>
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Setting username in ajax() is fine for learning code, but let me reiterate: keep separate concerns separate (i.e. separate functionality into non-overlapping components). Network communication (as you do in ajax()) is separate from working with a form (checkSubmit() and getting the username from the form).
 
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
Yet again, I have one last problem: even though I got the sample script working, when I try to implement it nothing happens. I think the code is too long to post so its at https://podaci.co.uk/loading_test. The serverside script is basically what was in the sample. I'm trying to get the script to send post data to the login page and if a successful login, create sessions and redirect.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
espfutbol98 said:
I think the code is too long to post so its at https://podaci.co.uk/loading_test.
Click to expand...
Then post an equivalent minimal test case, which will also help you narrow down the source of the problem. The relevant JS is:
Code: 
function ajax(){
    var username = dojo.byId("username").value;
    var password = dojo.byId("password").value;
    dojo.xhrPost({
      url: 'bypass_login.php',
      handleAs: 'text',
      timeout: 15000,
      content: { 'submission':'true' , 'username': username , 'password': password , 'idcheck':'e4da3b7fbbce2345d7772b0674a318d5' , 'redirect':'6e61736c6f766e696361' } ,
      load: function(response, args){
               dojo.byId("results").innerHTML = response ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId("results").innerHTML = "Error: The description is:  " + response.description ;
        return response; } 
      } );
  }
function checkSubmit(){
    dojo.byId("results").innerHTML = '<div style="text-align: center; margin-top: 20%;"><img src="https://podaci.co.uk/design/style/loading.gif"></div>' ;
    ajax();
    return false;
}
Notice you replace the contents of #results (which includes the login form), then get the value of #username and #password, which no longer exist. For the third time, GET VALUES FROM THE FORM IN checkSubmit(), AND PASS THESE VALUES TO ajax(). DON"T TOUCH THE FORM IN ajax(). If you follow proper design principles (such as separation of concerns), you won't have these problems.
 
Last edited:
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
Alright, I moved the variable references around but it's still not passing the values, I think it must be something with the html because I didn't change the JavaScript any from the working sample. Oh, and let me reiterate, I don't know anything about JavaScript.
Code: 
    function ajax(){
    dojo.xhrPost({
      url: 'bypass_login.php',
      handleAs: 'text',
      timeout: 15000,
      content: { 'submission':'true' , 'username': username , 'password': password , 'idcheck':'e4da3b7fbbce2345d7772b0674a318d5' , 'redirect':'6e61736c6f766e696361' } ,
      load: function(response, args){
               dojo.byId("results").innerHTML = response ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId("results").innerHTML = "Error: The description is:  " + response.description ;
        return response; } 
      } );
  }
    function checkSubmit(){
    var username = dojo.byId("username").value;
    var password = dojo.byId("password").value;
         dojo.byId("results").innerHTML = '<div style="text-align: center; margin-top: 20%;"><img src="https://podaci.co.uk/design/style/loading.gif"></div>' ;
         ajax();
         return false;
    }
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
You don't need to know about JS, you need to know about programming. Read up on scoping (which exists in basically every language since the '70s). Variables defined in one function are not visible in another; you must pass them as arguments. Something like:
PHP: 
function ajax(username, value){
    dojo.xhrPost({
      url: 'bypass_login.php',
      handleAs: 'text',
      timeout: 15000,
      // 
      content: { submission:'true' , username: username , password: password , idcheck:'e4da3b7fbbce2345d7772b0674a318d5' , redirect:'6e61736c6f766e696361' } ,
      load: function(response, args){
               dojo.byId("results").innerHTML = response ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId("results").innerHTML = "Error: The description is:  " + response.description ;
        return response; } 
    } );
}
function checkSubmit(){
    var username = dojo.byId("username").value;
    var password = dojo.byId("password").value;
    dojo.byId("results").innerHTML = '<div style="text-align: center; margin-top: 20%;"><img src="https://podaci.co.uk/design/style/loading.gif"></div>' ;
    ajax(username, password);
    return false;
}

To clarify: the caps in the previous post didn't indicate anger, they indicated exasperation. We've been going over the same problems, including this post.
 
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
misson said:
PHP: 
function ajax(username, value){
    dojo.xhrPost({
      url: 'bypass_login.php',
      handleAs: 'text',
      timeout: 15000,
      // 
      content: { submission:'true' , username: username , password: password , idcheck:'e4da3b7fbbce2345d7772b0674a318d5' , redirect:'6e61736c6f766e696361' } ,
      load: function(response, args){
               dojo.byId(&quot;results&quot;).innerHTML = response ;
               return response;  } ,         
      error: function(response, args){
        dojo.byId(&quot;results&quot;).innerHTML = &quot;Error: The description is:  &quot; + response.description ;
        return response; } 
    } );
}
function checkSubmit(){
    var username = dojo.byId(&quot;username&quot;).value;
    var password = dojo.byId(&quot;password&quot;).value;
    dojo.byId(&quot;results&quot;).innerHTML = '<div style=&quot;text-align: center; margin-top: 20%;&quot;><img src=&quot;https://podaci.co.uk/design/style/loading.gif&quot;></div>' ;
    ajax(username, password);
    return false;
}
Click to expand...
This worked perfectly (by switching value with password) Now the ajax passes all of the variables and the script creates the sessions but it does not appear to reflect the header(&quot;Location:&quot;);. Basically, you login but still stay at the login page. Any ideas?
 
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
bypass_login.php, I assume, checkes the username and password against a database/list.

If they are ok, it sets a session value like LOGGED_IN to true.

What you do:

Have it send the text "OK" back to the page if user successfully logged in.
Have it send your error message (like "Username password combination not on file") if they did not.

You have the 'load' callback function test the response. If it is not "OK", just do what it does now, display the error message.
If it is "OK", you want to send the page to the members area (or whatever). You just have to use Javascript to set window.location to the url you want.

The relevant JavaScript code:

Code: 
      load: function(response, args){

               if( response != "OK" ){ 

                    dojo.byId("results").innerHTML = response ;   // display the server saying login failed

              } else {

                   window.location = "inner_sanctum.php";   //  send the user to the members area

              }
               return response;  } ,

The assumption is that inner_sanctum.php will test to see if user is actually logged on.
 
espfutbol98

espfutbol98

New Member
Messages
200
Reaction score
2
Points
0
Okay, now I got it to work perfectly under the name loading_test.php but when I renamed it to login.php to replace my old file it doesn't work. I have the url rewritten to something like https://podaci.co.uk/2f6e61736c6f766e696361/login (depending on the referrer url) with all of the same corresponding $_GET values. When I try to use the login page, it says "Error: The description is: undefined". I have tried to find any refrences to the old name but none exist. Here's the url to the page now:
https://podaci.co.uk/2f6e61736c6f766e696361/login
I know it is something to do with the redirect $_GET value because https://podaci.co.uk/login works fine.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Try Firebug and you'll see what's going wrong. Seriously, Firebug should be your best friend.

The "undefined" in "Error: The description is: undefined" arises because "response" is a string and doesn't have a "description" property. Even if it weren't a string, it probably wouldn't have a "description" property.

The response to the AJAX call is 404. The AJAX call is sent to the URL "bypass_login.php". This is a relative URL, so the resulting absolute URL is (e.g.) https://podaci.co.uk/2f6e61736c6f766e696361/bypass_login.php. Either use an absolute URL ("/bypass_login.php") or rewrite it server-side.
 
You must log in or register to reply here.
Top