Override cached image in ajax response - javascript

I have an ajax response that is returning images that are cached. I can bust this cache with a random number generator, but having an issue applying it correctly to the returned URI.
The cached image has a URI coming from the response represented by "obj.entity.entries[property].uri" that looks like this:
http://xx.domain.com/api/v2/img/5550fdfe60b27c50d1def72d?location=SQUARE
The newly uploaded image needs to have the random number applied to it, so that it is appended to the end of the URI, right before the ?, like so:
http://xx.domain.com/api/v2/img/5550fdfe60b27c50d1def72d+6?location=SQUARE, where +6 is the randomly generated number.
I believe the best approach is to use a regex to look for the end of the URI before the ? and apply the var storing the random number, then reapply this new URI to the response. I have the following worked out, but not sure how to apply the regex correctly:
$('.image-search').on('click', function () {
var root = "http://localhost:7777/proxy/staging/rest/v1/cms/story/id/";
var encodeID = $("#imageid").val();
var bearerToken = localStorage.getItem('Authorization');
var imageCacheBust = Math.floor((Math.random() * 10) + 1);
//IF TESTING ON LOCALHOST
if (document.domain == 'localhost') {
url = root + encodeID + "/images";
} else {
//IF IN PRODUCTION
url = "/cropper/admin/cropv2/rest/v1/cms/story/id/" + encodeID + "/images";
//GRAB REFERRER URL FOR VIMOND ASSET
//SET VALUE SUCCEEDING ASSETS AS ASSET ID
var regexp = /assets\/(\d+)/;
var assetid = regexp.exec(window.document.referrer);
$("#imageid").val(assetid[1]);
};
$.ajax({
url: url,
method: 'GET',
headers: {
"Authorization": bearerToken
},
}).then(function (response) {
var obj = response;
var regexp = "REGEX HERE";
var imageURI = regexp.exec(obj.entity.entries[property].uri);
$("#imageid").css("border-color", "#ccc");
$(".search-results").empty();
for (var property in obj.entity.entries) {
if (obj.entity.entries.hasOwnProperty(property)) {
$(".search-results").append($("<li><a href='" + imageURI + "' target='_blank'><div class='thumbnail'><img width='30' height='30' src='" + imageURI + "' target='_blank'/></img><div class='caption'><p>" + obj.entity.entries[property].orientation + "</p></div></a></li>"));
}
}
}).fail(function (data) {
$(".search-results").empty();
$(".search-results").append("<p class='alert alert-danger'>Invalid ID</p>");
$("#imageid").css("border-color", "red");
});
});

You don't need to add your random digits to the file path part of the URL, just append to the URL parameters instead, that is enough to prevent caching.
For example use:
img/5550fdfe60b27c50d1def72d?location=SQUARE&6
Where the 6 is your randomly generated value.
Also, be aware that a randomly generated number might not be the best choice here, since it might be undesirably duplicated. Consider using a hash or timestamp instead of a purely random number.

The solution ended up being fairly simple:
I set var imageCacheBust = Math.random(); and then used it in the returned URI like so: var imageURI = obj.entity.entries[property].uri + "?" + imageCacheBust;

Related

Can sql queries vary by coulmns?

