i have the following javascript to post a form through ajax without refreshing the screen. Since the post take a little while, i wanted to add a loading image during processing.
I see this article but it seems to only list .load() or .get() but not $.post.
<script type="text/javascript">
$(document).ready(function() {
$('#contact form').live('submit', function() {
$.post($(this).attr('action'), $(this).serialize(), function(data) {
$("#contact").replaceWith($(data));
});
return false;
});
});
</script>
Just add a few calls to hide/show your load screen/div, whatever:
<script type="text/javascript">
$(function() {
$('#contact form').live('submit', function() {
$("#Loading").fadeIn(); //show when submitting
$.post($(this).attr('action'), $(this).serialize(), function(data) {
$("#contact").replaceWith($(data));
$("#Loading").fadeOut('fast'); //hide when data's ready
});
return false;
});
});
</script>
<div id="Loading">I'm loading, image here, whatever you want</div>
I put this in so that is shows on every ajax call, no matter which one I have (I have several)
/* show the message that data is loading on every ajax call */
var loadingMessage = 'Please wait loading data for ' + defaultPageDoctor;
$(function()
{
$("#Errorstatus")
.bind("ajaxSend", function()
{
$(this).text(loadingMessage);
$(this).show();
})
.bind("ajaxComplete", function()
{
$(this).hide();
});
});
Just create an element with the #ErrorStatus id such as:
<div class="newProcedureErrorStatus ajaxLoading " id="newProcedureErrorStatus">
<span id="Errorstatus" class="ui-state-error-text newProcedureErrorStatusText"></span>
<span id="Errorstatus2" class="ui-state-error-text newProcedureErrorStatusText">
</span>
</div>
Now for the bonus rounds, you can use this area to put other messages up, I also include a timer:
/* show message for interval */
var saveMessageText = 'Saving...';
function ShowStatus(saveMessage, message, timeInMilliseconds)
{
var errorMessage = $("#Errorstatus");
if (saveMessage)
{
errorMessage.show();
//var myNumber = 0;
var myInterval = window.setInterval(function()
{
message = message + '...';
errorMessage.text(message);
errorMessage.show();
}, 1000);
window.setTimeout(function()
{
clearInterval(myInterval);
errorMessage.hide();
}, timeInMilliseconds);
}
else
{
errorMessage.text(message);
errorMessage.show();
window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds);
};
};
use it like so:
ShowStatus(true, 'Save Failed with unknown Error', 4000);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With