Hello so I'm making a chat app using long-polling, ajax etc.
What I wanted to do is when I clicked the "Send" button I wanted the value of the button to be changed to "Please wait.." and will be refreshed and go back to value "Send".
For now this is my code when the "Send" button is clicked:
$('#btnsend').val('Please wait..');
It does work but it won't get back to "Send" value. Any thoughts? Thanks!
$('#btnSend').on('click', function() {
$(this).val('Please wait...').prop('disabled', true);
// Your processing here e.g. ajax
// when completed
$(this).val('Send').prop('disabled', false);
})
The below approach has adavantage that you need to worry about the intial html value
$('#btnSend').on('click', function() {
var intialValue = $(this).val(); // in case you are using button tag then use html() instead of val()
$(this).val('Please wait...').prop('disabled', true);
$.ajax({
..
..,
complete:function(){
$('#btnSend').val(intialValue); // again use html() incase of button or any other tag apart from input
}
})
})
$('#send').on('click',function(){
var self=$(this);
self.val("Please wait...").attr('disabled',true);
$.ajax({
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: {param1: 'value1'},
})
.done(function(data) {
self.val('Send').attr('disabled',false);
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});
