I'm working with some government data published via Socrata's SODA api.
This API provides a way to retrieve rows via a REST call. The API allows limited parameterization of the query - basically you can do a full text search, and nothing else. I cannot find a way to shape the data returned - for example only return certain columns of the data.
As a result, basically I can only get all rows and all columns of each data view. This is ok, I guess, but I'd like to cache it - memoize it to use the underscore term.
Is there a pattern for memoization of ajax calls with jQuery?
EDIT: To give you an idea of what I'm talking about, here's what I'm doing currently.
function onclick(event) {
var $t = $(event.currentTarget);
var itemId = $t.attr('data-itemid');
var url = getRestUrl(itemId);
if (typeof datacache[itemId] === "undefined") {
$.ajax({
url : url,
cache : true,
type : "GET",
dataType : "json",
error : function(xhr,status,error) {
raiseError(error);
},
success : function(response, arg2, xhr) {
datacache[itemId] = response;
doSomethingWithTheData(url, itemId);
}});
}
else {
doSomethingWithTheData(url, itemId);
}
}
// then, doSomethingWithTheData() simply references datacache[itemId]
This seems like it's faster though I haven't measured it. What I really want to know is, is there a common pattern that does something like this, that I can employ, so that everyone who reads the code will immediately see what I'm doing??
You might be able to do something like is done with autocomplete lookups (this is very much from memory, but you'll get the idea):
var searchCache = {}, searchXhr = null;
function Search(term) {
if (term in searchCache) {
return doSomethingWithTheData(searchCache[term]);
}
if (searchXhr != null) {
searchXhr.abort();
}
searchXhr = $.ajax({
url : url,
cache : true,
type : "GET",
dataType : "json",
error : function(xhr, status, error) {
raiseError(error);
},
success : function(response, arg2, xhr) {
searchCache[term] = response;
if (xhr == searchXhr) {
doSomethingWithTheData(response);
searchXhr = null;
}
}
});
}
I'm not necessarily the best expert for Javascript question, but I might be able to help you with your use of SODA.
If you're looking for more flexibility in your queries, and you can do an HTTP POST, you could look at using our query syntax to do a more targeted query: http://dev.socrata.com/querying-datasets. Our query syntax is fairly complex, but I can help you figure out how to structure your query if you hit any snags.
Unfortunately, since that'd require a POST, you'll need to break out of the XHR cross-domain lockbox by going through a proxy or something similar.
Also, FYI, we're working on a whole new syntax that'll allow you to specify queries as URL parameters, so you'll be able to perform simple requests such as /resources/agencies?acronym=CIA or /resources/agencies?$where='budget > 10000000'. It should be pretty awesome.
You would only cache ajax requests that you know won't change, like the Facebook SDF for example. It seems like in your example, you're requesting something UI related that might be inappropriate to cache? Otherwise, you might try something like this:
var store = {};
/**
* Memoized $.getScript
*
* Cache one script response per url
* Reference, see http://msdn.microsoft.com/en-us/magazine/gg723713.aspx
*
* #example $.memoizedGetScript( url ).then( successCallback, errorCallback );
* #param {String} url
* #param {Function} callback (optional)
* #returns {*}
*/
$.memoizedGetScript = function(url, callback) {
var callback = callback || {};
store.cachedScripts = {};
if (!store.cachedScripts[url]) {
store.cachedScripts[url] = $.Deferred(function(d) {
$.getScript(url).then(
d.resolve(),
d.reject()
);
}).promise();
}
return store.cachedScripts[url].done(callback);
};
Related
I'm learning JS & keep running into the problem of how to put documentation together to do this or that. e.g. Greasemonkey is documented, but you have to know a lot of other context not even referred to to use the greasepot wiki very well.
I've been trying various combinations of the following, for example, and I can only ever get "undefined" from the GM_xmhttprequest function, though:
var url = "https://en.wikipedia.org/wiki/CURL?action=render";
var fetchContent = console.log( function getContent(url) {
if (url.length < 0) {
return 0 ;
}
GM_xmlhttpRequest({
method: "GET",
url: url,
headers: {
"User-Agent": "Mozilla/5.0", // If not specified, navigator.userAgent will be used.
//"Accept": "text/xml" // If not specified, browser defaults will be used.
},
onload: function(response) {
//var responseXML = null;
alert(response.responseText);
// Inject responseXML into existing Object (only appropriate for XML content).
/*
if (!response.responseXML) {
responseXML = new DOMParser()
.parseFromString(response.responseText, "text/xml");
}
GM_log([
response.status,
response.statusText,
response.readyState,
response.responseHeaders,
response.responseText,
response.finalUrl,
responseXML
].join("\n"));
*/
}
});
} )
Yet I'm not sure I'm using it correctly:
Need to define something in 'onload'??
Need to create a var prior? (e.g. var responseHoldingObject = new Object(); ?) ?
etc.
And any advice to get the page-fetching I'm looking for going is appreciated. Goal is to fetch content and ultimately append it within another page (e.g. such as within textarea or div).
Learning JS with GreaseMonkey might be a bit advanced.
fetchContent will be assigned the return value of console.log, which is undefined because console.log does not return a value. And what you're logging is the function getContent itself. getContent is never evaluated.
Finally, you can never get a response from an asynchronous function to use outside of the callback reliably (except with polling). Basically it should be something like this (untested):
GM_xmlhttpRequest({
method: "GET",
url: url,
headers: {
"User-Agent": "Mozilla/5.0", // If not specified, navigator.userAgent will be used.
//"Accept": "text/xml" // If not specified, browser defaults will be used.
},
onload: function(response) {
/* use response here */
}
});
/* can't use response here */
without the fetchContent = console.log thing.
Hi I've been trying to clarify this but there's something I'm still confused about. I know that you can't return values from asynchronous functions so I've referenced this answer's top answer Returning value from asynchronous JavaScript method?
What I'm trying to do is use the flickrAPI to get the biggest size image. The flickrAPI allows one to search images, so I use this to get the photo_id, then I use this photo_id to procses another request to the API's getSize method to get the URL for the biggest size photo.
The code looks a little messy as it is, because I have a method called flickrRequest which sends an XMLHttp request and gets back a JSON string. I know that I can achieve what I want by writing the functions as follows:
function flickRQforimage() {
...got ID
function flickrRQforSize() {
...got maxsizeURL
create image based on maxsizeURL here
}
}
but I was wondering if it was possible to do something like this
function flickRQforimage() {
...got ID
function flickrRQforSize() {
...got maxsizeURL
}
create image based on maxsizeURL here
}
or even create image based on maxsizeURL here
In general my question is whether it is possible to have a callback function that references another statically defined function (I think?). The specifics of the my function is that it takes a callback and the ID and URL processing happens in those callbacks:
flickrRQ(options, cb)
I am wondering whether/what would happen if that unnamed function is instead something else, say flickrRQ(options, processPhoto(data)), and then I define the function in a separate method. This just makes sense for me because I want to keep functionality for the URL processing separate in an attempt to make my code cleaner and more readable.
I tried the following below and it didn't work. Nothing prints. I even have a console.log in the processPhoto method. In fact anything inside of the flickrRQforSize method seems to not evaluate
flickrRQforSize(options, function(data) {
processPhoto(data)
}
even though in the flickrRQforSize definition, a callback function is taken as an argument. I'm suspecting there must be something about functions/async calls that I don't understand.
I hope this is clear -- if not, I can post my actual code.
Here's my code:
var flickrRequest = function(options, xhrRQ, cb) {
var url, xhr, item, first;
url = "https://api.flickr.com/services/rest/";
first = true;
for (item in options) {
if (options.hasOwnProperty(item)) {
url += (first ? "?" : "&") + item + "=" + options[item];
//parses to search equest;
first = false;
}
}
//XMLHttpRQ to flickr
if(xhrRQ == 1 ) {
xhr = new XMLHttpRequest();
xhr.onload = function() { cb(this.response); };
xhr.open('get', url, true);
xhr.send();
};
}
var processPhotoSize = function(photoJSON) {
var parsedJSON = JSON.parse(data);
var last = parsedJSON.sizes.size.length;
console.log(parsedJSON.sizes.size[last-1].source);
return parsedJSON.sizes.size[last-1].source;
}
...
flickrRequest(options, 1, function(data) {
...
flickrRequest(sizesOptions, 0, function(data) {
parsedJSON = JSON.parse(data);
console.log(parsedJSON);
processPhotoSize(data);
});
}
I know this is a long shot, but I'm trying to make a POST with AJAX within the Javascript tool in HPSM. It's got very limited debugging capabilities so I'm stuck where it should be simple (or so I thought). From the syntax I've seen in other articles, calling that AJAX function should be right, but it doesn't seem to want to take it.
Thanks for any help
Here is the code I'm calling, and using jQuery library v1.11.2
var JSONdata = {
"eId": "xxx111",
"deviceToken": "111111111111",
"deviceType": "iphone",
"applicationName": "huds"
};
system.library.jQuery.ajax({
type: "POST",
url: 'http://place:11400/location/collaboration/notifications/register/',
data: JSONdata,
dataType: "json",
cache: false,
crossDomain: true,
processData: true,
success: function (data) {
alert(JSON.stringify(data));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error");
}
});
errors
Process panel calc.javascript in RAD format.cjavascript encountered error in line 5 (format.cjavascript,calc.javascript)
Cannot evaluate expression (format.cjavascript,calc.javascript)
Cannot evaluate expression (format.cjavascript,calc.javascript)
Cannot evaluate expression (format.cjavascript,calc.javascript)
Cannot evaluate expression (format.cjavascript,calc.javascript)
Script <UNKNOWN> line 20: ERROR TypeError: system.library.jQuery.ajax is not a function at char 1
Script 'jQuery' line 925: ERROR TypeError: document has no properties at char 1
Unrecoverable error in application: se.call.process on panel call.rad.1
Unrecoverable error in application: cm.update.save on panel call.master.upd
Unrecoverable error in application: format.cjavascript on panel calc.javascript
I'm assuming you have a ScriptLibrary called jQuery in your HPSM, right?
Try with
lib.jQuery.ajax(...
instead of system.library, regards.
not sure if you have imported the jQuery as a ScriptLibrary, but I think it will not work, because the code inside the jQuery Library includes some lines of code which are not valid for the HPSM.
Anyway...
To call an external external RESTful Service, you can use the doHTTPRequest() function in your ScriptLibrary.
What it is, what parameters are needed etc. can be found in the Programming Guide:
http://86.48.81.222:6080/classic/Content/Resources/PDF/sm_programming_guide.pdf
See Page 266 ...
Here an short example how it should work (it calls the REST API from the HPSM to create a new incident:
var objConfig = {
"url" : "http://place:11400",
"path" : "/location/collaboration/notifications/register/",
"connect_timeout" : 30,
"read_timeout" : 30
};
var objPostData = {
"eId": "xxx111",
"deviceToken": "111111111111",
"deviceType": "iphone",
"applicationName": "huds"
};
createRecord( objPostData );
/**
* Create a new Incident with the RESTful API
*
* #param {Object} objRecord Object with all required fields
*
*/
function createRecord( objRecord ) {
var JSON = system.library.JSON.json();
var arrHeaders = [];
//Content Type application/json is required
//otherwise we will get an 501 error
var typeHeader = new Header();
typeHeader.name = "content-type";
typeHeader.value = "application/json";
var arrHeaders = new Array();
arrHeaders.push(typeHeader);
//build url for the request
//Default Action for POST is "create" so we don't need
//to add the action again
var cRequestUrl = objConfig.url+objConfig.path;
//convert the given object to an json string
cPostBody = system.library.JSON2.toJSON(objRecord);
try {
//lets run the the HTTP request
//HTTP Command - url to execute - http header - POST Body
var rcRequest = doHTTPRequest( "POST", cRequestUrl, arrHeaders, cPostBody, objConfig.connect_timeout, objConfig.read_timeout );
//convert response json string back to an object
var objResponse = JSON.parse(rcRequest);
print( objResponse.toSource() );
} catch( e ) {
//something goes wrong
//check also http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html
//to get the description of the given http response code like 401 etc.
//currently it's not possible (or i don't know how) to get the correct
//error response - for me it looks like that the HPSM has an filter
//which removes the response body if the response header is not 200
//if it's possible to use the reponse, we can use the same code
//as above JSON.parse() etc.
print("ERROR: \n"+e);
}
}
INFO1: Currently there is a limitation in the doHTTPRequest.
It can't handle the catch case correctly.
So even when there is an error, you will get the response as string.
And not the Object or whatever the response is.
INFO2: This example is based on my example to call the internal incident api.
I have modified it to your given data.
Code was created and tested successfully with HPSM 9.3+.
Hope this helps.
Greets
Marcus
I know that similar questions have been posted many times, however I've read many of them and can't find an answer to my problem.
I have a function that waits for an ajax request response. Many of you will ask why? Well, I'm using a Wizard Jquery Plugin which executes a function onLeaveAStepFunction when a step is left, then the wizard goes to the selected step if the return value from onLeaveAStepFunction is true; else it remains in the same step.
I'm doing this async: false for waiting and it works, but this is a bad design. Also, I can't use a blockUI plugin.
How can I do this?
Some code:
Initializing the wizard:
$("#wizard").smartWizard({
onLeaveStep : onLeaveStepFunction,
});
Calling the ajax request:
function onLeaveStepCallback(obj, context) {
nextStep = sendForm();
}
The ajax request:
var nextStep = false;
$.ajax({
url : path,
type : "POST",
async : false,
data : $("#" + idForm).serialize(),
success : function(data) {
$("#" + idDiv).html(data);
nextStep = !$("#" + idHiddenErrores).val())
}
});
Omitting the attributes. Please help me.
You could use the jQuery wait method. I took an example from docs page to highlight how you'd do it:
$.when( $.ajax( "/request.php" ) ).done(function( response ) {
// response argument resolved from ajax requests
// process any work after ajax call finishes
}
A link to docs page:
http://api.jquery.com/jquery.when/
I'm doing this async: false for waiting and it works, but this is a bad design also I can't use a blockUI plugin.
Unless your wizard is better designed and supports async callbacks (e.g., promise-returning ones), async:false is your only choice.
Consider switching to a different wizard, and don't forget to file a bug for the plugin that you're currently using.
One hackish work-around is to do it before leaveStep. Perhaps on showStep:
var wizard_next_step;
$("#wizard").smartWizard({
onShowStep : function (obj, context) {
onLeaveStepFunction(obj, context, function(nextStep){
wizard_next_step = nextStep;
});
},
onLeaveStep : function () {
return wizard_next_step;
}
});
You'd also need to modify your onLeaveStepFunction to accept a callback:
function onLeaveStepCallback(obj, context, callback) {
nextStep = sendForm(callback);
}
And your ajax function should then be:
$.ajax({
url : path,
type : "POST",
async : false,
data : $("#" + idForm).serialize(),
success : function(data) {
$("#" + idDiv).html(data);
callback( !$("#" + idHiddenErrores).val()) );
}
});
Now, it looks like you're drawing into the wizard window with this:
$("#" + idDiv).html(data);
I'm entirely sure if this is the case. But if it is then you cannot do this here (obviously because it's onShowStep which would overwrite current content). If this is so you should pass the data in the callback:
success : function(data) {
callback( data , !$("#" + idHiddenErrores).val()) );
}
Write the wizard like this:
var wizard_next_step;
var wizard_data;
$("#wizard").smartWizard({
onShowStep : function (obj, context) {
onLeaveStepFunction(obj, context, function(data, nextStep){
wizard_data = data;
wizard_next_step = nextStep;
});
},
onLeaveStep : function (obj, context) {
$("#" + idDiv).html(wizard_data);
return wizard_next_step;
}
});
The key is to call all the asynchronous functions and get the data long before you call all your synchronous functions.
Note: I don't know smart-wizard at all and not a serious jQuery user. The answer above is based on my 2 minutes reading smart-wizard documentation on github and my understanding of javascript. You will definitely need to modify my examples to make it work.
I have a WordPress plugin that I am working on that Polls all the major Social Networking sites and returns the social counts ( followers ) for a specific user.
This can be quite slow and intensive on the server so I have built the plugin using WordPress Transient Caching to store the details returned from the Social Network sites, and am also using jQuery AJAX json to display the data.
These are the main functions:
Retrieve the Facebook Count
/**
* Fetch Facebook count.
*
* #param string $url The url to fetch.
* #return int of Facebook counts.
*/
function ass_get_fb_likes($facebook_id) {
try {
$json = wp_remote_get("http://graph.facebook.com/".$facebook_id);
if(is_wp_error($json))
return false;
$fbData = json_decode($json['body'], true);
return format(intval($fbData['likes']));
} catch (Exception $e) {
return false;
}
}
this above function is also connected to another function that handles the Transient caching. This aspect works great.
Handles the initial display of the Social Network data
jQuery(function($) {
$('#fblikes').advanceddashboardwidget({
'action':'get_facebook_likes',
'service':'facebook',
'countof':'likes',
'callback':'formatCount'
});
});
Helper function to format the display
function formatCount(element,count){
var display_count='';
count=parseInt(count,10);
if(count>1000000)
{
count=count/1000000;
count=count.toFixed(0);
display_count=count+'m';
}
else if(count>1000)
{
count=count/1000;
count=count.toFixed(0);
display_count=count+'k';
}
else
{
display_count=count;
}
element.html(display_count);
}
The below function if the one giving me issues. It is used to communicate with WordPress to call the PHP functions and retrieve the data.
(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);
}
break;
}
};
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 deleting the cache');
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);
The Issues
The issue is that when the data is returned from the transient functions there is always an extra 0 ( zero ) appended to the number. From what I have been reading this could be because I am using "json" instead of "jsonp".
When I change it to "jsonp" I get an error "Error: jQuery172011280598581866697_1353705456268 was not called". I guess this has to do with the callback function.
So far I have found this the fastest way to display this information on a site. If the data exists in the transient cache the pages load quick but if not that can take a few seconds and that is where I want jQuery to come in and maybe display a loading graphic until the data is retrieved.
Any help would be greatly appreciated.
Before you return your AJAX data back to the AJAX function, you need to die(), otherwise it falls through to WordPress' which ends with die('0').
Edit:
WordPress now has (since 3.5.0) functions available for this:
wp_send_json_success( $data ): http://codex.wordpress.org/Function_Reference/wp_send_json_success
and wp_send_json_error( $data ): http://codex.wordpress.org/Function_Reference/wp_send_json_error.