javascript - Show wait div until server response in ajaxForm
376
<script type="text/javascript">
$(document).ready(function (event) {
$('#reset_btn').click(function () {
$("#Sender").val("");
$("#message").val("")
});
$('#form1').ajaxForm({
dataType: 'json',
success: function (response) {
var user_phone = $('<?php echo $type;?>[name=Sender]').val();
var user_message = $('textarea[name=message]').val();
var proceed = true;
if (user_phone == "") {
$('<?php echo $type;?>[name=Sender]').addClass('inp-form-error');
proceed = false;
}
if (user_message == "") {
$('textarea[name=message]').addClass('form-textarea-red');
proceed = false;
}
if (proceed) {
$("#wait").show();
if (response.type == 'error') {
output = '<div id="msg_1" ><div id="image" ></div>' + response.text + '</div>'
} else if (response.type == 'warning') {
output = '<div id="msg_1" ><div id="image" ></div>' + response.text + '</div>'
} else {
output = '<div id="msg_1" ><div id="image" ></div>' + response.text + '</div>'
// output = '<div ><a href = "#" class = "close">×</a>'+'<strong>'+response.title+'</strong>'+response.text +'</div>'
//reset values in all input fields
$('#contact_form input').val('');
$('#contact_form textarea').val('');
var credit = $.ajax({
url: "balance.php",
async: false
});
$("#credit").html(credit.responseText);
}
$("#result").hide().html(output).show();
}
}
});
//reset previously set border colors and hide all message on .keyup()
$("#contact_form input, #contact_form textarea").keyup(function () {
$('textarea[name=Recepient]').removeClass('inp-form-error');
$('<?php echo $type;?>[name=Sender]').removeClass('inp-form-error');
$('textarea[name=message]').removeClass('form-textarea-red');
$("#result").slideUp();
});
});
</script>
I am trying to show$("#wait").show(); until the server response returns. I am confused where to put "Wait"div. It should show waitingdiv until server response .
There was sleep of 5 second on server script to check if the waitdiv was working.
Answer
Solution:
Show it in the
beforeSubmitevent option.then hide it in the success function (which is called at the end of the loading).
Answer
Solution:
Put this $("#wait").show() inside beforesubmit event of ajax request and $("#wait").hide() in ajax success event.