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

Ajax not being called in javascript function

In the success function I want to call a function. The problem is that ajax does not fire, so the data is never triggered and display. Here is my ajax call with a javascript function call in the success function.
$.ajax({
type: "POST",
url: "./api/login.php",
data: dataString,
cache: false,
success: function(data){
if(data){
//FUNCTION CALL WHEN USER LOGGING IN
retrieveUserBlogData();
window.location = "api/home.php";
}else{
$('.alert').show();
}
}
});
function retrieveUserBlogData(){
$.ajax({
type: "GET",
url: 'retrievePostData.php',
data: "",
dataType: 'json',
success: handleData
});
}
function handleData(data) {
alert(data);
var blog_file = data[3];
$('#imageDiv')
.append('<img id="blog_img" src="upload/' + blog_file + '"><br>');
}
I cant figure out why the ajax in the retrieveUserBlogData() function is not being triggered.
Any help would be appreciated Thanks.

Even if the AJAX succeeds, you are redirecting the browser to a different page after the first AJAX request:
window.location = "api/home.php";
So I would suggest removing that.

Try the following code for redirecting to another window
window.location.assign(URL);
then it may work.

Try it like this
$.ajax({
type: "POST",
url: "./api/login.php",
data: dataString,
cache: false,
success: function(data){
if(data){
//FUNCTION CALL WHEN USER LOGGING IN
retrieveUserBlogData();
}else{
$('.alert').show();
}
}
});
function retrieveUserBlogData(){
$.ajax({
type: "GET",
url: 'retrievePostData.php',
data: "",
dataType: 'json',
success: function(data){
alert(data);
var blog_file = data[3];
$('#imageDiv')
.append('<img id="blog_img" src="upload/' + blog_file + '"><br>');
window.location = "api/home.php";
}
});
}

trying to put an ajax request inside the success call back of another ajax request

I am trying to make two jQuery ajax calls, the second should be made from the success callback of the first. I have tried a couple variations of code e.g just messing with the brackets.
Here is what I tried.
$.ajax({
url: 'inc/grab_talk.php?name='+encoded_name+'&loc='+encoded_address+'&lat='+encoded_lat,
type: 'post',
success: function () {
$.ajax({
url: 'inc/talk_results.php',
type: 'post',
success: function (dat) {
alert(dat);
}
});
}
});
I am receiving '500 (internal server error) in console

Try this, you can use either POST or GET, but in your case GET seems to be more appropriate.
$.ajax({
type: "GET",
url: "some.php",
data: { name: "somename", location: "somelocation" },
success: function(){
$.ajax({
type: "GET",
url: "someother.php",
success: function(){
alert('test');
}
});
}
});

Check this example
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page='+btn_page,
success: function(data){
$.ajax({
var a=data; //edit data here
type: "post",
url: "example.php",
data: 'page='+a,
success: function(data){
});
});

How do I debug Jquery Success function

I am using Javascript to get records from the database, everything works the way i want but i cannot show alerts in success handler. When i place a break point to sucess:function(data) it gets hit but this line is not being hit $("#Alert").html(data).show().... Another unusually thing i have noticed is that some time $("#Alert").html(data).show().. gets hit. Is there any way i can debug this?
function MethodNAme() {
ajReq.abort();
ajReq = $.ajax({
type: "POST",
url: "Services/",
data: ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
getSomething();
$("#Alert").html(data).show().delay(5000).fadeOut();
alert("working");
}
}

your syntax is not correct, you are placing a function getSomething() in middle of $.ajax(),
function MethodNAme() {
ajReq.abort();
ajReq = $.ajax({
type: "POST",
url: "Services/",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
// getSomething(); <-- remove this
success: function (data) {
$("#Alert").html(data).show().delay(5000).fadeOut();
alert("working");
}
});
}

You can use console.log() to print data in browser console. You can access console window by pressing F12 key and then go to console tab.

Syntax error in Javascript function

Java script
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "id="+#Model.id+"&url="+#url
});
});
ReferenceError: Expired is not defined
[Break On This Error]
data: "id="+2925+"&url="+Expired

You probably want (but see also below):
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "id=#Model.id&url=#url"
});
});
...because you have to think about what the browser sees, and if #url gets replaced with Expired by the server, from the error you can tell that what the browser sees for your code is:
data: "id="+2925+"&url="+Expired // <=== What the browser sees with your current code
Even better, let jQuery handle any potential URI-encoding needed by passing it an object instead:
$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: {id: #Model.id, url: "#url"}
});
});
If you don't want to pass jQuery an object and let it handle the URI-encoding for you, then you'll want to handle it yourself:
data: "id=#Model.id&url=" + encodeURIComponent("#url")

$('#senurl').click(function () {
$.ajax({
type: "POST",
url: "/Admin/Coupon1/Reject",
dataType: "json",
data: "{id:'" + #Model.id + "', 'url': " + #url + "}",
success: function (response) {
alert( response.d);
},
error: function (data) {
alert(data);
},
failure: function (msg) {
}
});
});
Try this it is working fine. If you are using url routing then you might get some other error.
so better get the respone output and check..

I think its because #url variable is assigned data Expired without quotes.