Racking my brains here hoping for some help. I have successfully implemented bootstrap 3 typeahead (https://github.com/bassjobsen/Bootstrap-3-Typeahead) and it is showing suggestions from my JSON as expected.
var employer = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "/employers.json",
cache: "false"}
});
employer.initialize();
$("#employer").typeahead({
source:employer.ttAdapter()
});
However the issue I have is whenever I add a new item to the JSON, it does not appear in the suggestions. I am guessing that it caches the results as I can see the new entries in incognito mode!
I need this list to be live - I already have a script which adds entries to the JSON everytime the form is submitted and I need the new entry to be available for the next form submission.
Any help would be appreciated.
Got a solution if it helps anyone. Removed bloodhound and just done a straight ajax call with cache set to false. Work perfectly :)
$.ajax({
type: 'POST',
url: '/employers.json',
cache: false,
success: function(data) {
$('#employer').typeahead({source: data});
}
});
Related
I have a doubt in PWA and will be glad if someone helps me with that. In my PWA I don't have any problem with storing static files like HTML, JS & CSS. But am facing Issues on dynamic data. i.e : my self.addEventListener('fetch', function(e) { }) is not getting called, but other functionalities are working fine i.e: 'install' and 'active' event.
to be more particular, I am using #angular/service-worker which worked fine but I created another sw file called sw.js. In my sw-js I'm listening to the events like 'install' 'active' and 'fetch'. My sw.js fetch is not getting called whereas the other two methods work well. But while fetching the ngsw-worker.js's fetch method alone gets called.
The thing I need is to make CRUD Operations in PWA with angular.
Thanks in advance!
You can do the dynamic caching like below , the service worker will intercept every request and add in to the cache.
self.addEventListener("fetch", function (event) {
event.respondWith(
caches.open("dynamiccache").then(function (cache) {
return fetch(event.request).then(function (res) {
cache.put(event.request, res.clone());
return res;
})
})
)
}
Note : You can't cache POST Requests
Can service workers cache POST requests?
I've been trying to learn Ember and I have a question.
In my store I'am getting data from .json like below. I have tried without buildUrl function but cant load the json file, then found this solution on SO.
CocktailApp.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.extend({
bulkCommit: false,
url: "http://localhost:8888",
buildURL: function(record, suffix) {
var s = this._super(record, suffix);
return s + ".json";
}
})
});
Now comes my question: When I commit the chances (by pressing add to favs or remove from favs) RESTAdapter adds ".json" at the end of to PUT request. See the below code and screenshot
CocktailApp.CocktailController = Ember.ObjectController.extend({
addToFav: function () {
this.set('fav',true);
this.get('store').commit();
},
removeFromFav: function () {
this.set('fav',false);
this.get('store').commit();
}
});
I think thats why my PUT request can not be handled. But If I remove the builtURL function no json loaded at all. How can I resolve this problem?
Thanks
If the API endpoint url does not require .json at the end of it, then remove that line from your buildURL function. My guess is that the example code you got was consuming a ruby on rails api, or something similar.
remember, when you send a GET, PUT, POST, or DELETE to a url, that url needs to actually be a real endpoint. You can't just add extraneous stuff to it and have it still work.
Please help,
I have been trying to get Json data but with no avail.
I have managed to get it working in dreamweaver but once uploaded to my domain it then does not work.
I have looked at many examples but cant get mine to work. I have seen examples that get picturs from flikr that work on my domain.
I need to get the json data from http://api.open-notify.org/iss-now/
This works in dreamwaever
$.getJSON('http://api.open-notify.org/iss-now/',
function(json) {
$('#images1').text(json.timestamp);
});
and this
$.ajax({
type: 'GET',
url: MyUrl,
dataType: "json",
success: function(data){alert("Success");hello(data);},
error: function(XMLHttpRequest, textStatus, errorThrown){alert("Error : "+" ':' "+textStatus+" ':' "+errorThrown);},
});}
is this a cross domain issue? why does the Flikr ones work as this is cross domain too? please help.
Many Thanks.
cross domain should be done using JSONP, checkout this question, and the JSONP section here.
When a user loads my page for the first time on an iPhone (works fine on Android, IE, FF,
Opera, Chrome, Safari), the two portions of the page generated by a Prototype/Scriptaculous Ajax.Updater call are garbled - they look as if a binary file were injected into the page or the character map was scrambled. If the user then reloads the page, or uses the page's tabs to navigate around via Ajax.Updater requests, everything is then fine. It's only the very first time the page is loaded in a browser session that this occurs. Here are the relevant calls with a bit of context:
soundManager.onready(function(){
new Ajax.Updater('PlayerSet', 'http://' + location.host +
playerHTMLloc, {method: 'post', onComplete: startPlayer});
});
This is only called once per site visit (so the user has to reload in order to get it to display correctly). It calls a python script that writes html to stdout.
Here's the other:
show: function(elm) {
var id = elm.identify();
elm.addClassName(id.sub('-html', '-selected'));
var link = 'ajax/' + id.sub('-', '.');
$('centercontent').update('<div id="floaterForSpinner"></div><div
id="centerSpinner"><img src="images/ajax-loader.gif"></div>');
new Ajax.Updater('centercontent', link, {evalScripts: 'true',
method: 'post'});
}
This is part of a small class that handles tabs on the page. Again, only the first time show() is called does the error occur. After that the tabber works normally. The updater is just pulling html text files from the server.
The issue occurs with both Prototype/Scripty 1.6.1/1.8.3 and 1.7/1.9.0.
The post and receive headers are identical for the first and subsequent loads, and the acceptable charset is Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 in all cases per Firebug.
I don't have an iPhone myself, and none of the off or online iPhone simulators I've tried reproduce the problem, so testing this is going to be a nightmare. Hence, anything anyone could do to help, would be, uh, very... helpful.
UPDATE based on questions I received on the GG prototype list:
All the code above is called after the DOM is loaded:
document.observe('dom:loaded', function() {
Ajax.Responders.register({onCreate: removeListeners});
Ajax.Responders.register({onComplete: postAJAX});
new Lightbox();
initMailList();
AT = new AjaxTabber('tablist');
initInternalLinkListener();
initIE6msgClose();
$('PlayerSet').update('<div style="text-align:center">
<img src="images/ajax-loader.gif"></div>');
soundManager.onready(function(){
new Ajax.Updater('PlayerSet', 'http://' + location.host +
playerHTMLloc, {method: 'post', onComplete: startPlayer});
});
});
AjaxTabber is the tab class that contains the show() function I mentioned earlier. The document.observe function above is in the last js file in the header.
UPDATE #2:
Replacing
document.observe('dom:loaded', function() {
with
Event.observe(window, 'load', function() {
in the 3rd code block fixes the garbled loads. However, the fix raises new questions/issues:
Why do the Ajax.Updater loads need to have the entire page loaded to work correctly? A DOM load should be all that's necessary. There's no reason to need the images loaded for an ajax load to work.
My overall page performance is now substantially degraded to fix an iPhone only problem. I'd really like to go back to loading once the DOM load is complete.
Calling update() and then Ajax.Updater on the same element one after another like this might introduce timing problems that can be difficult to diagnose. I recommend doing this instead (to add a "loading" indicator to your Ajax-loading element):
new Ajax.Updater('elementID', '/path/to/server', {
parameters: {},
method: 'get',
onCreate: function(){
$('elementID').update('placeholder html here');
},
onSuccess: function(){
// any other cleanup here
}
});
The onCreate callback hook will guarantee to run and complete before the request is sent and the element is updated by A.U.
I currently playing around with the Facebook JavaScript SDK and the Scores API ( https://developers.facebook.com/docs/score/ ). I wrote a small application to save (post) scores and now I want to delete scores. Posting (saving) them works fine.
My code looks like this:
var deleteHighScoreUrl = 'https://graph.facebook.com/'+facebook.user.id+'/scores?access_token='+facebook.application.id+'|'+facebook.application.secret;
jQuery.ajax(
{
type: 'DELETE',
async: false,
url: deleteHighScoreUrl,
success: function(data, textStatus, jqXHR)
{
console.log('Score deleted.');
}
});
The "facebook" variable is an object that holds my application data. For HTTP POST it works fine but for HTTP DELETE I get the response "NetworkError: 400 Bad Request" in Firebug (with Firefox 10). I saw that Firefox first sends an HTTP OPTIONS (to see if it is allowed to use HTTP DELETE) which leads to this error so I tried the same thing with Google Chrome. Google Chrome sends a real HTTP DELETE which then returns:
"XMLHttpRequest cannot load
https://graph.facebook.com/USER_ID/scores?access_token=APP_ID|APP_SECRET.
Origin MY_DOMAIN is not allowed by Access-Control-Allow-Origin".
I think that this is a classical cross domain issue but how to solve it? I've added my domain to my facebook application (at https://developers.facebook.com/apps) and Facebook has a paragraph which is called "Delete scores for a user". So it must be possible to delete the scores (somehow)?
Because of Cross-Site-Scripting (XSS) a HTTP DELETE is not possible. But you can send a HTTP POST request with the query parameter ?method=delete, which then deletes the score.
Code Sample:
Facebook.prototype.deleteUsersHighScore = function()
{
var deleteHighScoreUrl = 'https://graph.facebook.com/'+this.user.id+'/scores?access_token='+this.application.id+'|'+this.application.secret+'&method=delete';
jQuery.ajax(
{
type: 'POST',
async: false,
url: deleteHighScoreUrl,
success: function(data, textStatus, jqXHR)
{
console.log('Score deleted.');
}
});
}
This is the Cross Domain security issue.
The fact that your error contains the message "Origin MY_DOMAIN" would tell me that somewhere in your code you have copied one of Facebook's examples but not changed the value for MY_DOMAIN to the correct domain you are using.
I would check all of your code for the value "MY_DOMAIN".
Please ignore this advice if you have changed the value to hide your actual domain in your question.