I have a function get_dish() which makes an AJAX-request to my back-end to retrieve a Dish-object with the requested ID.
function get_dish(id) {
let url = "/api/dishes/" + id;
let r;
$.ajax({
type: 'GET',
url: url,
async: false,
success: function(response) {
r = response;
}
});
return r;
}
The problem I had is that when get_dish() is called a lot my page would slow down because of all the HTTP-requests.
So I came up with the idea to cache the objects I request in localStorage. So when get_dish() is called, the returned Dish-object gets stored in localStorage. To achieve this I made the following caching-system:
// system to cache objects requested from API.
class ApiCache {
constructor(dishes) {
this.dishes = dishes;
}
}
// intialize ApiCache
if (localStorage.getItem("apicache") == null) {
localStorage.setItem("apicache", JSON.stringify(new ApiCache([])));
}
function apicache_add_dish(dish) {
let apicache = JSON.parse(localStorage.getItem("apicache"));
if (apicache_get_dish(dish.id) != null) {
return;
}
apicache.dishes.push(dish);
localStorage.setItem("apicache", JSON.stringify(apicache));
}
function apicache_get_dish(id) {
let apicache = JSON.parse(localStorage.getItem("apicache"));
return apicache.dishes.find(dish => dish.id == id);
}
The updated get_dish() looks like this:
function get_dish(id) {
if (apicache_get_dish(id) != null) {
return apicache_get_dish(id);
}
let url = "/api/dishes/" + id;
let r;
$.ajax({
type: 'GET',
url: url,
async: false,
success: function(response) {
r = response;
if (apicache_get_dish(id) == null) {
return apicache_add_dish(r);
}
}
});
return r;
}
This way, when the same dish is requested multiple times no HTTP-requests needs to be made, but it can just be retrieved from the cache instead. I'd but an expiration on the localStorage to belittle the chance of data inconsistency.
Is this a good idea? What are the pro's and cons? Can this be improved?
Related
I m working on simple registration i have two forms one is registration another is city, When city is newly added it get added update perfectly but when i use city in registration form eg pune. pune will not get edited or updated, code written in ajax
function UpdateCity(Ids) {
debugger;
var Id = { Id: Ids }
$('#UpdateModel').modal('show');
$.ajax({
type: 'GET',
url: "/City/GetCityDetail",
data: Id,
dataType: "json",
success: function (city) {
$('#EditCityName').val(city.CityName);
$('#EditCityId').val(city.CityId);
}
})
$('#UpdateCityButton').click(function () {
var model = {
CityName: $('#EditCityName').val(),
CityId: $('#EditCityId').val()
}
debugger;
$.ajax({
type: 'POST',
url: "/City/UpdateCity",
data: model,
dataType: "text",
success: function (city) {
$('#UpdateModel').modal('hide');
bootbox.alert("City updated");
window.setTimeout(function () { location.reload() }, 3000)
}
})
})
}
Controller
public bool UpdateCity(City model, long CurrentUserId)
{
try
{
var city = db.Cities.Where(x => x.CityId == model.CityId && x.IsActive == true).FirstOrDefault();
if (city == null) return false;
city.CityName = model.CityName;
city.UpdateBy = CurrentUserId;
city.UpdateOn = DateTime.UtcNow;
db.SaveChanges();
return true;
}
catch (Exception Ex)
{
return false;
}
}
A few stabs in the dark here but, try changing your code to the following (with comments).
Controller:
// !! This is a POST transaction from ajax
[HttpPost]
// !! This should return something to ajax call
public JsonResult UpdateCity(City model, long CurrentUserId)
{
try
{
var city = db.Cities.Where(x => x.CityId == model.CityId && x.IsActive == true).FirstOrDefault();
if (city == null) return false;
city.CityName = model.CityName;
city.UpdateBy = CurrentUserId;
city.UpdateOn = DateTime.UtcNow;
db.SaveChanges();
// !! Change return type to Json
return Json(true);
}
catch (Exception Ex)
{
// !! Change return type to Json
return Json(false);
}
}
Script:
function UpdateCity(Ids) {
//debugger;
var Id = { Id: Ids };
$('#UpdateModel').modal('show');
$.ajax({
type: 'GET',
url: "/City/GetCityDetail",
data: Id,
dataType: "json",
success: function (city) {
$('#EditCityName').val(city.CityName);
$('#EditCityId').val(city.CityId);
},
error: function () {
// !! Change this to something more suitable
alert("Error: /City/GetCityDetail");
}
});
$('#UpdateCityButton').click(function () {
var model = {
CityName: $('#EditCityName').val(),
CityId: $('#EditCityId').val()
};
//debugger;
$.ajax({
type: 'POST',
url: "/City/UpdateCity",
data: model,
// !! Change return type to Json (return type from Server)
dataType: "json",
success: function (city) {
// !! Check result from server
if (city) {
$('#UpdateModel').modal('hide');
bootbox.alert("City updated");
// !! Why reload location?
// window.setTimeout(function () { location.reload(); }, 3000);
} else{
// !! Change this to something more suitable
alert("Server Error: /City/UpdateCity");
}
},
error: function () {
// !! Change this to something more suitable
alert("Error: /City/UpdateCity");
}
});
});
}
This should give you some more clues as to what's going on.
I have an ajax call as follow
$.ajax({
datatype:'json',
url: 'http://localhost:9090/openidm/policy/managed/user/'+storeUserId,
type:'get',
xhrFields: {
withCredentials: true
} ,
corssDomain:true,
headers: {
"X-Requested-With":"XMLHttpRequest"
},
success: function (result){
var validations = result.properties[1].policies[1];
console.log(validations.policyFunction);
},
error:function (error){
console.log (error);
}
});
});
The above ajax call return the policyFunction as follow :
function (fullObject, value, params, property) {
var isRequired = _.find(this.failedPolicyRequirements, function (fpr) {
return fpr.policyRequirement === "REQUIRED";
}), isNonEmptyString = (typeof (value) === "string" && value.length), hasMinLength = isNonEmptyString ? (value.length >= params.minLength) : false;
if ((isRequired || isNonEmptyString) && !hasMinLength) {
return [{"policyRequirement":"MIN_LENGTH", "params":{"minLength":params.minLength}}];
}
return [];
}
i wanna to implement that function in my javascript file. Like passing parameters to that function. So how can i implement.
You can invoke it in the browser like so:
policyFunction = eval("(" + validations.policyFunction + ")");
failures = policyFunction.call({ failedPolicyRequirements: [] },
fullObject,
value,
params,
propertyName);
Where fullObject is the entire object, value is the value of the particular property, params are any parameters needed within the validation function, and propertyName is the name of the property.
I'm trying to fetch some urls from the back-end and assign data.Results in window.__env.{variable} so I can use it anywhere in the application.
I have this code
(function(window){
window.__env = window.__env || {};
$.ajax({
url: './assets/js/config/config.json',
method: 'GET',
success: function (data) {
let baseUrl = data.BaseApiUrl;
workflowDefinition(baseUrl);
}
})
function workflowDefinition(baseUrl) {
$.ajax({
url: baseUrl + 'api/Management/Configurations?name=SaveWorkflowDefinition&name=WorkflowDefinition',
method: 'GET',
success: function (data) {
if (data && data.Results && data.Results[0] && data.Results[0].Value) {
window.__env.saveWorkflowDefinition = data.Results[0].Value;
console.log(window.__env.saveWorkflowDefinition);
}
if (data && data.Results && data.Results[1].Value) {
window.__env.getWorkflowDefinition = data.Results[1].Value;
}
},
error: function (error) {
var errorMessage = "Failed to contact Workflow Server, please contact your IT administrator";
alert(errorMessage);
}
})
}
}(this))
I can see that the console.log is printing when this loads it gives me the right URL, then I tried passing window.__env.saveWorkflowDefinition to say another file xfunction.js where I want to use window.__env but it gives me undefined.
However if I pass it like this without ajax call, it works fine.
(function(window){
window.__env = window.__env || {};
window.__env.saveWorkflowDefinition= 'www.mybaseurl.com/api/Management/';
})
Can someone point out why its returning undefined when I pass it to xfunction.js when doing an ajax call?
Since your Ajax calls will only provide the response asynchronously, you cannot expect to have the response in the same synchronous execution context.
One idea to resolve this, is to abandon the idea to store the response in a global (window) property, but to store instead a promise, which you do get synchronously.
The code could look like this:
window.promiseWorkFlowDefinition = $.ajax({
url: './assets/js/config/config.json',
method: 'GET',
}).then(function (data) {
return $.ajax({
url: data.BaseApiUrl + 'api/Management/Configurations?'
+ 'name=SaveWorkflowDefinition&name=WorkflowDefinition',
method: 'GET',
})
}).then(function (data) {
return data && data.Results && (data.Results[0] && data.Results[0].Value
|| data.Results[1] && data.Results[1].Value)
|| ('No Results[0 or 1].Value found in:\n' + JSON.stringify(data));
}, function (error) {
var errorMessage =
"Failed to contact Workflow Server, please contact your IT administrator";
alert(errorMessage);
});
// Other file:
window.promiseWorkFlowDefinition.then(function(saveWorkflowDefinition) {
// Use saveWorkflowDefinition here. This is called asynchronously.
// ...
});
I'm trying to come up with a resource loader if you will, that will load many remote resources and then execute a final callback (like rendering a DOM based on the retrieve data from these requests).
Here's the function:
var ResourceLoader = function () {
this.requests = new Array();
this.FinalCallback;
this.Add = function (request) {
this.requests.push(request);
};
this.Execute = function() {
for (var x = 0; x < this.requests.length ; x++) {
var success = this.requests[x].success;
//if this is the last of the requests...
if (x == (this.requests.length - 1) && this.FinalCallback) {
$.when($.ajax({
url: this.requests[x].url,
dataType: 'json',
error: this.requests[x].error,
method: 'GET'
}).done(success)).then(this.FinalCallback);
}
else {
$.ajax({
url: this.requests[x].url,
dataType: 'json',
error: this.requests[x].error,
method: 'GET'
}).done(success);
}
}
};
};
And here's how I use it:
var apiUrl = Utilities.Api.GetWebApiUrl();
var loader = new Utilities.ResourceLoader();
loader.Add({
url: apiUrl + 'regions/get',
success: function (results) {
Filters.Regions = results;
}
});
loader.Add({
url: apiUrl + 'currentfactors/get/83167',
success: function (results) {
Filters.NbrEmployees = results;
}
});
loader.Add({
url: apiUrl + 'currentfactors/get/83095',
success: function (results) {
Filters.Industries = results;
}
});
loader.FinalCallback = RenderBody;
loader.Execute();
function RenderBody() {
console.log('render...');
}
Obviously, I'm expecting RenderBody to be executed last. But that's not what happening. What's ironic is that I remember doing something like that before, but lost the code... Looks like I'm having a brainfart here.
As you've tagged with promise - here's a really clean solution that uses Promise.all
this.Execute = function() {
Promise.all(this.requests.map(function(request) {
return $.ajax({
url: request.url,
dataType: 'json',
error: request.error,
method: 'GET'
}).done(request.success);
})).then(this.FinalCallback);
};
or ... using JQuery when
this.Execute = function() {
$.when.apply($, this.requests.map(function(request) {
return $.ajax({
url: request.url,
dataType: 'json',
error: request.error,
method: 'GET'
}).done(request.success);
})).then(this.FinalCallback);
};
Es6 Promise has solutions for your problem, there is no need to reinvent it unless the loading of resource groups is a specific goal to abstract. Set up a Promise object for each resource request, using the constructor to assign the resolve and reject callbacks appropriately for the XHR. Keep a collection (any Iterable will do) of individualPromise.then(individualCallback) results. Your final product is obtained by Promise.all(collectionOfPromises).then(finalCallback).
Hi;
when i'm using from jQuery ajax, the page getting to freeze until request end.
this is my JavaScript code:
function GetAboutContent(ID, from) {
var About = null;
if (from != true)
from = false;
$.ajax({
type: "POST",
url: "./ContentLoader.asmx/GetAboutContent",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({ 'ID': ID, 'from': from }),
async: true,
success: function (msg) {
var Result = msg.d.Result;
if (Result == 'session') {
warning('Your session has expired, please login again!');
setTimeout(function () {
window.location.href = "Login.aspx";
}, 4000);
return;
}
if (Result == 'failed' || Result == false) {
About = false;
return;
}
About = JSON.parse(msg.d.About)[0];
}
});
return About;
}
and this is my WebService
[WebMethod(EnableSession = true)]
public object GetAboutContent(int ID, bool from = false)
{
try
{
if (HttpContext.Current.Session["MahdParent"] != null ||
HttpContext.Current.Session["MahdTeacher"] != null ||
from)
{
functions = new GlobalFunctions();
DataTable queryResult = new DataTable();
queryResult = functions.DoReaderTextCommand("SELECT Field FROM TT WHERE ID = " + ID);
if (queryResult.Rows.Count != 0)
return new { Result = true, About = JsonConvert.SerializeObject(queryResult.Rows[0].Table) };
else
return new { Result = false };
}
else
return new { Result = "session" };
}
catch (Exception ex)
{
return new { Result = "failed", Message = ex.Message };
}
}
How can i solve that problem?
please help me
In the last line you try to return About. That cannot work due to the asynchronous nature of an AJAX request. The point at which you state return About doesn't exist any more when the success function of your AJAX request runs.
I assume you try do do somehting like this:
$('div#content').html(GetAboutContent());
In a procedural lantuage like PHP or Perl this works fine, yet JavaScript functions in a very different way. To make something like this work you'd do something like this:
$.ajax({
type: "post",
url: "./ContentLoader.asmx/GetAboutContent",
dataType: "json",
data: {
'ID': ID,
'from': from
},
success: function(result) {
$('div#content').html(result)
}
});
The difference between the two bits of code is that the first would expect JavaScript to know the value at the time you request it. However, your function GetAboutContent() doesn't have instant access to these data. Instead it fires up an AJAX request and ends right after that with the request still in progress for an unknown amount of time.
Once the request finishes successfully the data is available to JavaScript. and you can work with it in the callback function defined for success. By then the request has absolutely no connection to the function that started it. That's why it's asynchronous.