Combine multiple Ajax load functions - javascript

I am making a dashboard reporting tool that loads multiple charts on the selection of some filters. I use Ajax to load the charts and use Ajaxload to have a small circle as a waiting symbol. Something like:
I want to combine all those circles into one circle in the center, like any normal ecommerce website.
The ajax code is below:
$.ajax({
type: "POST",
data: {
"jsontring": JSON.stringify(output)
},
url: "http://localhost:8080/sales",
contentType: "application/json",
dataType: "json",
cache: false,
beforeSend: function () {
$('#container').html("<img class = 'ajload' src='loading.gif' />");
$('#container1').html("<img class = 'ajload' src='loading.gif' />");
},
success: function (data) {
datavol = data.Vol
dataval = data.Val
$('#container').highcharts(datavol);
$('#container1').highcharts(dataval);
},
error: function () {
alert("Sales Issue!")
},
});
$.ajax({
type: "POST",
url: "http://localhost:8080/soc",
data: {
"jsontring": JSON.stringify(output)
},
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
beforeSend: function () {
$('#container3').html("<img class = 'ajload' src='loading.gif' />");
$('#container4').html("<img class = 'ajload' src='loading.gif' />");
},
success: function (data) {
datavol = data.Vol
dataval = data.Val
$('#container3').highcharts(datavol);
$('#container4').highcharts(dataval);
},
error: function () {
alert("Soc Issue")
},
});
$.ajax({
type: "POST",
url: "http://localhost:8080/marketshares",
data: {
"jsontring": JSON.stringify(output)
},
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
beforeSend: function () {
$('#marketshares').html("<img class = 'ajload' src='loading.gif' />");
$('#marketshares1').html("<img class = 'ajload' src='loading.gif' />");
},
success: function (data) {
datavol = data.Vol
dataval = data.Val
$('#marketshares').highcharts(datavol);
$('#marketshares1').highcharts(dataval);
},
error: function () {
alert("MarketShares Issues")
},
});
Is there any specific fucnctiuon for this?

Ajaxcomplete() Description: Register a handler to be called when Ajax requests complete. This is an AjaxEvent.
You have to create an overlay and center load div, See Exmaple Here, e.g :
<div class="loading">Loading</div>
You have after that to create a global variable e.g var count=0 and increment this variable in every success function e.g count++; :
success: function (data) {
.....
count++;
}
After that You can use a condition inside Ajaxcomplete() function that execute after every ajax request e.g :
$( document ).ajaxComplete(function() {
if(count == 3) //I guess that you have 3 chart to load
$('.loading').hide();
});
NOTE : You can remove the beforeSend().
Hope this will answer your question.

Take a global var for number of ajax call;
isLoadedAll=4;//4 ,let 4 is the number of $.ajax call.
Use one container for loading image.
After a success call a function that checks all ajax success.
function checkAllLoaded(){
--isLoadedAll;
if(isLoadedAll==0)
//do stop loading image here.
}
before send
beforeSend: function() {
$('#container').html("<img class = 'ajload' src='loading.gif' />");
$('#container1').html("<img class = 'ajload' src='loading.gif' />");
}
on each success
success: function(data)
{
checkAllLoaded();
//do other stuff here
}
hope that help.

First load your ajax loader image as:
$(document).ajaxStart(function () {
//here call your ajax loader image
});
And after ajax complete hide your loader image
$(document).ready(function(){
$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
//this callback will be fired once all ajax calls have finished.
// here hide your ajax loader image
});
});
check this link

Related

Why does inner method's inside execute last?

