i currently have the following AJAX response, which displays some HTML retrieved from the target page:
success: function (data, textStatus, jqXHR) {
$("#RoomAddResponse").html(data);
$("#RoomAdd")[0].reset();
How do i change it so that the HTML data shows for 5 seconds, then hides again?
Set a timeout with a function that will empty #RoomAddResponse
success: function (data, textStatus, jqXHR) {
$("#RoomAddResponse").html(data);
setTimeout(function(){
$("#RoomAddResponse").empty();
}, 5000);
$("#RoomAdd")[0].reset();
}
Related
I need a simple AJAX code to stay in same jsp page after i click submit button.It should not refresh the page. I have researched a lot. But didnt get a simple one.Please help
you can find a simple form submit example in this link
you can add a button <button id='submit-btn'>Submit</button> and make ajax call on click of that as in below code.
$('#submit-btn').on('click', function (e) {
var postData = $('#ajaxform').serializeArray();
var formURL = $('#ajaxform').attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
});
My app is an MVC .NET 4.0 application.
My application is fairly straightforward. I open an text file and uploaded it to be processed and returned as an excel file. This works as expected.
The excel file is returned via an actionresult controller. There are no errors. It works the way I want it to.
The problem is that when I call ajaxStart with blockUI it works. However, upon returning the file, the ajaxStop or ajaxSuccess is never fired to turn off the spinner after the file result is displayed with a message - do you want to open the file or save it or cancel.
I'm using jquery fileupload, blockUI and jquery 1.9.1.
$('#fileupload').fileupload({
dataType: 'json',
type: 'POST',
url: fileuploadpath,
autoUpload: true,
beforeSend: function () {
$.blockUI({
timeout: 0,
message: '<h1><img src="../images/ajax-loader.gif" /> Processing...</h1>'
});
},
complete: function() {
//$.unblockUI();
},
done: function (e, data) {
//$('.file_name').html(data.result.message.Name);
//$('.file_type').html(data.result.message.Type);
//$('.file_size').html(data.result.message.Length);
$('.file_msg').html(data.result.message.Error);
},
success: function (data) {
$.unblockUI();
$('.file_msg').html(data.result.message.Error);
}
});
and here is the basics of the file return in the action controller:
Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);
return File(fileoutput, "application/vnd.ms-excel");
Everything works just great. The area I'm scratching over my head is - why isn't the spinner being turned off after the file return? Am I missing something? I've tried binding ajaxStop and ajaxStart to the document but that does not work. ajaxStart gets fired but upon the file return, ajaxStop is being ignored.
Remove the 'done' and 'complete' event and use this format for your ajax call:
$(document).ready(function() {
$('#fileupload').fileupload({
dataType: 'json',
type: 'POST',
url: fileuploadpath,
autoUpload: true,
timeout:60000,
beforeSend: function () {
$('#loader').show()
},
success: function (data) {
$('#loader').hide()
//$('.file_name').html(data.result.message.Name);
//$('.file_type').html(data.result.message.Type);
//$('.file_size').html(data.result.message.Length);
$('.file_msg').html(data.result.message.Error); //??? you are passing the error here
},
error: function(jqXHR, textStatus, errorThrown) {
$('#loader').hide()
if(textStatus==="timeout") {
alert("A timeout occurred");
} else {
alert("This is an other error");
}
}
});
});
NOTE: seen you have trouble with the blockUi, I have here used a other approach.
TIMEOUT:
I have set an extra parameter 'timeout' and set this to 60 sec. You coul set this to '0' which will be unlimited but it will be better practice to give it a limited value.
Place this in your HTML and give it a style of 'display:none' and an id.
<h1><img id="loader" src="../images/ajax-loader.gif" style="display:none"/> Processing...</h1>'
I am strucked at twitter bootstrap along with ajax use. Scripts used
console errors :
middle of debug(click event from browser at drop down) bootstrap dropdown coming and again disappearing after debug finish.
before I use ajax request like loading html content on button click bootstrap working fine but after ajax finish bootstrap dropdown not working .
jquery used for ajax is :
$('a[href="/TransJobAddress/NewTransPortJobAddress').on('click', function createnew(event) {
$.ajax(
{
url: '/TransportJobAddress/Create',
datatype: 'html',
success: function (data, textStatus, jqXHR) {
$('#addAddress').html(data);
},
error: function (jqXHR, textStatus, errorThrown) {
//alert('The server saying:' + errorThrown);
}
});
event.preventDefault();
event.stopPropagation();
});
Where is wrong in this client side or server side?
I have a problem with my WCF service. I want to call it after some action. Here is ajax call:
$.ajax({
type: "Get",
async: false,
url: 'service_adress/DoWork',
success: function () {
alert("Success");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown);
}
});
Method do work should return string . When im putting service_adress/DoWork into adressbar in browser im getting correct response(< string>Something< /string>), but my ajax is throwing error NS_Error_failure. What is wrong here?
I am trying to use jsonp to access the data at:
https://github.com/users/jbranchaud/contributions_calendar_data
However, none of the solutions I have tried are resulting in either the callback or the success function getting invoked. When I use Chrome/Firefox inspection tools, I can look at the script and see that the response was 200 Ok and that the response text contains the data from the above URL. Nevertheless, neither the callback function nor the success function get called at any point. Any ideas about how to get this to work?
Here is my most recent attempt at getting this to run:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function parseResults(results) {
console.log('hello function callback.');
}
$.ajax({
url: 'https://github.com/users/jbranchaud/contributions_calendar_data',
type: 'post',
dataType: 'jsonp',
jsonp: true,
jsonpCallback: 'parseResults',
success: function(data, textStatus, jqXHR) {
console.log('success_function');
console.log(data);
},
error: function() {
console.log('error with jsonp request');
}
});
</script>
When I load the page, I see the 'error with jsonp request' in the console, so there is an error with the ajax request. Ideas of why this request isn't succeeding?
In the ajax request, try to set the attribute 'jsonp' to false (jsonp: false).
Basically, JQuery generate an automatic function callback name, like this : JQuery1223...34.
In your case, you ,already, explicitly set the jsonpCallback function name. so you have to put jsonp attribut to false.
your code should be like this :
$.ajax({
url: 'https://github.com/users/jbranchaud/contributions_calendar_data',
type: 'post',
dataType: 'jsonp',
jsonp: false,
jsonpCallback: 'parseResults',
success: function(data, textStatus, jqXHR) {
console.log('success_function');
console.log(data);
},
error: function() {
console.log('error with jsonp request');
}
});