Help please - Page Loading Gif - onclick

JavaScript
1

I am wanting to add a page loading Gif to my signup pages so peopel can see something is happening.

I found this post here:

I would like the Gif to show onclick, and finish once the page has loaded.

The CSS:

#loading-image {
	width: 100px;
	height: 100px;
	position: fixed;
	top: 140px;
	right: 80px;
	z-index: 1;	
}

The script from the SitePoint page:

<script language='javascript' type='text/javascript'>
//Before starting ajax request display the div (paste it in  the beginning of your ajax request function
var loadingdiv = document.getElementById('loading-image');
loadingdiv.style.display = "block";

//execute the code below after the ajax request is complete
var loadingdiv = document.getElementById('loading-image');
loadingdiv.style.display = "none";
</script>

I know that this line has a problem, the code is not correct, yet do not know how to correct it.

<!-- Start of PAGE LOADER -->		
	<div id="loading-image">
      <img src="images/ajax-loader.gif" onlick="showloading-image()" alt="pageloadergif" width = "100" height = "100" />
      </div>	
<!-- End of PAGE LOADER -->

here is the code for the Button

<div class="input_row" align="right" style="width:500px; padding-top:20px;">
<input class="cupid-green" type="submit" style="border:none" name="next" value="Next &#65533;"></input>
</div>

or what about this?

<div id="loading-image">
    <input class="input_row" name="next" type="submit" onclick="$(this).showloading-image('<img src=images/ajax-loader.gif />'); console.log(this); $('#myForm').submit();" value="SUBMIT">
    </div>

your help greatly appreciated :slight_smile:

2

I have been trying many code combinations:

can some tell em why this is not working please?

I have this script

