Facebook javascript payment dialog loads then disappears without calling the callback function - javascript

I managed to get a button to work to call the facebook pay dialog and all was dandy, it opened with the correct data and called the purchase callback page at the correct times with the correct data.
Now though it is not displaying after loading (though I don't think any of the data (or even the code) has changed).
When I click the button the payment dialog opens up saying loading, and all of the database changes done by the purchase callback page that are done when the dialog opens are done properly and completely. Next the loading dialog disappears and my javascript callback function is not called and nothing else happens at all.
If I change the data so that, for example, the price is a string rather than a number then I get the payment dialog open up with the correct error instead of just the loading screen and my callback function is called.
I am not sure what the problem is, here is my code for calling the payment UI:
FB.ui({
method: 'pay',
order_info: {
pkgnum: d.id,
title: d.name,
description: d.desc,
price: d.cost,
image_url: 'images/coin.png',
product_url: 'images/coin.png',
userid: username
},
purchase_type: 'item'
}, fbPurchaseCallback );
And here is the data the UI receives for displaying the item payment information:
{
"content":[{
"pkgnum":20,
"title":"Lolname",
"description":"Loldesc",
"price":100,
"image_url":"images/coin.png",
"product_url":"images/coin.png",
"userid":"254884",
"item_id":"254884"
}],
"method":"payments_get_items"
}

The issue was with facebook being unable to find images/coin.png for some reason. Solved now.

Related

Reloading page in background without alert() (using sweetalert instead)

I have a php function which reloads one page in hidden iframe before real redirection is done after input button is clicked.
function button_confirm_order_params() {
$url = "somepagetoreloadinbackground.php";
$alert = "alert('you will be redirected to ext. page')";
return "onclick=\"document.all.myFrame.src='$url'; $alert;\"";
}
Everything works good, however I would like to use something more beautiful than browser's alert. So I downloaded SweetAlert and changed return to:
return "id=\"btnShowAlert\" onclick=\"document.all.myFrame.src='$url'; \"";
The problem is that without alert() the page is not being stopped before redirection. It's just shows sweetalert for a moment and then opens another page, so my "somepagetoreloadinbackground.php" is not loaded. Any ideas to handle it?
If you check the examples given on a sweetalert github, it seems there's actually alot of options that can help you: http://t4t5.github.io/sweetalert/
There's a standard timeout version: It's the timer attribute you have to add.
swal({
title: "some title",
text: "some message",
timer: 2000, // timeout in miliseconds
showConfirmButton: false // show ok button or not
});
And also, although it's a confirm instead of an alert, there's a callback function! Just add you redirect to that callback if the timeout version isn't good enough:
swal({
// add all options you want
},
function(){
// the actual callback, triggered by clicking the ok button on the confirm.
document.all.myFrame.src='$url'
});
Always read the docs for the library you're using first. :)

Refreshing jQuery dialog data

I have a function which opens a jQuery dialog. The user is able to modify some data fields, like a dropdown and save the result. That works fine and the parent page is updated through JQ. Now when the same item is clicked again, the dialog appears without ever hitting the jQuery call and the data is as it was before changed. How do force the JavaScript to go through the same functions again and call the controller again for the new values? Let me know if you need code, but there has to be a command to cause the once invoked dialog to refresh it's data. Is this because of the browser cache? The code is like this:
function showTourDetails(tourId, row) {
$("#divSelectedTour").dialog("open");
$("#divSelectedTour").load('#Url.Action("_SelectedTour", "Tour", null, Request.Url.Scheme))?tourId = ' + tourId);
}
And the div is just an empty div that is filled with the partial view page:
[HttpGet]
public PartialViewResult _SelectedTour(string tourId)
{
SelectedTourModel tour = GetTour(Convert.ToInt64(tourId));
return PartialView(tour);
}
After trying many different approaches, this finally worked:
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});

jQuery alert after form submit and redirect

I am trying to invoke an alert box after a form is fully submitted AND the page is redirected, but don't exactly know how to go about it.
After a user registers with the site, it redirects them to their profile page.
What I want to do is, IF the request came from the from with ID of new_user, AND after the user gets redirected to their profile page, invoke an alert.
So on the profile page, after coming from the new_user form, invoke an alert.
Right now I am doing this:
$('form#new_user').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
alert("Testing page load.");
});
But that invokes the pop up after the form is submitted, before the user gets to the profile page.
How can I accomplish this?
Thanks.
hi i think you can do this easily using AJAX
pass the variables to the ajax page and on SUCCESS show the alert box which you want to show.
i think it is better to use AJAX to Jquery for your scenario.
Here's an idea on how you could do it:
#inside your RegistrationsController
def create
user = User.new(user_params)
if user.save
redirect_to user_profile_path(user, from: 'registration), notice: "Successful registration."
else
# code for handling error in registration
end
end
Now that you have a param :from passed to the user_profile_path every time a user is just registered, you can do something like this in your JS for your profile page
if(window.location.search == 'from=registration') {
alert("Redirected from registration!");
}
Let me know if that works.
Where you need this alert message? in your registration page or profile page?
If you want to invoke alert in your registration page, better you should us ajax post method for submitting the form.
If you want to display alert message in your profile page, pass a value as query string and write jquery alert function based on that query string value.

Share dialog opens then closes

My app opens a share dialog when the user submits a form. The dialog is called on document ready (jQuery) when the page refreshes after the submit.
The dialog box does open, but then closes a couple of second later. This pretty much renders the dialog useless. If you try and hit 'share' before it closes then it does work, but obviously most users aren't going to try and race it.
The app can be found here: https://apps.facebook.com/topmoviesseen/
I have noticed that it can be tempremental, with the odd time seeing it work perfectly. Other times the dialog disappears only to reappear 4 or 5 seconds later. I would hazard a guess that there is some sort of JS affecting either the z-index or visibility of the box, but I cannot find anything.
Any help is hugely appreciated.
Code used to call dialog:
$(document).ready(function(){
// calling the API ...
var obj = {
method: 'feed',
display: 'iframe',
access_token: 'example',
name: 'Top 100 Movies Seen',
link: 'https://apps.facebook.com/topmoviesseen/',
picture: 'https://mgnewmedia.com/topmovies/assets/images/for_stream.png',
description: 'I have seen 62 of the top 100 movies of all time. How many have you seen?',
caption: 'Done any better?',
message: '62 out of 100 isn\'t bad.'
};
FB.ui(obj, callback);
});
you have to make sure your FB.ui is called after your FB.init is complete, so setting it in the window.fbAsycncInit listener will help:
window.fbAsyncInit = function() {
FB.ui(...)
};

Facebook Send Dialog identify whether send or cancel has been clicked

I'm using the Facebook Send Dialog to send messages to friends. As documented here: https://developers.facebook.com/docs/reference/dialogs/send/ and am using a link like the one in Facebook's example:
https://www.facebook.com/dialog/send?app_id=123050457758183&name=People%20Argue%20Just%20to%20Win&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=http://www.example.com/response
On the page I have specified as the redirect_uri I am displaying text saying: "Your message has been sent". However I've realised that you see this page even if you've clicked cancel in the Facebook dialog.
Is there any way to determine whether save or cancel has been clicked?
Update: I've found a workaround using the FB.ui method which solves the immediate issue I was having. I would still be interested to know if anyone has a better solution using a Send Dialog link like the one above.
I've found a work around by using Facebook's Javascript SDK's FB.ui method.
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html,
display: 'popup'
});
N.B. display must be set to popup for this to work!
As it does not require a redirect_uri, the issue of knowing whether save or cancel has been clicked is not an issue. If however you do wish to know this, you can access a response object:
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html,
display: 'popup'
},
function(response) {
if (response){
// save has been clicked
} else {
// cancel has been clicked
}
});
Small complement to Andy's response:
the response-object does not give much info about what has been sent, actually (returns [] in console), but the mere EXISTENCE of the reponse object indicates the "SEND" button has been pressed
FB.ui(obj, function (param) {
if (param) {
// The "SEND" button has been pressed
}
else{
// The "Cancel" button has been pressed
}

Categories