• 0

[JQuery/Ajax] Show loading gif while AJAX stuff is happening


Question

Hey,

Im struggling with this one, just cant seem to work it out.

How do i display a loading GIF image before the AJAX stuff starts, then hide it when its finished?

I currently have this

Javascript

<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$('document').ready(function() {
	$('#loading').hide();
});
</script>
<script language="javascript" type="text/javascript">
function add_loading()
{
	$('#submit').attr("disabled", true);
	$('#loading').show();
}

function remove_loading()
{
	$('#submit').removeAttr("disabled");
	$('#loading').hide();
}

function check_form()
{
	var name = $('#name').val();
	var email = $('#email').val();
	var id = $('#id').val();
	var valid_name = true;
	var valid_email = true;
	var msg = "You must fill out all the fields in the form. The follow errors occurred:\n";

	if(name.length < 3)
	{
		valid_name = false;
		msg += "     Please enter a valid name.\n";
		$('#name').css("background-color", "#FF5959");
	}
	else
	{
		valid_name = true;
		$('#name').css("background-color", "#66FF33");
	}

	if(email.length < 12 || email.indexOf("@") == -1)
	{
		valid_email = false;
		msg += "     Please enter a valid email address.";
		$('#email').css("background-color", "#FF5959");
	}
	else
	{
		valid_email = true;
		$('#email').css("background-color", "#66FF33");
	}

	if(valid_name == false || valid_email == false)
	{
		alert(msg);
		remove_loading();
		return false;
	}
	else
	{
		$.ajax({
		   type: "POST",
		   url: "stock_email_process.php",
		   data: "name="+name+"&email="+email+"&id="+id,
		   cache:false,
		   async:false,
		   success: function(html){
			 alert( "Data Saved: " + html );
		   }
		 });
		remove_loading();	
	}
	remove_loading();
}
</script>

Part of the form and image

<img src="images/ajax-loader.gif" alt="loading..." id="loading"  /> <input type="button" id="submit" name="submit" value="Submit" onclick="add_loading(); check_form();" />
<input type="hidden" name="id" id="id" value="<?php echo $_GET['id']; ?>" />

the image only shows when the AJAX stuff has finished, which is not what im looking for :(

does anyone know how to do this? its got to be possible.

Thanks in advance.

PS - please ignore my pathetic attempt at validation :D

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Thanks for the reply.

I've check out your code, and absolutely murdered it :D

I've tried to mix what i had before with the code you gave me but it still doesnt work.

my code can be seen at - http://dlacomputers.co.uk/test.php

if you wouldnt mind, could you have a quick look at the code and let me know where im going wrong?

im assuming its something to do with how i call the ajax?

Thanks in advance

Link to comment
Share on other sites

  • 0

Thanks for the reply.

I've check out your code, and absolutely murdered it :D

I've tried to mix what i had before with the code you gave me but it still doesnt work.

my code can be seen at - http://dlacomputers.co.uk/test.php

if you wouldnt mind, could you have a quick look at the code and let me know where im going wrong?

im assuming its something to do with how i call the ajax?

Thanks in advance

Its offical ... Im an idiot!

I managed to fix it, and it was related to my ajax call. i had "async:false" which i removed and now it works as expected.

Thanks for your help AnthonySterling :D

Link to comment
Share on other sites

This topic is now closed to further replies.