At following method i'm trying to get grid selected row. By the way, i use syncfusion component library.
My question when i call the grid.rowSelected, function's inside works last. So i can't pass model in ajax.
What's the reason of it ?
function editPackage() {
var editPackageModel;
var grid = document.getElementById("Grid").ej2_instances[0];
grid.rowSelected = function(args) {
console.log(args.data);*// works last*
editPackageModel = args.data;*// works last*
}
$.ajax({
type: "GET",
url: "/Package/Edit",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: editPackageModel,
success: function (result) {
$('#generalModal').html(result);
},
error: function () {
alert("Dynamic content load failed.");
}
});
}
I'm not sure exactly what is the situation with "grid", i assume you have that element ready before the function is called, so try this:
var grid = document.getElementById("Grid").ej2_instances[0];//Get node reference.
grid.rowSelected = function (args) {//Setup event listener.
editPackage(args.data);//Pass the data from the event to your function
}
function editPackage(editPackageModel) {//Get the "model" and send ajax
$.ajax({
type: "GET",
url: "/Package/Edit",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: editPackageModel,
success: function (result) {
$('#generalModal').html(result);
},
error: function () {
alert("Dynamic content load failed.");
}
});
}

how to load div from html by using jquery?

I made 3 navigation navbarheader.html, navbar.html and sidebar.html.Only navbarheader.html is loading but others is not loading. if I remove navbarheader.html navbar.html is loading.
<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbarheader1').html(navbarheaderData);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
$('#navbarheader1').html(data);
var navbarData = localStorage.getItem('navbarStorage');
if (navbarData) {
$('#navbar1').html(navbarData);
} else {
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
$('#navbar1').html(data);
var sidebarData = localStorage.getItem('sidebarStorage');
if (sidebarData) {
$('#sidebar1').html(sidebarData);
} else {
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
$('#sidebar1').html(data);
}
});
}
}
});
}
}
});
}
});
</script>
That's because you are using ajax requests, which stands for Asynchronous JavaScript and XML, but can be used with other datatypes (like text and therefore json), so the lines where you retrieve navbarheaderData, navbarData, and sidebarData are being executed immediately after you launch the requests, which would explain why only the first one would load (because there's only time for the first one to get a response before you start rendering the data).
What you really want is
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
//console.log(localStorage.getItem('navbarheaderStorage'));
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
$('#navbarheader1').html(navbarheaderData);
}
});
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
//console.log(localStorage.getItem('navbarStorage'));
var navbarData = localStorage.getItem('navbarStorage');
$('#navbar1').html(navbarData);
}
});
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
//console.log(localStorage.getItem('sidebarStorage'));
var sidebarData = localStorage.getItem('sidebarStorage');
$('#sidebar1').html(sidebarData);
}
});
});
</script>
which could be simplified into the following if you don't need to use local storage.
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
$('#navbarheader1').html(data);
}
});
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
$('#navbar1').html(data);
}
});
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
$('#sidebar1').html(data);
}
});
});
</script>
#Penguen replied and changed their above code.
I see that you don't want to send an ajax request unless you need to, which is functioning as some sort of weird caching mechanism. In this case the way you have written this, we only had navbarHeaderData cached and not the rest, then the page would fail to render properly. The following way not only protects against what I said, but is also faster than if the rewritten method works as if you were loading this for the first time and didn't have this cached, then the ajax requests would be sent out almost at the same time, rather than one by one.
<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbarheader1').html(navbarheaderData);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarheaderStorage', data);
$('#navbarheader1').html(data);
}
});
}
var navbarData = localStorage.getItem('navbarStorage');
if (navbarData) {
$('#navbar1').html(navbarData);
} else {
$.ajax({
url: 'navbar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('navbarStorage', data);
$('#navbar1').html(data);
}
});
}
var sidebarData = localStorage.getItem('sidebarStorage');
if (sidebarData) {
$('#sidebar1').html(sidebarData);
} else {
$.ajax({
url: 'sidebar.html',
dataType: 'text',
success: function (data) {
localStorage.setItem('sidebarStorage', data);
$('#sidebar1').html(data);
}
});
}
});
</script>
From what I see, I see 3 templates being fetched by making AJAX calls and then you are caching the template in your local storage and then use that to render the 3 sections of your web page.
Here is what you are doing it wrong. The render part of the code is written all together in the window.load and does not care about whether the AJAX call is complete or not. As your calls are asynchronous the code will not wait until the response template is fetched.
What you can do instead is have a common render function which each ajax call success method can call.
You are suffering from asynchronous issues, you should do the work inside each request. I dont think its related to local storage.
<script type="text/javascript">
$(document).ready(function () {
var navbarheaderData = localStorage.getItem('navbarheaderStorage');
if (navbarheaderData) {
$('#navbar1').html(data);
} else {
$.ajax({
url: 'navbarheader.html',
dataType: 'text',
success: function (data) {
$('#navbar1').html(data);
}
});
}
.... and so on...
});

