Develop Reference

ASP.NET Core - Client-side AJAX not working for IE11/Edge

I've literally been researching for 5+ days for a problem that only exists within IE and Edge (works in Chrome, FireFox, etc). I've gone through pretty much all of the links and tried nearly everything, but it seems that a lot of the content/answers out there from older posts are very outdated.
Background: I created an ASP.NET Core web service - it is running on some port on localhost. Ideally, I'd have my users open an locally-residing html document (meaning living on their local filesystem and not hosted on a server) that pings the web service through AJAX (that returns some JSON) - allowing for that content from the web service to be displayed in the html document. It literally works in all browsers except IE and Edge (I'm using IE11).
Here is my Startup.cs:
public void ConfigureServices(IServiceCollection services)
{
// Add framework services.
...
services.AddCors(o => o.AddPolicy("ContentServices", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
services.AddMvc();
...
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
...
app.UseCors("ContentServices");
...
}
Here is my SearchController.cs:
[EnableCors("ContentServices")]
public SearchResponse Query(string index, string input, SearchType searchType, int page = 0, int pageSize = 20)
{
SearchResponse sr = new SearchResponse;
...
return sr;
}
Here is my JavaScript code:
function WebService(url, successMsg, errorMsg) {
return $.ajax({
url: searchDestinationUrl + url,
type: "GET",
crossDomain: true,
dataType: "json",
success: function (results) {
return results;
},
error: function (xhr, status, error) {
console.error(error + " - " + errorMsg);
}
});
}
function RunGeneralSearch(input, options) {
var search = WebService("search/query?index=" + index + "&input=" + input + "&page=" + options.content.pageIndex + "&pageSize=" + options.content.pageSize, "", "Search failed.")
.then(function (response) {
var searchResults = [];
searchResults.content = [];
searchResults.contentTotal = response.total;
searchResults.clientPaging = false;
var results = response.results;
if (results.length > 0) {
var Search = MadCap.CreateNamespace("WebHelp.Search");
for (var i = 0; i < results.length; i++) {
var result = results[i];
var rank = result["rank"];
var title = result["title"];
var link = result["link"];
var linkUrl = GetLinkUrl(link);
var abstractText = result["abstractText"];
var searchResult = new Search.SearchResult(rank, title, linkUrl.FullPath, unescape(abstractText));
searchResults.content.push(searchResult);
}
}
return searchResults;
});
return search;
};
}
Things I've tried:
Using $.support.cors = true will work for IE with the exception
that it will prompt an warning for every ping that is made to the
web service regarding security: "This page is accessing information that is not under its control. This poses a security risk. Do you want to continue?" This is absolutely annoying, and I will not have my customers modify their security settings for this. This also does not work for Edge at all.
Changing the crossDomain attribute in the AJAX call to false - behavior is the same as the above except that it will not work for all other browsers now.
I've read a lot about using the dataType: 'jsonp' - but as far as I know, it's deprecated and only supports GET requests. So I did not try this and want to stay away from it.
I've also read that because I'm trying to access the web service through a locally-residing unhosted file (i.e. url is file:// instead of http://) that it is technically not supported as an origin - so allowing any origin wouldn't help in this case. I'm not sure how true this is or even how to test this. Regardless, I have not tried serving the html file over localhost because I do not want to require my clients to have to do this just for IE/Edge when it works completely fine with all other browsers.
I've tried using an XMLHttpRequest instead of and AJAX call. It requires me to then do JSON.parse(result); but seems to work perfectly for all browsers including IE except Edge...
I understand to some extent about CORS and the limitations of the same origin policy, but I absolutely don't understand what the difference is between Microsoft browsers and the rest.
Please help!

Prevent duplicate $.ajax calls using result cache

A similar question has been asked before, but I don't believe it overcomes the challenges in this case because my function calls are all together, so please bear with me (I'll delete the question if appropriate).
I have a number of dashboard widgets that each make an $.ajax call, receive a JSON result and then process that to render a Google chart. The widgets can be used multiple times, so there are some duplicated AJAX calls occurring, e.g.
RenderChart('/api/LoginCount?DaysPrevious=7', 'ColumnChart'); // some parameters removed, for brevity
RenderChart('/api/LoginCount?DaysPrevious=7', 'AreaChart');
RenderChart('/api/LoginCount?DaysPrevious=7', 'Table');
The problem is that this generates multiple calls to the same URL, which is extremely wasteful. I saw in the linked question that an object can be used to cache the results, but when I applied this, it didn't seem to work because the second call to RenderChart (immediately after the first) saw there was no data (yet) in the cache, and called the URL again.
My code is:
function LoadDataFromApi(apiUrl) {
return $.ajax({
type: 'GET',
url: apiUrl,
dataType: "json",
success: function (data) { }
});
}
function RenderChart(apiUrl, chartElementId, chartType, chartOptions) {
$.when(LoadDataFromApi(apiUrl)).done(function (data) {
var el = $('#' + chartElementId);
try {
var arrayOfArrays = BuildGoogleArrayFromData(data); // Transform JSON into array of arrays (required by Google Visualization)
$(el).empty();
if (arrayOfArrays.length == 0) { // Data found?
$(el).append('<p class="noData">No data was found.</p>');
} else {
var wrapper = new google.visualization.ChartWrapper({ // alert(wrapper.getChartType()); // wrapper is the only way to get chart type
chartType: chartType,
dataTable: google.visualization.arrayToDataTable(arrayOfArrays, false),
options: chartOptions,
containerId: chartElementId
});
wrapper.draw();
}
}
catch (ex) {
$(el).append('<p class="error">An error occurred: ' + ex.message + '</p>');
}
});
}
Ideally it would be good to cache the arrayOfArrays value, as at this point all additional processing is also complete. However, getting JavaScript to see what other API calls are in progress, and wait for them is where I'm struggling. Is this possible to achieve?
If anyone can handhold me into achieving both I'll put a bonus on the question. I read about promises, but I need to support IE9+.

I can think of making a cache map with URL as its key, and the AJAX request as its value. We can change your LoadDataFromApi function to leverage this cache, and return appropriate AJAX request, if exists, else make a new request.
Following is a snippet of how it can be done.
var requestCache = {};
function LoadDataFromApi(apiUrl) {
if (!requestCache[apiUrl]) {
requestCache[apiUrl] = $.ajax({
type: 'GET',
url: apiUrl,
dataType: "json"
});
}
return requestCache[apiUrl];
}
This way, you can call LoadDataFromApi without any limit, and chain your promise handlers like this:
LoadDataFromApi('http://fake.url')
.then(function(data) {
// use the data in one widget
})
LoadDataFromApi('http://fake.url')
.then(function(data) {
// use this data in another widget
})
// ... and so on
This way the AJAX call for a particular URL will be made only once, and the result will be shared among the promise handlers.

Multiple ajax calls fired simultaneously not working properly

I created a site which load every few seconds data from multiple sources via AJAX. However I experience some strange behavior. Here is the code:
function worker1() {
var currentUrl = 'aaa.php?var=1';
$.ajax({
cache: false,
url: currentUrl,
success: function(data) {
alert(data)
},
complete: function() {
setTimeout(worker1, 2000);
}
});
}
function worker2() {
var currentUrl = 'aaa.php?var=2';
$.ajax({
cache: false,
url: currentUrl,
success: function(data) {
alert(data)
},
complete: function() {
setTimeout(worker2, 2000);
}
});
}
The problem is that many times, one of the workers returns NaN. If I change the frequency of calls for, lets say, 2000 and 1900, then everything is working ok and I got almost no NaN results. When those frequencies are same, I get over 80% NaN results for one of the calls. It seems like the browser cannot handle two requests called at exact same time. I use only those two workers, so the browser shouldn't be overloaded by AJAX requests. Where is the problem?
Note that the aaa.php works with the mySql database and do some simple queries base on parameters in url.

All you need is $.each and the two parameter form of $.ajax
var urls = ['/url/one','/url/two', ....];
$.each(urls, function(i,u){
$.ajax(u,
{ type: 'POST',
data: {
answer_service: answer,
expertise_service: expertise,
email_service: email,
},
success: function (data) {
$(".anydivclass").text(data);
}
}
);
});
Note: The messages generated by the success callback will overwrite
each other as shown. You'll probably want to use
$('#divid').append() or similar in the success function.

Maybe, don't use these workers and use promises instead like below? Can't say anything about the errors being returned though without looking at the server code. Below is working code for what it looks like you are trying to do.
This is a simple example but you could use different resolvers for each url with an object ({url:resolverFunc}) and then iterate using Object.keys.
var urls = [
'http://jsonplaceholder.typicode.com/users/1',
'http://jsonplaceholder.typicode.com/users/2',
'http://jsonplaceholder.typicode.com/users/3',
'http://jsonplaceholder.typicode.com/users/4',
'http://jsonplaceholder.typicode.com/users/5',
'http://jsonplaceholder.typicode.com/users/6',
'http://jsonplaceholder.typicode.com/users/7'
]
function multiGet(arr) {
var promises = [];
for (var i = 0, len = arr.length; i < len; i++) {
promises.push($.get(arr[i])
.then(function(res) {
// Do something with each response
console.log(res);
})
);
}
return $.when(promises);
}
multiGet(urls);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to store the ajax response in browser cache with jquery

I'm trying to store the ajax response in browser cache. I know to store it for only url like (example.com), but want to store the data which having url like (example.com?xyz=abc%20efg&mno=hjk).
My code :
beforeSend: function () {
var addC=url; // I want to add data also with this url
console.log(addC);
if (localCache.exist(addC)) {
printRes(localCache.get(url));
console.log("cached values");
return false;
}
return true;
},
And
var localCache = {
data: {},
remove: function (url) {
delete localCache.data[url];
},
exist: function (url) {
return localCache.data.hasOwnProperty(url) && localCache.data[url] !== null;
},
get: function (url) {
console.log('Getting in cache for url' + url);
return localCache.data[url];
},
set: function (url, cachedData, callback) {
localCache.remove(url);
localCache.data[url] = cachedData;
if ($.isFunction(callback)) callback(cachedData);
}
};
Please anyone help me to solve this.

By reading the docs from
MDN i Think you are doing wrong. If you want to cache ajax response CACHE property to true
in your ajax call ,also see to it that you provide proper cache expiration header from server.
Also
[from MDN]
Never access cached files by using traditional GET parameters (like other-cached-
page.html?parameterName=value). This will make the browser bypass the cache and attempt to get
it from network. To link to cached resources that have parameters parsed in JavaScript use
parameters in the hash part of the link, such as other-cached-page.html#whatever?parameterName=value.
if you are looking for local storage[key value storage]
globalStorage['cache_1'].setItem("key",data);

Why does AJAX json script return extra 0 (zero)

I have an AJAX function in WordPress that calls a PHP function to return the value of a transient record in the Database.
When I call the function using jQuery, I receive the result however it always has an extra 0 (zero) appended to the value.
Here is my jQuery function:
(function($) {
$(document).ready( function() {
var AdvancedDashboardWidget = function(element, options)
{
var ele = $(element);
var settings = $.extend({
action: '',
service: '',
countof: '',
query: '',
callback:''
}, options || {});
this.count=0;
var url='';
switch(settings.service)
{
case 'facebook':
if(settings.countof=='likes' || settings.countof=='talks')
{
ajaxCall(action,ele,settings);
}
}
};
var ajaxCall = function(action,ele,settings){
opts = {
url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
type: 'POST',
async: true,
cache: false,
dataType: 'json',
data:{
action: settings.action // Tell WordPress how to handle this ajax request
},
success:function(response) {
//alert(response);
ele.html(response);
return;
},
error: function(xhr,textStatus,e) { // This can be expanded to provide more information
alert(e);
//alert('There was an error');
return;
}
};
$.ajax(opts);
};
$.fn.advanceddashboardwidget = function(options)
{
return this.each(function()
{
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('advanceddashboardwidget')) return;
// pass options to plugin constructor
var advanceddashboardwidget = new AdvancedDashboardWidget(this, options);
// Store plugin object in this element's data
element.data('advanceddashboardwidget', advanceddashboardwidget);
});
};
});
})(jQuery);
There are more helper functions involved however this is the main jQuery function that communicates with WordPress and returns the value of the PHP function.
The issue is that if the value is returned as "99" for example it will be returned as "990"
Here is the PHP function that jQuery is calling:
/**
* Get Facebook Likes
*/
public function get_facebook_likes(){
echo 99;
}
If I change the above to return 99; I receive plain 0

Your function should use wp_send_json to encode the PHP as JSON and sent it back to the AJAX request handler. This will also stop executing of any following PHP too, so there is no need to use exit or die.
So for your specific example, you would use:
/**
* Get Facebook Likes
*/
public function get_facebook_likes(){
wp_send_json(99);
}

This is old question but I'm going to answer this. wp_send_json() function may help but not always. There could be some moments when you can't use this function. Like, when you load posts by ajax, you are getting some template part, you can use the function. That's why WordPress documentation suggests to make use of the die() function.
So in the end, your php function should look like this:
/**
* Get Facebook Likes
*/
public function get_facebook_likes() {
echo 99;
die();
}

Use Firebug and view the actual net data transmitted and received. Determine if the error is coming from the javascript side or the PHP side. Copy the net request and paste it into a separate browser window to see the raw result. If it is PHP, pursue that. if it is the javascript doing something, let us know.