I am trying to cache JSON data on the local storage so I can use the data when there is no internet connection.
It works fine but when I restart the app I think the localstorage cleared.
Here is my code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("offline", function() {
alert("No internet connection");
$.each(JSON.parse(localStorage.getItem('foo')), function(key, val) {
if(!(val.php)){val.php=0;}
$('ul.get-mertchant').append('<li> <div class="circle-img"><img src="'+ val.logo + '" /></div><div class="merchant-info"><h1>'+ val.node_title +'</h1><p>You Have '+ val.php +' Binggz</p></div><div class="more-icon"></div> </li>');
});
}, false);
$.getJSON('mywebsite/views/services_merchant_mobile', function(data) {
localStorage.setItem('foo', JSON.stringify(data));
var items = [];
$.each(JSON.parse(localStorage.getItem('foo')), function(key, val) {
if(!(val.php)){val.php=0;}
$('ul.get-mertchant').append('<li> <div class="circle-img"><img src="'+ val.logo + '" /></div><div class="merchant-info"><h1>'+ val.node_title +'</h1><p>You Have '+ val.php +' Binggz</p></div><div class="more-icon"></div> </li>');
});
})
}
What size has the json data you stringify? Localstorage has limitiation to the size of the values so this may be a problem.
Have you got any logs in the xcode console?
I see that you call getJSON every time the device is ready. If you want to refresh this data every time the application start maybe the better idea is to cache the result from the json call in the global javascript object instead of stringify and parse json many times.
A small tip for you. Try to not to use $.append() function in this way. It's very expensive especially on Mobiles.
You can either concatenate the list items and than call append() function only once or you can use some template engine like jquery template or handlebars.
Starting from IOS 5.1 Apple decided to make local storage a temp area. Read more here.
Related
I want to build some sort of offline app with some json data, i want fill my database when app's life cycle is first loading. i used pouchDb in ionic 2, i added PouchDB load plugin and its work fine with this code:
let PouchDB = require('pouchdb');
PouchDB.plugin(require('pouchdb-load'));
initDB() {
this._db = new PouchDB('cities3', { adapter: 'websql' });
this._db.load('../../../assessts/cities.json').then(function () {
console.log("Done loading!");
}).catch(function (err) {
console.log("error while loading!")
});
the output will be Done loading! but when i want to check the data in PouchDB inspector i will get this error:
No PouchDB found
To use the current page with PouchDB-Fauxton, window.PouchDB needs to be set.
i know that i should use window["PouchDB"] = PouchDB; but my question is, where?
You should add it after
this._db = new PouchDB('cities3', { adapter: 'websql' });
This question already has an answer here:
Facebook ignoring OG image on first share
(1 answer)
Closed 6 years ago.
First of all hi and thanks in advance to anyone who can help with this because I've been going crazy over this for weeks now.
So I've got a website which lists gif taken from my mobile application (which are then stored on AWS and my visitors ( I haven't found a use for me to have users) can share these gifs on facebook using the facebook sdk.
The problem appears when I try sharing an image for the first time
This is what the share dialog shows the first time I click on my sharing button:
http://i.stack.imgur.com/lNVNF.png
and then I close and reclick the same button and now it works:
http://i.stack.imgur.com/YsDUm.png
Now I've been trying to find a way to make this work on the first sharing attempt but to no avail.
I am using meteor in combination with biasport:facebook-sdk and Amazon S3 for the hosting of my files.
Edit here is the code used:
FRONT SIDE
HTML
<div class="facebook share">
<img src="/gallery/fb.png">
</div>
Javascript
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
FB.ui({
method: 'share',
href: url
});
}
SERVER SIDE
JAVASCRIPT
if(Meteor.isClient) {
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
xfbml : true,
version : 'v2.5'
});
};
}
Edit: I found a manual solution using exec future and curl
so first I added a call to a meteor method on the share that updates the facebook crawler
JAVASCRIPT
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
Meteor.call('updateCrawler', url, function(){
FB.ui({
method: 'share',
href: url
});
});
}
Then I defined my meteor method as such
JAVASCRIPT
Meteor.methods({
updateCrawler: function(url){
var future = new Future();
cmd = 'curl -X POST -F "id=' + url + '" -F "scrape=true" -F "access_token={my_access_token}" "https://graph.facebook.com"';
exec(cmd, function(error){
if (error){
console.log(error);
}
future.return();
});
future.wait();
}
});
it's ugly but since I'd have to wait for the crawler to update and it works I'll leave this here for future use for someone maybe
Edit2:
I did not use og tags at all since I was simply sharing a url to aws directly and not a url to my website
I worked around this problem by calling the Facebook API direct from the server to make it scrape the og data by requesting info on the page. First time round it doesn't have the image cached but second time it does so this workaround does the initial call before sharing.
Use an access token for your facebook app and call the below in an ajax call and await the response before opening share dialog. Replace Google address with your own uri encoded address https://graph.facebook.com/v2.5/?id=http%3A%2F%2Fwww.google.co.uk&access_token=xxxxx
EDIT:
As per comments, here is my server side method for calling this which I use when posts etc are inserted to make the initial call and prompt a scrape from fb:
var getTheOGInfo = function (link)
{
if (!link || link.slice(0, 4).toLowerCase() != "http"){
throw new Meteor.Error("og-info-bad-url", "Function requires an unencoded fully qualified url");
return false;
}
var url = "https://graph.facebook.com/v2.5/{{{{id}}}}?access_token={{{{token}}}}&fields=og_object{id,description,title,type,updated_time,url,image},id,share";
var token = Meteor.settings.private.fb.token;
if (!token){
throw new Meteor.Error("og-info-no-token", "Function requires a facebook token in Meteor.settings.private.fb.token");
return false;
}
var link_id = encodeURIComponent(link);
url = url.replace('{{{{token}}}}', token).replace('{{{{id}}}}', link_id);
var result = HTTP.get(url, {timeout:1000});
return result;
}
Or for your purposes you may not want anything that might be blocking so you could change the last two lines to be aynchronous:
var result = HTTP.get(url, {timeout:1000});
return result;
//Replace with non blocking
HTTP.get(url, {timeout:1000}, function(err, result){console.log('something asynchronous', err, result);});
return true;
I'm trying to get the SoundCloud HTML5 player widget to automatically start and seek to a specific track and position but no matter what I try it doesn't work.
I'm using the API code below:
<iframe width="100%" height="450" scrolling="no" id="soundcloud-player" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3058825&color=00be53&auto_play=false&show_artwork=true"></iframe>
<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('soundcloud-player'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.play();
widget.seekTo('5000');
});
widget.bind(SC.Widget.Events.PLAY, function() {
// get information about currently playing sound
widget.getCurrentSound(function(currentSound) {
console.log('sound ' + currentSound.title + 'began to play');
});
}); }());
What I'm basically trying to accomplish is have the player automatically seek to the same spot when the user switches between pages on the site. I plan on reading from a cookie, the position and track and then using the method above. Any help would be greatly appreciated!
The problem is most probably related to the sound not being fully loaded at the moment when you are trying to call seekTo. You can easily verify this by adding the following bit to your code:
// …
widget.bind(SC.Widget.Events.READY, function() {
widget.play();
// Note setTimeout here!
// This will now work since the needed part of the sound
// will have loaded after the timeout
setTimeout(function () {
widget.seekTo('5000');
}, 1000);
});
// …
But since you don't really want to have arbitrary timeout in your code, it's a good idea to attach event handler to progress event:
widget.bind(SC.Widget.Events.LOAD_PROGRESS, function onLoadProgress (e) {
if (e.loadedProgress && e.loadedProgress === 1) {
widget.seekTo(15000); // seek to previous location
widget.unbind(SC.Widget.Events.LOAD_PROGRESS);
}
});
Here's a working version of this code http://jsbin.com/ebeboj/2/edit
Also, in case you have very long tracks, you could also retrieve duration from the sound (via getCurrentSound), check at what point in range from 0 to 1 the track has stopped playing and only wait for that value (since loadedProgress === 1 might take a while), something like:
widget.getCurrentSound(function(currentSound) {
// currrentSound.duration is 269896 for the first track of your playlist
relativePreviousPlay = previousPlay / currentSound.duration; // ~0.204
});
widget.bind(SC.Widget.Events.LOAD_PROGRESS, function onLoadProgress (e) {
if (e.loadedProgress && e.loadedProgress > relativePreviousPlay) {
widget.seekTo(previousPlay); // seek to previous location
widget.unbind(SC.Widget.Events.LOAD_PROGRESS);
}
});
Check out working example for the last bit of code here http://jsbin.com/ebeboj/4/edit
Sidenote: I'd recommend using localStorage over cookies for storing previous position of playback, because cookies will travel back and forth from client to server slowing down your website, and you likely don't need the information on the sever side.
I wonder how the technique with live update could be implemented? What is it's concept? Keep on access db? Will this consume resources? Correct me if I am wrong.
An easy to implement method is to use Ajax polling. Here is a untested example of a concept of it with JQuery.
<script language=javascript>
var int= setInterval("getUpdates",5000); // Every 5 seconds
function getUpdates()
{
$.ajax({
type: 'GET',
url: '/get/new/notifications/page/'
}).done(function(data)
{
alert(data);
});
}
</script>
This will call the getUpdates() function every 5 seconds, and return whats output from the page into the data variable.
I am trying to get the Jquery UI autocomplete working on AJAX loaded dynamic fields in div #right
I do not fully understand the code below.
$("#right").delegate(".drugName", "focus", function(){
//attach autocomplete
$(".drugName").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON("druglist.php?callback=?", req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
suggestions.push(val.name);
});
//pass array to callback
add(suggestions);
});
},
});
});
But it works in Chrome/FF. However it seems to be killing AJAX loading in Internet Explorer causing the application to be non - functional
The error returned is
SCRIPT1028: Expected identifier, string or number ajaxfunctions.js, line 41 character 6
The error in the console refers to the brackets on the second last row.
I tried to work this out using the documentation, but couldnt get it to work :-(
Whats happening with the code & IE?
Pls help.
//pass array to callback
add(suggestions);
});
}, //OK the comma here was the problem
});
Got it working. this helped