Ajax redirect on error

I'm calling php file through ajax call and if it returns nothing i want to redirect user to another page (It's for error reports, if it doesn't return anything it means that user logged in). Tried to add error section but it doesn't work. Any suggestions will help. Thanks! Btw, I have small jQuery function at the top of the ajax function, why it breaks my whole ajax call?
ajax.js
function loginAjax() {
//$("#email_errors").empty(); //This function doesnt work and kills whole ajax call. Here is loginAjax function call line - <button type = "submit" id = "push_button" onclick = "loginAjax(); return false">PushMe</button>
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
}
});
}
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
},
error: function(){
window.location.replace("http://stackoverflow.com");
}
});
}
To redirect using javascript all you need to do is override the location.href attribute.
function loginAjax() {
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
// the success method is deprecated in favor of done.
done: function(data) {
$("#login_error").html(data.login_message);
},
fail: function(data) {
location.href="path/to/error/page";
}
});
}

Iterate all item of ul and insert into database using ajax call

I am new with jquery. I want to insert all the list items of ul. I tried the following but its not working can someone please guide me whats wrong with the code as i did "async:false" but it still not working
$('#sortable li').each(function () {
items += $(this).text();
insertCustomBCFields($(this).text(), plu);
});
And insertCustomBCFields ftn is below
function insertCustomBCFields(field, plu) {
alert(field + plu);
$.ajax({
type: "POST",
url: 'ProductDefinition.aspx/insertBCCustomFields',
data: "{'field':'" + field + "', 'plu':'" + plu + "'}",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data) {
alert("Success");
},
failure: function (response) {
alert("Insert Failed!");
}
});
}
Making a ajax call with async: false, will make it synchronous call . this option should be set to true to make a asynchronous call async: false, unless a synchronous call is necessary.
I can see that your making call to the ajax function each time a li is found in your DOM structure(now thats very bad in terms of performance), well thats not so good, instead you can make ajax call once all the items are iterated.
something like this
var arr="";
var index=0;
$('#sortable li').each(function () {
items += $(this).text();
arr+="{field"+index+":" + field + , "plu"+index+":" + plu + "}";
});
insertCustomBCFields(arr);
Similarly change the ajax call as well
function insertCustomBCFields(arr) {
alert(field + plu);
$.ajax({
type: "POST",
url: 'ProductDefinition.aspx/insertBCCustomFields',
data: {'arr':arr},
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data) {
alert("Success");
},
failure: function (response) {
alert("Insert Failed!");
}
});
}
Happy coding :)

Load up javascript files after ajax call

Hi how do i go about loading up my javascript files after an ajax call has been made, reason being it seems once i click submit, some javascript functions do not end up working. I tried using "$getscript" however it was a bit buggy especially in google chrome? This is what my call looks like;
function InsertStatus() {
var fStatus1 = document.getElementById('<%=txtStatus.ClientID %>').value;
$.ajax({
type: "POST",
url: "WebServices/UserList.asmx/InsertUserStatus",
data: "{ 'fStatus': '" + fStatus1 + "' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data.d == "Successful") {
$("#col-3").load(location.href + " #col-3>*", "");
$.getScript('scripts/script.js', function () {
});
}
else {
alert("its false");
$.getScript('scripts/script.js', function () {
});
}
}
});
};
Replace $.getScript('scripts/script.js', function () {});
With:
$.ajax({
dataType: 'script',
url: 'scripts/script.js',
crossDomain:true,
success: function(response)
{
//Whatever
}
});

Categories