I'm trying to allow users to add routes to points on a leaflet map, using sql queries to a database of points. Because I want each point to have more than one route that passes through it, I added additional columns: "route2", "routenumber2" till "route5", "routenumber5" to the original "route" and "routenumber".
The following code does work, but I figured it's repetitive to write it out five times, each time only with a different set of columns.
if (e.target && e.target.id == "submitrest") {
const enteredRoute = document.getElementById("input_Route").value; // from user form input
const enteredNumber = document.getElementById("input_routenumber").value;
const enteredNickname = document.getElementById("input_nick").value;
const enteredID = document.getElementById("input_cartodb_id").value;
cartoData.eachLayer(function (layer) {
// SQL to put layer in -- Building the SQL query
let sql =
"UPDATE stops " +
"SET area = '" + enteredRoute + "', " +
"route_number = '" + enteredNumber + "', " +
"nickname = '" + enteredNickname + "' " +
"WHERE cartodb_id = " + enteredID + ";"
console.log(sql);
if (enteredRoute && enteredNickname && enteredNumber && enteredID) {
fetch(url1, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "q=" + encodeURI(sql)
})
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log("Data saved:", data);
})
What I am asking is if, like how document.getElementById allows the user to input different data each time and send the data using the same code, there is a less repetitive way to make an sql query function that allows me to put the data into "route3" and "routenumber3" if "route2" and "routenumber2" are already full, and so on.
What I would like is a row in CartoDB to have five sets/columns routes and routenumbers that a user can input data to, preferably with less duplicated code.
So far I've tried using Javascript class constructors and the Factory Method. Can I get these to allow the the columns specified in the sql query to be variable? Thank you

How to store text box value to be passed to getJson request as query parameter

I need to be able to store the text value of a search box term, which can be used as a query parameter in a getJson request. I'm appending the search term to the end of the url the user is taken to after hitting the enter key, but the issue is that on the location replacement, it shows up as an error because the url for the page is /faq/search-results/.
$(".faq-search").keyup(function(e){
if(e.which == 13) {
window.location.replace("/faq/search-results/" + $(".faq-search").text());
}
});
Once the user has been sent to the search results page, I have a script which, if the user is on that url, is supposed to grab the search term from the pathname in the url, and submit it as a query parameter to the getJson request:
if(window.location.pathname == "/faq/search-results/"){
$("document").ready(function(e) {
var url = window.location.pathname;
var exp = url.split(/^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/);
var question = exp[5].split("/")[3];
$.getJSON("//search.url-to-search.com?q=" + question + "&results_type=faq", {
},
//Get results and make 'em look good
function(data) {
console.log(data);
$.each(data.data, function(i, data) {
if(data.type === "FAQ"){
$(".faq-results").append("<li class='result-item'><h3>" + data.title + "</h3><p class=\"content\">" + data.text + "</p><p class=\"category\">" + data.type + "</p></li>");
}
});
});
});
}
I believe the issue is that it won't fire off the request because its looking for only /faq/search-results/. I think I need a way to store the search term as a variable and pass it as a query parameter, but not sure how to accomplish this, as I believe it would make the variable out of scope.
A couple of things are wrong in your code:
first to collect the input value use .val() note text().
Secondly you are not passing the input value as a query string you are adding it to the url path /helloWorld. I think it is better to add as a query string ?q=helloworld.
I have therefore adjusted your code, removed your code to extract the text from the path and implemented a function to extract a named query param, this function is called getParameterByName.
The code below should be pretty much self explanatory.
$("document").ready(function(e) {
//
// Collects the input param as passes it as a query string note
// ?q= our string
//
$(".faq-search").keyup(function(e) {
if (e.which == 13) {
window.location.assign("file:///C:/Users/spydre/Desktop/text.html?q=" + $(".faq-search").val());
}
});
// snippet gets a query param from url
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// collect any query string param whos name is q
var question = getParameterByName("q");
if (question) {
// pass question to our getJson
$.getJSON("//search.url-to-search.com?q=" + question + "&results_type=faq", {},
//Get results and make 'em look good
function(data) {
console.log(data);
$.each(data.data, function(i, data) {
if (data.type === "FAQ") {
$(".faq-results").append("<li class='result-item'><h3>" + data.title + "</h3><p class=\"content\">" + data.text + "</p><p class=\"category\">" + data.type + "</p></li>");
}
});
});
} //if question
})

How to disable certain HTTP methods (e.g. POST) for PersistedModel in LoopBack framework

When you create model in LoopBack framework, you can inherit from PersistedModel class. This way all the HTTP methods are generated. I am wondering how can I disable certain HTTP methods?
One option is to override functions from PersistedModel with empty logic, but want method to disappear from Swagger API explorer.
I did below in model.js files like below. This makes table readonly.
module.exports = function(model) {
var methodNames = ['create', 'upsert', 'deleteById','updateAll',
'updateAttributes','createChangeStream','replace','replaceById',
'upsertWithWhere','replaceOrCreate'
];
methodNames.forEach(function(methodName) {
disableMethods(model,methodName)
});
}
function disableMethods(model,methodName)
{
if(methodName!='updateAttributes')
model.disableRemoteMethod(methodName, true);
else
model.disableRemoteMethod(methodName, false);
}
The only thing which requires additional care is disabling of custom model methods (like User.login). You need to call disableRemoteMethod before explorer middleware: https://github.com/strongloop/loopback/issues/686
An update on Santhosh Hirekerur answer to make it hide everything on LB3, stop using the deprecated Model.disableRemoteMethod method and also a more intelligent way to hide updateAttributes and any other future methods that may work the same.
I check to see if the method is on the prototype and if it is, prefix the name with prototype. before we disableRemoteMethodByName:
module.exports = function (model) {
var methodNames = [
'create',
'upsert',
'deleteById',
'updateAll',
'updateAttributes',
'patchAttributes',
'createChangeStream',
'findOne',
'find',
'findById',
'count',
'exists',
'replace',
'replaceById',
'upsertWithWhere',
'replaceOrCreate'
];
methodNames.forEach(function (methodName) {
if (!!model.prototype[methodName]) {
model.disableRemoteMethodByName('prototype.' + methodName);
} else {
model.disableRemoteMethodByName(methodName);
}
});
}
I put the above code in server/middleware/disable-methods.js and call it from a model like so:
var disableMethods = require('../../server/middleware/disable-methods');
module.exports = function (Model) {
disableMethods(Model);
}
Found answer in documentation.
For example this disables PersistedModel.deleteById:
var isStatic = true;
MyModel.disableRemoteMethod('deleteById', isStatic);
So it looks like you it's not possible to disable all DELETE actions at the same time. For example method PersistedModel.deleteAll remains accessible in given example.
Developer must disable each relevant method from PersistedModel class explicitly.
Relevant docs are here
Sections:
Hiding methods and REST endpoints
Hiding endpoints for related models
In case of loopback 3
I had the same problem.
My first solution was to manually update the "public":true items in server/model-configuration.json but it was overridden anytime I used the Swagger tool to refresh the LoopBack API (with slc loopback:swagger myswaggerfilename command from the project root).
I finally wrote a Grunt task as a reliable workaround.
Run it just after a slc loopback:swagger generation or just before running the API live.
you just have to specify the names of the paths I want to expose in the javascript array list_of_REST_path_to_EXPOSE
and make sure you are happy with the backup folder for the original /server/model-config.json file.
I wanted to share it with you in case:
https://github.com/FranckVE/grunt-task-unexpose-rest-path-loopback-swagger
Basically:
module.exports = function (grunt) {
grunt.registerTask('unexpose_rest_path_for_swagger_models_v1', function (key, value) {
try {
// Change the list below depending on your API project :
// list of the REST paths to leave Exposed
var list_of_REST_path_to_EXPOSE =
[
"swagger_example-api_v1",
"write_here_the_paths_you_want_to_leave_exposed"
];
// Location of a bakup folder for modified model-config.json (change this according to your specific needs):
var backup_folder = "grunt-play-field/backups-model-config/";
var src_folder = "server/";
var dest_folder = "server/";
var src_file_extension = ".json";
var src_file_root_name = "model-config";
var src_filename = src_file_root_name + src_file_extension;
var dest_filename = src_file_root_name + src_file_extension;
var src = src_folder + src_filename;
var dest = dest_folder + dest_filename;
var free_backup_file = "";
if (!grunt.file.exists(src)) {
grunt.log.error("file " + src + " not found");
throw grunt.util.error("Source file 'model-config.json' does NOT exists in folder '" + src_folder + "'");
}
// timestamp for the backup file of model-config.json
var dateFormat = require('dateformat');
var now = new Date();
var ts = dateFormat(now, "yyyy-mm-dd_hh-MM-ss");
// backup model-config.json
var root_file_backup = src_file_root_name + "_bkp" + "_";
var root_backup = backup_folder + root_file_backup;
free_backup_file = root_backup + ts + src_file_extension;
if (!grunt.file.exists(root_file_backup + "*.*", backup_folder)) {
//var original_file = grunt.file.read(src);
grunt.file.write(free_backup_file, "// backup of " + src + " as of " + ts + "\n");
//grunt.file.write(free_backup_file, original_file);
grunt.log.write("Creating BACKUP"['green'] + " of '" + src + "' " + "to file : "['green'] + free_backup_file + " ").ok();
} else {
grunt.log.write("NO BACKUP created"['red'] + " of '" + src + "' " + "because file : " + free_backup_file + " ALREADY EXISTS ! "['red']).error();
throw grunt.util.error("Destination backup file already exists");
}
// load model-config.json
var project = grunt.file.readJSON(src);//get file as json object
// make modifications in model-config.json
for (var rest_path in project) {
if (rest_path.charAt(0) === "_") {
grunt.log.write("SKIPPING"['blue'] + " the JSON item '" + rest_path + "' belonging to the " + "SYSTEM"['blue'] + ". ").ok();
continue; // skip first level items that are system-related
}
if (list_of_REST_path_to_EXPOSE.indexOf(rest_path) > -1) { //
project[rest_path]["public"] = true;
grunt.log.write("KEEPING"['green'] + " the REST path '" + rest_path + "' " + "EXPOSED"['green'] + ". ").ok();
} else {
project[rest_path]["public"] = false;
grunt.log.writeln("HIDING"['yellow'] + " REST path '" + rest_path + "' : it will " + "NOT"['yellow'] + " be exposed.");
}
}
}
I wanted to hide the PATCH method, but when I was trying to hide it also I got to hide the PUT method , I was using this line :
Equipment.disableRemoteMethod('updateAttributes', false);
but later I found a way to only hide the PATCH method, this line works perfect for me.
Equipment.sharedClass.find('updateAttributes', false).http = [{verb: 'put', path: '/'}];
The above line overrides the original http that updateAttributes method had.
[{verb: 'put', path: '/'}, {verb: 'patch', path: '/'}]

Cache each JSON search query with localStorage

THE PROMPT: We have a search that connects to an JSON API url. The search query is inside the url, and the API generates a new JSON file for every search term. We also cannot rely on the browser to cache for us, and we can't use PHP or server side caching; we need to use HTML5 LocalStorage (and we don't care that IE7 can't use it)
We need to cache every new JSON file for every new search. We want to cut down on requests per minute, so we want to use a cached version of the JSON file for repeated search terms.
WHERE I'M STUCK: What has made this difficult is caching a JSON file for each new/different search term. I have been able to cache the first search, but then all subsequent searches use the same cached JSON.
We need help rewriting this so each time a new search is made, it checks to see if the term was searched for previously and if so, grabs the corresponding JSON file. Then of course if the search term is new then cache a new JSON file for that specific search term.
WHAT I'VE TRIED: In my research I've seen a lot of very complicated solutions and I can't seem to get my head completely around all of it, some of these solutions almost worked, I think I just need a better explanation for this specific case.
I think this is the answer but I don't know how to apply it to my situation: jQuery deferred ajax cache
This is crazy and it almost works, it writes into the console when it recognizes that I've searched the same thing again, and it does stop a new request, but unfortunately the cached JSON isn't there, it returns no results.
Caching a jquery ajax response in javascript/browser
WHAT I HAVE SO FAR:
MY PSUEDO CODE:
var searchTerm = WHATEVER IS TYPED INTO THE SEARCHBOX
// The JSON file
var url = 'https://api.example.com/fake/json/path/{'+searchTerm+'}';
// Local Storage Caching Promise
var cachedData = localStorage.getItem("cachedData"),
def = $.Deferred();
if (!cachedData) {
def = $.getJSON(url, function(data) {
cachedData = data;
localStorage.setItem("cachedData", JSON.stringify(cachedData));
});
}
else{
cachedData = JSON.parse(cachedData);
def.resolve();
}
def.done(function() {
var resultHTML = '';
for(var i = 0; i < Object.keys(cachedData.things).length; i++){
$.each(cachedData, function(index, node){
resultHTML += '<li>'
resultHTML += '<h1>' + node[i].name + '</h1>';
resultHTML += '</li>';
});
}
$('div#results').html(resultHTML);
});
EXAMPLE JSON:
{
"things": [
{
"type": "thing",
"username": "randoguy",
"name": "name001",
},
{
"type": "thing2",
"username": "randoguy2",
"name": "name002",
},
...
Thank you #Ian for providing the hints to my answer!
var searchTerm = WHATEVER IS TYPED INTO THE SEARCHBOX;
// The JSON file
var url = 'https://api.example.com/fake/json/path/{'+searchTerm+'}';
// BABAM! Right here, SearchTerm + "-cachedData" gets unique cached data
var cachedData = localStorage.getItem(searchTerm + "-cachedData"),
def = $.Deferred();
if (!cachedData) {
def = $.getJSON(url, function(data) {
cachedData = data;
// BABAM! And here is where the unique cachedData is set! SearchTerm + "-cachedData"
localStorage.setItem(searchTerm + "-cachedData", JSON.stringify(cachedData));
});
}
else{
cachedData = JSON.parse(cachedData);
def.resolve(cachedData);
}
def.done(function(data) {
var resultHTML = '';
for(var i = 0; i < Object.keys(data.repositories).length; i++){
$.each(data, function(index, node){
resultHTML += '<li>'
resultHTML += '<h1>' + node[i].name + '</h1>';
resultHTML += '<p>' + node[i].owner + '</p>';
resultHTML += '</li>';
});
}
$('div#results').html(resultHTML);
});
Where would I be without StackOverflow. Thank you all!

Twitter OAuth1.0A Javascript Error

I'm currently working on incorporating an authorization feature for Twitter following the approach described here: https://dev.twitter.com/docs/auth/implementing-sign-twitter. I'm using Ajax to send my POST 'http' request, but I've been constantly running into a '401: Unauthorized' error. My code is below:
function getTweets() {
var time = generateTimestamp();
var nonce = generateNonce();
var signature = generateSignature(time, nonce);
var headers = {
"Authorization": 'OAuth oauth_callback="http%3A%2F%2Fwww.google.com%2F", oauth_consumer_key="eEeAAz9fakedtAOlIUhPgQ", oauth_nonce="bbc34b2ca6faabogus6dfc025907fa334", oauth_signature="' + signature + '", oauth_signature_method="HMAC-SHA1", oauth_timestamp="' + time + '", oauth_version="1.0"'
};
$.ajax({
type: "POST",
url: "https://api.twitter.com/oauth/request_token",
dataType: "text",
headers: headers,
success: function(data) {
alert("Success!");
console.log(data);
},
error: function(jq) {
alert("Request Failed.");
console.log(jq.statusText);
}
});
}
function generateTimestamp() {
var currentTime = new Date;
currentTime = Math.floor(currentTime.getTime() / 1000);
return currentTime;
}
function generateNonce() {
var code = "";
for (var i = 0; i < 20; i++) {
code += Math.floor(Math.random() * 9).toString();
}
return code;
}
function generateSignature(timestamp, nonce) {
var http_method = "POST";
var base_url = "https://api.twitter.com/oauth/request_token";
var consumer_key = "eEeAAz9hUKtdjunkeIUhPgQ";
var consumer_secret = "c7wHxnjubxVDcc5hYFqnotactuallymysecretWs2XazUFde0lPRBtBQ";
var signature_method = "HMAC-SHA1";
var token = "609493744-kNPzLKSI4Hg9NWQnopeFPb91eXFUutFm1nZ2hDk2";
var token_secret = "15WOJS9Ji1AXsKRkyAZrxKdsalted5Gj5ZyEAb9aVrJxI";
var version = "1.0";
var parameter_string = "oauth_callback=" + encodeURIComponent(base_url) + "&oauth_consumer_key=" + consumer_key + "&oauth_nonce=" + nonce + "&oauth_consumer_key=" + consumer_key + "&oauth_signature_method=" + signature_method + "&oauth_timestamp=" + timestamp +"&oauth_version=" + version;
var base_string = http_method + "&" + encodeURIComponent(base_url) + "&" + encodeURIComponent(parameter_string);
var signing_key = encodeURIComponent(consumer_secret) + "&";
var signature = encodeURIComponent(window.btoa(CryptoJS.HmacSHA1(base_string, signing_key)));
alert(signature);
return signature;
}
Feel free to post below if there's any other information that would make this error clearer. Thanks.
I created a node.js library to mess around with the Twitter OAuth dance and API. Code is here, tweeter.js
You're welcome to walk through the logic for creating the header and signature (starting at line 348 )
One thing I don't see in the code you've posted and which will make a huge difference is that the signature string must be generated to include the original header, then the header must be rebuilt with the generated string. It's a huge pain and it took me a while to figure it out.
Although the code I wrote is geared toward node.js, you should be able to reuse a lot of the logic to meet your needs.
EDIT
I found a site called hueniverse documented OAuth very well. In fact, there is a utility here to build your own headers for validating your logic (select the 'Create your own' radio button).
EDIT 2
To better explain including the oauth_signature value in the header, suppose you have all of the data up to this point:
var headerObj = {
oauth_consumer_key="123456789",
oauth_token="11111",
oauth_nonce="asdfghjkl%3B",
oauth_timestamp="1341852000",
oauth_signature_method="HMAC-SHA1",
oauth_version="1.0"
};
You create the HMAC-SHA1 signature and receive: "jBpoONisOt5kFYOrQ5fHCSZBGkI%3D"
You would then add that return value to headerObj, giving you:
headerObj = {
oauth_consumer_key="123456789",
oauth_token="11111",
oauth_nonce="asdfghjkl%3B",
oauth_timestamp="1341852000",
oauth_signature_method="HMAC-SHA1",
oauth_version="1.0",
oauth_signature="jBpoONisOt5kFYOrQ5fHCSZBGkI%3D"
};
And this modified version of headerObj is what you build your HTTP headers from.
GET / HTTP/1.1
Host: api.twitter.com:443
Authorization: OAuth realm="https://api.twitter.com/",
oauth_consumer_key="123456789",
oauth_token="11111",
oauth_nonce="asdfghjkl%3B",
oauth_timestamp="1341852000",
oauth_signature_method="HMAC-SHA1",
oauth_version="1.0",
oauth_signature="jBpoONisOt5kFYOrQ5fHCSZBGkI%3D"
NOTE: I didn't verify the host/realm/port, so these are probably wrong. Check the API for those.
The reason this is done is that on Twitter's side (this is an OAuth implementation detail), the oauth_signature value is removed and the rest of the header is hashed and its return value is compared to the value sent in oauth_signature. It's sort of like a wax seal on an envelope... if the hash of the rest of the header doesn't match the hash value you sent in oauth_signature, Twitter knows not to trust the sender or the contents.
EDIT 2.5
I'm moving this from the comment to the answer.
If you check out this line in tweeter.js, you'll see the logic.
var signature = self.oauthSignature(method, path, headerObj, query);
headerObj.oauth_signature = qs.escape(signature);
// concat the header object into a csv string
var header = 'OAuth realm="Twitter API",';
var oauthParts = [];
for (var h in headerObj) {
oauthParts.push(h + '="'+headerObj[h]+'"');
}
header+= oauthParts.join(',');
//...
return header;
This bit of code does as I've explained in EDIT 2, by converting a JSON object into key="value" strings stored in oauthParts[], then joins each element in that array into a single comma-separated string which begins with OAuth realm="Twitter API",

Categories

Resources