I'm using google places and jquery to achieve the goal of once the user starts typing in an input field, it does a call to google places and feeds the results in a dropdown (via jquery ui autocomplete)
My problem is, in my autocomplete function I have
source: function( request, response ) {
initialize()
}
In there, I'm trying to call this function
function initialize() {
service.search(request, callback);
}
Which works fine... but the problem is... initialize does a call out to the function callback()... so I'm not sure how to listen to see when the callback is done.
So for example, what would I do here:
source: function( request, response ) {
// need code here to know when initialize and callback are done and are sending me the list of results from google ?
}
I'm just not sure how to wait for google places to get done, before I use $.map from the results to produce the dropdown.
Timing issues with google apis? I feel your pain. But to sidestep your issue and maybe save you some pain, you could use Google's prebuilt solution:
http://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete
Apologies if you have some reason to not use their API.
Related
I'm using Tabulator in a Vue.js powered Electron desktop app. My app can query quite large datastores and displays the results in a Tabulator table.
What I want to do is basically the same as the ajax module, but instead of making AJAX calls to fetch new data I want to call a specific API.
I'm starting with sorting. When clicking the header to sort, I want to call the custom api with the sort parameters, then return a sorted slice of data. There doesn't seem to be a 'native' way to do this in the Tabulator sort module api.
Same deal with pagination -- display only ~100 results, if they paginate to the next page, I make an API call.
What's the best way to achieve this?
Can/should I build my own module (drafted from the ajax module), or do sort and paginate integrate with the ajax module directly?
You can use the ajaxRequestFunc callback to replace the existing ajax request mechanic with your own logic. Full details for this can be found in the Loading Data, Ajax Documentation
The example below shows a new function queryRealm being used to replace the built in ajax functionality.
The function will be passed a url and config and params objects, that will contain sorting, filtering and pagination data, and should return a promise that resolves with an array of table data
function queryRealm(url, config, params){
//url - the url of the request
//config - the ajaxConfig object
//params - the ajaxParams object
//return promise
return new Promise(function(resolve, reject){
//do some async data retrieval then pass the array of row data back into Tabulator
resolve(data);
//if there is an error call this function and pass the error message or object into it
reject();
});
}
var table = new Tabulator("#example-table", {
ajaxRequestFunc:queryRealm,
});
I trying to upload a file using pug, multer and express.
The pug form looks like this
form(method='POST' enctype="multipart/form-data")
div.form-group
input#uploaddata.form-control(type='file', name='uploaddata' )
br
button.btn.btn-primary(type='submit' name='uploaddata') Upload
The server code looks like this (taken out of context)
.post('/uploaddata', function(req, res, next) {
upload.single('uploaddata',function(err) {
if(err){
throw err;
} else {
res.json({success : "File upload sucessfully.", status : 200});
}
});
})
My issue is that while the file uploads successfully, the success message is not shown on the same page, ie: a new page is loaded showing
{success : "File upload sucessfully.", status : 200}
As an example for other elements (link clicks) the message is displayed via such javascript:
$("#importdata").on('click', function(){
$.get( "/import", function( data ) {
$("#message").show().html(data['success']);
});
});
I tried doing a pure javascript in order to workaround the default form behaviour but no luck.
Your issue has to do with mixing form submissions and AJAX concepts. To be specific, you are submitting a form then returning a value appropriate to an AJAX API. You need to choose one or the other for this to work properly.
If you choose to submit this as a form you can't use res.json, you need to switch to res.render or res.redirect instead to render the page again. You are seeing exactly what you are telling node/express to do with res.json - JSON output. Rendering or redirecting is what you want to do here.
Here is the MDN primer on forms and also a tutorial specific to express.js.
Alternatively, if you choose to handle this with an AJAX API, you need to use jquery, fetch, axios, or similar in the browser to send the request and handle the response. This won't cause the page to reload, but you do need to handle the response somehow and modify the page, otherwise the user will just sit there wondering what has happened.
MDN has a great primer on AJAX that will help you get started there. If you are going down this path also make sure you read up on restful API design.
Neither one is inherently a better strategy, both methods are used in large-scale production applications. However, you do need to choose one or the other and not mix them as you have above.
I am trying to implement a GetJSON Call to Wikipedia API from a Safari Extension, but i get always the Origin Error, if i add a callback=ß i get callback undefined Error
A simple:
$.getJSON('http://en.wikipedia.org/w/api.php?action=parse&page=google&prop=text&format=json&callback=?', function(data) {
console.log(data);
});
Without triggering an Error would be nice, alternatively, is there another way to get a Wikipedia short summary on a keyword inside safari Extension?
thx for help
Found a Workaround1
If you use a Globle Page or a PopOver, let it do this stuff, it doesn't trigger Orinin Errors, use than Messaging to send the Data from Global Page to the Injected Script, it works here fine
I'm using woocommerce JSON API to retrieve the data of some products like price, SKU, etc...
The thing is that I get an error using this API. I've installed the plugin succesfully and activated it in the WordPress Dashboard.
I've tried the example given in GitHub exactly as the author says.
Here's my javascript code:
$(document).on('pageinit','#restau' ,function(){
var url = 'http://danielvivancos.com/edu/wordpress/shop/?callback=?';
params = { action: 'woocommerce_json_api', proc:"get_products"};
params.arguments = {token: 1234, per_page: 2, page: 1}
jQuery.getJSON(url,params).done(function (data) {
alert("success");
console.log(data);
console.log(url);
}).error(function(jqXHR, textStatus, errorThrown){
alert(jqXHR.responseText);
});
});
At first it didn't do anything, and I didn't understand what was happening but then I added the .error() function and it threw me an error...
Here http://danielvivancos.com/edu/directebre_app_jquerymobile/ you will find the three alerts displayed when you click on any of the three products.
Hope someone can help me or give me some ideas to solve it.
Thank you all!
The API Almost always returns some kind of error string and error code. The one time when it wouldn't would be if there was a PHP error (Even then it tries to catch the error and return something).
One thing you may need to do is to visit the users settings page, setup your permissions, and then save the settings for that API User. Whenever a new method is added to the API you will have to visit this page and resave it.
Another thing to do is to try and run php tests/get_products.php and see what happens. Most of the API functions have a tests file that you can run from the command line to test the API.
Also, while I am very happy you are using it :) it is still unfinished and in the early stages of development.
It looks like your example is working though?
Could you post a bit more about what error you are getting?
When I click on one of the items, it takes me to a page where a popup shows up with a bunch of HTML, this normally means that your API page is not setup properly (if it is making an api request). You will need to setup the API page ( Just create a wordpress page, or use an existing one) Then in the WooCom menu select JSON Api, and set the API page from the dropdown list. Remember to save.
Does their API allow my Facebook-connected user to add a friend?
No. Adding friends is not possible through the API.
However you can direct users to http://www.facebook.com/addfriend.php?id=[USER UID]
Where [USER UID] is a valid facebook user id.
Good luck!
I spent a great deal of time looking, and finally came accross a very simple solution.
Using the Facebook Javascript API you can do a friend request with:
<script>
FB.ui(
{
method: 'friends.add',
id: fbid // assuming you set this variable previously...
},
function(param){
console.log(param);
// If they cancel params will show:
// {action:false, ...}
// and if they send the friend request it'll have:
// {action:true, ...}
// and if they closed the pop-up window then:
// param is undefined
}
);
</script>
The callback script can then simply performs an ajax call to your server where
you save info about the action, if needed.
You can test this by using the javascript console app on Facebook:
http://developers.facebook.com/tools/console
Paste in the script above, including the tags, or click the "Examples"
button on the bottom of the text area and find the "fb.ui — friends.add" example.
https://developers.facebook.com/docs/reference/dialogs/friends/
Here is a Wiki list of the API methods available to you http://wiki.developers.facebook.com/index.php/API#Administrative_Methods
Doesn't look like you can add friends via the API. Note the iPhone facebook app also doesn't have an add friends function, it was written via the API, so that lends more weight to the idea that you can't