AJAX loading image in login page

**espfutbol98** · 12-16-2009 01:55 PM

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** · 12-16-2009 02:16 PM

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** · 12-16-2009 02:31 PM

Alright, here is what I have so far...

PHP Code:


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

**descalzo** · 12-16-2009 03:01 PM

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>

**misson** · 12-16-2009 03:27 PM

Originally Posted by espfutbol98

HTML Code:

    @import url("https://podaci.co.uk/design/style/classes.css);

Missing a closing double-quote.

Originally Posted by espfutbol98

HTML Code:

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

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.

Originally Posted by espfutbol98

Code:

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

Two syntax problems here: missing '+' operator and extra single quote. Should be:

PHP Code:


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.

Originally Posted by espfutbol98

PHP Code:


  onComplete:handlerFunction

handlerFunction isn't defined anywhere.

Many of the elements don't have close-tags. Try putting comments of the form  or  (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.

**espfutbol98** · 12-16-2009 03:48 PM

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 Code:


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

**misson** · 12-16-2009 07:33 PM

Originally Posted by espfutbol98

PHP Code:


<script type="text/javascript">

var username = dojo.byId("login_name");

...

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

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.

Originally Posted by espfutbol98

PHP Code:


               dojo.byId("results").innerHTML = response ;

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** · 12-16-2009 07:55 PM

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)

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** · 12-16-2009 08:01 PM

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 Code:


<?php

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

 sleep( 2 );

 echo $_POST['username'];

 exit();

}

?>

HTML Code:

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

**misson** · 12-16-2009 11:23 PM

Originally Posted by espfutbol98

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();

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}").

Thread: AJAX loading image in login page

LinkBack

Thread Tools

Display

AJAX loading image in login page

Re: AJAX loading image in login page

Re: AJAX loading image in login page

Re: AJAX loading image in login page

Re: AJAX loading image in login page

Re: AJAX loading image in login page

Re: AJAX loading image in login page

Re: AJAX loading image in login page

Re: AJAX loading image in login page

Re: AJAX loading image in login page

Similar Threads

Login page redirection with variables

problems with Login page (PHP, mySQL}

Slow loading of page

Long Page Loading Times Or page not loading at all..

Create login page

Posting Permissions