<script type="text/javascript">
 $('#cupid-green').click(function(){
      $('#page_loader').show();
      $.ajax({
        ....
       success:function(result){
           $('#page_loader').hide();
       }
 }
</script>

In Bold below is the Next button, what is the Next Button id ? need the Button id for the cript (cupid-green)

<!-- Start of PAGE LOADER -->	
	
    <div id="page_loader">
      <img src="images/ajax-loader.gif" style="display:none" alt="pageloadergif" width = "100" height = "100" />
      </div>
	
<!-- End of PAGE LOADER -->

  <!-- Start of Next Button -->	

          <div class="input_row" align="right" style="width:500px; padding-top:20px;">
           [B] <input type="submit" value="Next »" name="next" class="cupid-green" style="border:none" />[/B]
          </div>
      
          <input type="hidden" name="user_submit" value="0" id="user_submit" />

 <!-- End of Next Button -->	
        </form>
      </div>
3

Hi,

This isn’t really my area but I can see some errors in your code.


$('#cupid-green').click(function(){

You don’t have an ID of cupid-green you have a class so change the js or the html to reflect this.

e.g.


$('.cupid-green').click(function(){

You are hiding and showing #page+loader but yet you have set the image itself to display none so it will never show.


 <div id="page_loader">
      <img src="images/ajax-loader.gif"[B] style="display:none"[/B] alt="pageloadergif" width = "100" height = "100" />
</div>

Move the display:none from the image and onto the div instead.


<div id="page_loader" [B]style="display:none"[/B]> <img src="images/zoom.cur"  alt="pageloadergif" width = "100" height = "100" /> </div>

I think there should be an extra closing bracket at the end here.


 });
</script>

Rough test:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js "></script>
</head>

<body>
<!-- Start of PAGE LOADER -->
<div id="page_loader" style="display:none"> <img src="images/axax-loader.gif"  alt="pageloadergif" width = "100" height = "100" /> </div>
<!-- End of PAGE LOADER --> 

<!-- Start of Next Button -->
<div class="input_row" align="right" style="width:500px; padding-top:20px;">
		<input type="submit" value="Next »" name="next" class="cupid-green" style="border:none" />
</div>
<input type="hidden" name="user_submit" value="0" id="user_submit" />

<!-- End of Next Button -->
</form>
</div>
<script type="text/javascript">
 $('.cupid-green').click(function(){
   $('#page_loader').show();
   
   alert('You should see the image now');		
   
  $('#page_loader').hide();
	
 });
</script>
</body>
</html>

Don’t use old school html like align=“right” as that is deprecated in strict doctypes.


<div class="input_row"[B] align="right"[/B] style="width:500px; padding-top:20px;">

Use CSS instead and also avoid using inline styles as that makes testing awkward. Just add a class and style it as usual.:slight_smile:

4

Hello Paul O’B, great! yes all working perfectly :slight_smile: thank you :slight_smile:

Now how do I remove the alert? so the page can continue to load (showing the loading gif) onto the next page?

I tried many times to get the code correct…but :frowning:

<script type="text/javascript">
 $('#cupid-green').click(function(){
      $('#page_loader').show();
      $.ajax({
        ....
       success:function(result){
           $('#page_loader').hide();
       }
 }
 });
</script>

yes the <div class=“input_row” align=“right” style=“width:500px; padding-top:20px;”> is existing code before I started working with the code.

I will create a CSS for it, help to validate every page :slight_smile:

5

Hi,

Did you mean from the snippet I posted?

You would just remove this line:


 alert('You should see the image now');

I feel though you were meaning something else :slight_smile:

6

Hello Paul O’B, quick reply, thank you :slight_smile:

yes but as soon as I remove the line: alert(‘You should see the image now’);

the loading gif has gone along with the Alert. It stops working :frowning:

<script type="text/javascript">
 $('.cupid-green').click(function(){
   $('#page_loader').show();	
   
  $('#page_loader').hide();
	
 });
</script>

<script type="text/javascript">
 $('.cupid-green').click(function(){
   $('#page_loader').show();	
    complete:function  (){
    $('#page_loader').hide();
	
 });
</script>
7

Hi,

I think we need to see the page concerned and the full js that you are using.

I’m not sure if you are using the snippets that are posted in the correct manor (with all the “blanks” filled in) and not sure how you are making this all happen.

Are you clicking a button then loading some data into the same page via ajax and while this data is loading you want the gif displayed? If so do you have working code for the ajax call etc.?

8

Hello Paul O’B,

I think I was having late night brain fade, all is working well :slight_smile:

many thank yous for your time and patience :slight_smile:

But! if you have a look at this Register page you will see that the Loader.gif will show/start even when the Register info has not been filled in.

http://www.dating-asian-singles.com/signup-stepone

Is there a way to make the Loader.gif show only when the page has been completed ?

your help greatly appreciated.

9

Hi,

How have you handled this in your other pages?

It seems to me you are turning the gif on here:


<script type="text/javascript">
 $('.cupid-green').click(function(){
   $('#page_loader').show();	    
 });
</script>

But I couldn’t trace where you are turning it off. I assumed you would be turning it off at the end of your form submission routine unless it’s a new page that you are loading rather than an ajax call.

If that’s true then you would need to turn the gif off when your js registers an error. You could try adding it here but it may just turn the error off for good.


 function hideAllError(){
			 [B] $('#page_loader').hide();[/B]	 
    document.getElementById('username_error').style.display   = "none";

You may need to say how you are handling these things then it would be a job for one of the JS experts (like @Pullo ; ) to jump in as I am out of my depth here.:slight_smile:

10

Hi there,

It won’t be too hard to sort this out :slight_smile:

Basically, at the moment you are showing the spinner as soon as the button is clicked.

You also have this event handler attached to the form:

onsubmit="return validate();"

What you need to do, is to remove the inline event handler and replace it by something like this:

$("#registrationForm").on("submit", function(){
...
});

FWIW, you’re including jQuery, so we might as well use it to make our lives easier :slight_smile:

Then, within the submit event handler:

$("#registrationForm").on("submit", function(){
  if(validate()){
    // Validation passed, so show the spinner
    $('#page_loader').show();
  } else {
    // Validation failed, so do nothing other than prevent the form's default submit action.
    return false;
  }
});

Just to make things clearer, I made you a little demo.

If you submit the form empty, an error message is displayed.
If you fill in a user name, then submit the form, then the spinner shows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <base href="http://www.dating-asian-singles.com/" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Dating Asian Singles - Free Online Dating - Meet Singles Site</title>
    <link href="css/general.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="contentContainer">
      <div id="wideRightColumn">
        <div class="signupArea">
          <p class="searchBoxTitle">My Details:</p>
          <form name="frm_signup_one" action="signup-stepone.php" method="post" id="registrationForm">
            <div class="input_row">
              <div class="input_column">
                <label for="firstname">Username:</label>
                <div class="rowcontent_full">
                  <input name="username" id="username" value="" size="26" type="text" />
                  <div class="row_error" id="username_error"></div><input type="hidden" name="valid_username" value="0" />
                </div>
              </div>
            </div>

            <div id="page_loader" style="display:none"> <img src="images/ajax-loader2.gif"  alt="pageloadergif" width = "42" height = "42" /> </div>
            <div class="input_row" align="right" style="width:500px; padding-top:20px;">
              <input type="submit" value="Next" name="next" class="cupid-green" style="border:none" />
            </div>
          </form>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
      function validate(){
        if($("#username").val() === ""){
          $("#username_error").text("Please enter a name!").show();
          return false
        } else {
          return true;
        }
      }

      $("#registrationForm").on("submit", function(){
        $("#username_error").text("");

        if(validate()){
          //It's all good, Brother!
          $('#page_loader').show();
        } else {
          return false;
        }

        // This is just so you can see the result.
        return false;
      });
    </script>
  </body>
</html>

Hope that helps.

11

Hello Paul O’B and Pullo,

thank you for your great detailed replies, sorry for my late reply, usually I am emailed when a new post is made, yet no email arrived,

was just checking the page and saw both your replies, so thank you again :slight_smile:

I will try implementing this code, and give you feedback as soon as I can,

best wishes :slight_smile:

12

Hello Paul O’B and Pullo,

today while implementing your code I was looking through the existing code/script, and I found this:

else {
                           hideAllError();
                           document.getElementById('username_error').style.color  = '#ea5c76';
                           document.getElementById('username_error').innerHTML    = username +" is not available.";
                   document.getElementById('username_error').style.display        = "inline";
                           document.forms['frm_signup_one'].valid_username.value  = 0;
                        }
              [B]   }
                 else if(httpUsername.readyState<4){
                     document.getElementById('username_error').innerHTML  = '<img src="images/loading.gif"> please wait...';
                 }[/B]
                }
                var url="ajax/check_username.php?username="+username+"&time="+new Date().getTime();
                httpUsername.open("GET",url);
                httpUsername.send(null);
        } else {
          hideAllError();
          document.forms['frm_signup_one'].username.value         = "";
          document.getElementById('username_error').style.color   = '#ea5c76';

so the loader code is already there…but not working, and ideas why not showing loading gif ?

 }
   else if(httpUsername.readyState<4){
       document.getElementById('username_error').innerHTML  = '<img src="images/loading.gif"> please wait...';
  }

or can I add the code into the code below: $(‘#page_loader’).show();

 }
   else if(httpUsername.readyState<4){
       document.getElementById('username_error').innerHTML  = '<img src="images/loading.gif"> please wait...';
  }

all help greatly appreciated :slight_smile:

13

Thank you Paul, and Pullo who generously gave their time, and code, all is working well now, so this post is closed. Best Wishes :slight_smile:

14

Thanks for taking the time to report back Ray.
Appreciate it!

15

Thank you again Pullo & Paul :slight_smile: best wishes :slight_smile: