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.
Related
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 want to get some json object from a remote server.
Here is the simplest html you can imagine:
<div id="getHotels" data-theme="e" data-role="button">Get hotels</div>
<ul id="bringHotels" data-role="listview"></ul>
and here is the javascript:
$("#getHotels").click(function(){
$.getJSON("/services/apexrest/Hotels", function(obj){
$.each(obj,function(key,value){
$("#bringHotels").append("<li>"+value.Hotel_Name__c+"</li>");
});
});
});
i have never used the getJSON method but it seems to be quite clear, despite that it doesnt work and I checked the directory - there really is JSON array. So, if I am doing it wrong, please correct me, thank you.
There are no enough informations about the problem to solve it...
It could be a problem in the URL you pass to getJSON. Try to change the first slash with a ./, or use other callbacks to obtain more debug infos:
$.getJSON("example.json", function() {
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
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 have used the following code for open the Facebook Pay Dialog box for My application app on Facebook but getting error :
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<p> <a onclick="placeOrder(); return false;">Buy</a></p>
<script>
FB.init({appId: 367311903326028, status: true, cookie: true});
function placeOrder() {
// If using mobile, this is where you place the
// iOS native app check for credits (see below)
// Assign an internal ID that points to a database record
var order_info = 'abc123';
// calling the API ...
var obj = {
method: 'pay',
order_info: order_info,
action: 'buy_item',
dev_purchase_params: {'oscif': true}
};
FB.ui(obj, callback);
}
var callback = function(data) {
if (data['order_id']) {
return true;
} else {
//handle errors here
return false;
}
};
function writeback(str) {
document.getElementById('output').innerHTML=str;
}
</script>
<br>
Error :
There Was a Problem Processing Your Payment
Sorry, but we're having trouble processing your payment.
You have not been charged for this transaction. Please try again.
Please can anyone suggest me what going wrong here.
Thanks
Without more information it's really hard to know what the issue is here. Specifically, what response are you supplying to the payments_status_update request? Can you show us the code that handles those requests, or an example of your response?
I've personally seen that error message in cases where our callback was responding incorrectly to the payments_status_update request, but it could be something else.
Seems to me that you are using the old currency payments, which is a bad idea as they are going to be deprecated in two months.
Check that in your FB App settings you are NOT using the new Local currency payments, as if you have it enabled (which is the default setting now), then the only way that you can make a purchase is with the new way. Using the old way will fail.
Deactivating the new payment method will allow you to use BOTH the new and the old method.
I have the script below. I am trying to POST the data and insert it into a database, the jQuery executes just fine, but does not post anything, the action is working properly because when i post the data without the script, the data posts fine and is inserted into the database fine without any errors, so it seems as if the jquery function is posting nothing. can someone please help?
$('#form').live('submit',function(){
$('#form').fadeOut('slow');
$('#div').append("<h2>submittes</h2>");
return false;
});
<form id="form" method="post" action="execute.php" name="form">
<textarea id="text" name="update"></textarea>
<br>
<input type="submit" value="update" id="update-submit">
</form>
EDIT:
$('#form').live('submit',function(){
var updateTextArea = $('#textarea').val();
$.ajax({
type: "POST",
url: "execute.php",
data: updateTextArea,
success: function() {
$('#form').fadeOut('slow');
$('#div').append("<h2>updated</h2>");
}
});
return false;
});
this is what i have for the ajax, but i am still not having any success.
You don't have any AJAX calls in your javascript. You're just fading out the form, appending an h2, and preventing the default action from occurring (which would be to submit the form normally).
Here's a basic example of how to create a POST ajax request:
$('#form').submit(function(){
$.post($(this).attr('action'), { update: $(this).find('#text).val() }, function(){
// success
});
});
Checkout the jQuery API/Docs for more info on this. There are also dozens of tutorials lurking around the net on how to do this.
Well, by returning false from the event handler function, you trigger two things:
prevent the default action (.preventDefault())
stop the event propagation (.stopPropagation())
This prevents that the submit ever happens.
You need to transfer the data on your own within the submit event handler. For instance, create an ajax request which serializes the form data and sends it to your server.
Could look like:
$('#form').live('submit',function(){
$('#form').fadeOut('slow');
$('#div').append("<h2>submittes</h2>");
$.post('execute.php', $(this).serialize(), function(data) {
// do something after success
});
return false;
});