Develop Reference

How to show loading icon when queries are executed in background?

I have AJAX request which runs when user click the button. I want to show loading icon during the execution of AJAX request. I used next code but it works not as I expected.
Let me try to explain the situation. When user click the button, in terminal I notice requests in the same time user don't see loading icon. When all requests are completed in terminal I see 200 OK status. Only after that I see icon but for shot time. So my question is how to show icon when queries are executed in background?
$("#btn").click(function(){
$.ajax({
url: "some url adress",
type: "post",
contentType: 'application/json; charset= utf-8',
dataType: 'json',
data: jsonData,
})
.always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown){
$('#loading-icon').fadeIn();
})
.done(function (data, textStatus, jqXHR) {
$('#loading-icon').fadeOut();
});
});

Your code in the always() handler will be executed once the request completes.
Start showing the loading icon before sending the request:
$("#btn").click(function(){
$('#loading-icon').fadeIn();
$.ajax({
url: "some url adress",
type: "post",
contentType: 'application/json; charset= utf-8',
dataType: 'json',
data: jsonData,
})
.done(function (data, textStatus, jqXHR) {
$('#loading-icon').fadeOut();
});
});

You create Simple funcetion like:
function loader() {
if ($('#dv_Loading').css('display') == 'none') {
$('#dv_Loading').fadeIn("slow");
}
else {
$('#dv_Loading').fadeOut('slow');
}
}
Use This funcation like:
$("#btn").click(function(){
loader();
$.ajax({
url: "some url adress",
type: "post",
contentType: 'application/json; charset= utf-8',
dataType: 'json',
data: jsonData,
success: function (data) {
loader();
}
});
});

Try this one
https://stackoverflow.com/questions/48611821/how-to-show-a-hidden-element-with-jquery/48611918#48611918
I hope works fine atleast for me
Similary in your case,
$("#btn").click(function(){
$.ajax({
url : "URL",
data: { data },
beforeSend: function(){
$("#loading-icon").show();
},
complete: function(){
$("#loading-icon").hide();
},
success: function (response) {
});
});
});

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) {
...
}
});

AJAX request not working properly

Hey guys and gals,
I have a form that I would like to use AJAX to submit. For the callback function basically what I want to happen is, the form elements disappear (.hide) and are replaced by a div element (which will ready success or something of that nature). I then want the function to pause for 5 seconds and then redirect to a different URL.
The AJAX request successfully submits (as I receive an e-mail to the specified address as I should) but the callback function is not carrying out properly. Any suggestions?
$(document).ready( function () {
var $form = $('form');
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
contentType: "application/json; charset=utf-8",
success: function(data){
$("#mc-embedded-subscribe-form").hide("slow");
$("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
setTimeout(5000);
$(".button").addEventListener("click", function(){
window.location.href='http://www.neuyear.net/collections/time-domination-products';
})
}
})
}
}
**
UPDATE #1
**
This is the only error code that I am getting when I initially load the website (I've heard these errors only pop up in the dev tools and do not affect the user?)
But then when I submit the form I get this error code
I've also updated my JavaScript to the below code, taking advice from a few people who posted, it's still not working 100% though
$(document).ready(function() {
var $form = $('form');
$form.submit(function(){
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
success: function(data){
$("#mc-embedded-subscribe-form").hide("slow");
$("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
}
});
setTimeout(function(){
window.location.href='http://www.neuyear.net/collections/time-domination-products';
}, 5000)
});
});
Joey

setTimeout usage is wrong.
See :
$(document).ready( function () {
var $form = $('form');
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'json',
contentType: "application/json; charset=utf-8",
success: function(data){
$("#mc-embedded-subscribe-form").hide("slow");
$("#form").html('<div class="some-class">Some text that shows up upon successful AJAX request</div>')
setTimeout(function(){
window.location.href='http://www.neuyear.net/collections/time-domination-products';
}, 5000);
}
})
}
});
Further, the following should ideally be declared separately, if you want the user to click a link and go after ajax success.
$(".button").addEventListener("click", function(){
window.location.href='http://www.neuyear.net/collections/time-domination-products';
})

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();
});

how to pass headers in jQuery.load like ajax?

I've been stuck from this issue in couple of days. I want to send some headers data in jQuery.load(). It seems that jQuery.load never send the headers, like ajax. Can somebody explain how to, or Is it necessary? Btw, sory my bad English.
This is the syntax :
$loadingBay.load(href, settings.data, function (data, status) {
prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents());
});
Many Thanks

You can not pass headers data to $.load() , but you can set default setup using $.ajaxSetup() like this :
$.ajaxSetup({
'headers':{
'header1':'value1',
'header2':'value2',
}
}
);
//give the load call here
$('selector').load('url',function(){
//do things
})
Disclaimer From jquery doc:
Its use is not recommended.
The best way is do the is thing using $.ajax() :
$.ajax({
url: "test.html",
headers : {header1 : "header1"}
}).done(function(data) {
$('selector').html(data);
});

You can use beforeSend option in jquery ajax , like as follows :
$.ajax({
url: "http://localhost/restTest",
data: { uname: "asdf" },
type: "GET",
beforeSend: function(xhr){xhr.setRequestHeader('X-TOKEN', 'xxxxx');},
success: function() { alert('Success!' + authHeader); }
});
or can also use headers like,
$.ajax({
url: "http://localhost/restTest",
data: { uname: "asdf" },
type: "GET",
headers:{ "X-TOKEN": 'xxxxx'},
success: function() { alert('Success!' + authHeader); }
});