Develop Reference

jQuery AJAX Customise showLoader

Within the following jQuery showLoader can be set to show a loading icon while the AJAX request is made.
$.ajax({
url: baseUrl,
data: (paramData && paramData.length > 0 ? paramData + '&ajax=1' : 'ajax=1'),
type: 'get',
dataType: 'json',
cache: true,
showLoader: true,
timeout: 10000
});
I want to know if there is a proper way to customise this to some html that i have set for loading icons to make loading icons uniform across my site.

I can agree with Gopal, but be careful about handling errors. If the request fails, the loader should be hidden and user should be informed. See http://api.jquery.com/jquery.ajax/
The complete callback is better for this purpose, because it will be called anyway.
$.ajax({
type: "GET",
url: ""
beforeSend: function(){
$(".show_load_icon").show();
},
complete: function(){
$(".show_load_icon").hide();
}
});
Or you can handle the error manually.
$.ajax({
type: "GET",
url: ""
beforeSend: function(){
$(".show_load_icon").show();
},
success: function(){
$(".show_load_icon").hide();
},
error: function(){
$(".show_load_icon").hide();
alert("Error"); // inform the user about error
}
});
From jQuery 3.0 you can use .done() and .fail()

For my suggestion there is no option for default ajax
showloader
So you can go better for this way.
$.ajax({
type: "POST",
url: "someURL"
data: "someDataString",
beforeSend: function(msg){
$(".show_load_icon").show();
},
success: function(msg){
$(".show_load_icon").hide();
}
});

Send data from a javascript ajax function to a jsp

This is what I am trying to do. On a home page.. say /home.jsp, a user clicks on a link. I read value of the link and on the basis of which I call a RESTful resource which in turn manipulates database and returns a response. Interaction with REST as expected happens with use of JavaScript. I have been able to get information from REST resource but now I want to send that data to another JSP.. say /info.jsp. I am unable to do this.
I was trying to make another ajax call within success function of parent Ajax call but nothing is happening. For example:
function dealInfo(aparameter){
var requestData = {
"dataType": "json",
"type" : "GET",
"url" : REST resource URL+aparameter,
};
var request = $.ajax(requestData);
request.success(function(data){
alert(something from data); //this is a success
//I cannot get into the below AJAX call
$.ajax({
"type": "post",
"url": "info.jsp"
success: function(data){
alert("here");
("#someDiv").html(data[0].deviceModel);
}
});
How do I go about achieving this? Should I use some other approach rather than two Ajax calls? Any help is appreciated. Thank You.

You can use the following function:
function dealInfo(aparameter) {
$.ajax({
url: 'thePage.jsp',
type: "GET",
cache: false,
dataType: 'json',
data: {'aparameter': aparameter},
success: function (data) {
alert(data); //or you can use console.log(data);
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': data},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
});
}
Or make the AJAX call synchronous:
function dealInfo(aparameter) {
var request = $.ajax({
async: false, //It's very important
cache: false,
url: 'thePage.jsp',
type: "GET",
dataType: 'json',
data: {'aparameter': aparameter}
}).responseText;
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': request},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}

In this way I'm using.
"type": "post" instead of type: 'post'
Maybe it will help. Try it please. For Example;
$.ajax({
url: "yourURL",
type: 'GET',
data: form_data,
success: function (data) {
...
}
});

how to cancel an ajax request and clear info while it is running?

this is the piece of the code I have. By default, "ajax_info_box" is hidden, by clicking "button", "ajax_info_box" shows and sends request, it probably takes about 5 seconds to result. How do I cancel and clear the request by click “cancel"? Any help would be appreciated.
$('.ajax_info_box').hide()
$('.button').click(function() {
$('.ajax_info_box').show()
var xhr = $.ajax({
type: "POST",
url:
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
do something here
});
$('.cancel').click(function () {
suppose to kill the request here
$('.ajax_info_box').hide()
});
});

xhr has an abort method on it
xhr.abort()
More here Abort Ajax requests using jQuery

$('.ajax_info_box').hide()
$('.button').click(function() {
$('.ajax_info_box').show()
var xhr = $.ajax({
type: "POST",
url:
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
do something here
});
$('.cancel').click(function () {
xhr.abort();
$('.ajax_info_box').hide()
});
});

jquery and page reload

I have this code in my asp.net webform, I call a webmethod to load data from database:
function Inicializar() {
$("#wait").show();
$.ajax({ type: "POST",
url: "index.aspx/Iniciar",
data: JSON.stringify({}),
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (response) {
$("#wait").hide();
var result = response.d;
cargardatos(result );
}
});
}
I call this function in ready event:
$(document).ready(function () {
Inicializar();
});
the first time it works, the problem is that when I press F5 and reload the page data is not loaded, and if I press back working again.
I do not know if I'm doing something wrong.
Sorry for my English..Xd
Thank you. Greetings!

JavaScript is CaSe SenSitIve. So change your code to:
$(document).ready(function () {
Inicializar();
});
But this way, it doesn't even work on the first time. And do check what is wrong with your output using the Network or Console.
Disable Caching if Needed
$.ajax({ type: "POST",
url : "index.aspx/Iniciar",
cache : false,
datatype : 'json'
})

Turn off caching
function Inicializar() {
$("#wait").show();
$.ajax({ type: "POST",
url : "index.aspx/Iniciar",
cache : false,
datatype : 'json'
}).done(function (response) {
$("#wait").hide();
cargardatos(response.d);
});
}
$(document).ready(function () {
Inicializar();
});

Refresh each second with setInterval

I am logging to refresh a page each sec, and displaying a console.log message:
function refreshEachMinute() {
$.ajax({
type: "POST",
url: "minutesrefresh.php",
//data: dataString,
dataType: "json",
success: function(data) {
//alert('ref');
console.log('ok');
}
});
} // end function refresh
// refresh each minute
setInterval(refreshEachMinute, 1000);
The alert message shows, but the console.log does not. In addition, minutesrefresh.php is not loading in the Firebug bar.

I was facing a similar issue sometime back. So, instead of doing it like this, I changed it to:
function refreshEachMinute() {
$.ajax({
type: "POST",
url: "minutesrefresh.php",
//data: dataString,
dataType: "json",
success: function(data) {
setTimeout(refreshEachMinute, 1000);
console.log('ok');
}
});
}
$(function(){setTimeout(refreshEachMinute, 1000)});