mikeaag Posted December 20, 2010 Share Posted December 20, 2010 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 More sharing options...
0 AnthonySterling Posted December 20, 2010 Share Posted December 20, 2010 http://pastie.org/1393021 :) Link to comment Share on other sites More sharing options...
0 mikeaag Posted December 20, 2010 Author Share Posted December 20, 2010 http://pastie.org/1393021 :) 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 More sharing options...
0 mikeaag Posted December 20, 2010 Author Share Posted December 20, 2010 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 More sharing options...
Question
mikeaag
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
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