Facebook FB.ui dialog iOS Web App unclosable - facebook-javascript-sdk

I have FB.ui working well, I can share whatever info I need to share. However the issue is that it's being rolled into a Web App (This "add to home screen") for an ipad. Whenever the dialog opens, it's opened full screen, and once it's shared there is no way to close the opened dialog.
<input type="button" onclick="share_prompt()" value="Share" />
function share_prompt()
{
FB.ui(
{
method: 'feed',
display: "iframe",
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
I've changed the "display" property to everything possible, but the docs say that it defaults to a "touch" display in web apps.
Also, to make it even more frustrating, the response doesn't fire when in web app mode. Only in the browser window.
Any ideas?

This is the way I solved this:
if(navigator.standalone){
new_url = 'https://www.facebook.com/dialog/feed?'+
'app_id=XXXXXXXXXXXXX'+
'&display=popup'+
'&caption='+fbName+
'&picture='+fbPicture+
'&description='+fbDescription+
'&link='+fbLink+
'&redirect_uri=http://myurl.com/mycontroller/#post_id';
window.open(new_url,'_self');
} else {
//do the normal way
}
This way you can have a redirect url and you can send the post id back to your app if you need it. Hope this answers your question if you still didn't find a way to solve it.

Related

Integrating nativescript-paytm plugin in nativescript-vue application

I'm having a nativescript-vue application where I want to integrate nativescript-paytm plugin, I created a method on click event: payNow() which contains all the necessary details of Paytm as described in Readme.md/documentation/demo app.
import {
Paytm,
Order,
TransactionCallback,
IOSCallback
} from "#nstudio/nativescript-paytm";
const paytm = new Paytm()
methods: {
payNow() {
paytm.setIOSCallbacks({
didFinishedResponse: function(response) {
console.log(response);
},
didCancelTransaction: function() {
console.log("User cancelled transaction");
},
errorMissingParameterError: function(error) {
console.log(error);
}
});
// Sample order
const order = {
// This will fail saying duplicate order id
// generate your own order to test this.
MID: "rzqfRq*******83",
ORDER_ID: "NOETIC_ORDER_0001",
CUST_ID: "CUST_6483",
INDUSTRY_TYPE_ID: "Retail",
CHANNEL_ID: "WAP",
TXN_AMOUNT: "10.00",
WEBSITE: "WEBSTAGING",
CALLBACK_URL: "https://pguat.paytm.com/paytmchecksum/paytmCallback.jsp",
EMAIL: "rubal#example.com",
MOBILE_NO: "9876543210",
CHECKSUMHASH: "NDspZhvSHbq44K3A9Y4daf9En3l2Ndu9fmOdLG+bIwugQ6682Q3JiNprqmhiWAgGUnNcxta3LT2Vtk3EPwDww8o87A8tyn7/jAS2UAS9m+c="
};
paytm.initialize("STAGING");
paytm.createOrder(order);
paytm.startPaymentTransaction({
someUIErrorOccurred: function(inErrorMessage) {
console.log(inErrorMessage);
},
onTransactionResponse: function(inResponse) {
console.log(inResponse);
},
networkNotAvailable: function() {
console.log("Network not available");
},
clientAuthenticationFailed: function(inErrorMessage) {
console.log(inErrorMessage);
},
onErrorLoadingWebPage: function(
iniErrorCode,
inErrorMessage,
inFailingUrl
) {
console.log(iniErrorCode, inErrorMessage, inFailingUrl);
},
onBackPressedCancelTransaction: function() {
console.log("User cancelled transaction by pressing back button");
},
onTransactionCancel: function(inErrorMessage, inResponse) {
console.log(inErrorMessage, inResponse);
}
});
}
}
While executing so I only get to see screens like this:
I can see that while cancelling I get a message in my console User cancelled transaction by pressing back button that means these things are also working but I am unable to see any screen, atleast if any error message is visible I can try to debug. Help me out with this.
Here's the message which I get in my command prompt:
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
chromium: [INFO:aw_field_trial_creator.cc(54)] First-WebView-Experiment not found
JS: 'User cancelled transaction by pressing back button'
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
chromium: [INFO:CONSOLE(0)] "The SSL certificate used to load resources from https://pguat.paytm.com will be distrusted in the future. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.", source: (0)
chromium: [INFO:CONSOLE(0)] "The SSL certificate used to load resources from https://pguat.paytm.com will be distrusted in the future. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.", source: https://pguat.paytm.com/oltp-web/processTransaction?ORDER_ID=NOETIC_ORDER_0001 (0)
JS: 'User cancelled transaction by pressing back button'
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
chromium: [INFO:CONSOLE(0)] "The SSL certificate used to load resources from https://pguat.paytm.com will be distrusted in the future. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.", source: (0)
chromium: [INFO:CONSOLE(0)] "The SSL certificate used to load resources from https://pguat.paytm.com will be distrusted in the future. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.", source: https://pguat.paytm.com/oltp-web/processTransaction?ORDER_ID=NOETIC_ORDER_0001 (0)
For more info I raised issue on GitHub repo: https://github.com/nstudio/nativescript-paytm/issues/5
Edit:
I tried adding it through playground, but since it uses external library integration is not possible. However I tried using in following link
https://play.nativescript.org/?template=play-vue&id=CpqoNA&v=2
Hope this gives more clear picture about it.
Edit:
My whole payment.vue file looks like following link: https://gist.github.com/nitish1986/f23644514082efe757f132e943f2df51
Thanks

Notification in Tizen wearable web app to display the UI of app running in background

In the tizen wearable web application that I am developing, I need my application to prompt a notification to the user every 10min to go into the same application and give some sort of input from the app UI.
I am currently using a simple status notification from notification API which gives a notification having link to the current application. When user clicks on it, the application is launched again (as it does according to description in simple status notifiation).
But I don't want the application to be restarted by clicking on the notification. Instead it should get the application running background to display on the watch UI.
Please let me know any possible solutions to achieve this.
Below is the code I am using right now.
var myappInfo = tizen.application.getAppInfo();
var notificationDict = {
content : "Please enter your response.",
iconPath : "images/icon.png",
vibration : true,
soundPath : "music/solemn.mp3",
appId : myappInfo.id
};
currentBatteryLevelNotification = new(tizen.StatusNotification("SIMPLE",
"Your input required!", notificationDict);
tizen.notification.post(currentBatteryLevelNotification);
I tried playing with your code, got some progress using:
AppContextId
var myappInfo = tizen.application.getAppContext();
//appId : myappInfo.id or muappInfo.appId
and Moving app to background:
document.addEventListener('tizenhwkey', function(e) {
if(e.keyName === "back") {
try {
tizen.application.getCurrentApplication().hide();
//instead of tizen.application.getCurrentApplication().exit();
} catch (ignore) {
}
}
});
config.xml:
<tizen:setting background-support="enable" encryption="disable" hwkey-event="enable"/>
Tip: If you don't add background-support for Web application, it just dies once you are on exit, It's not possible to get current state.
But I assume the answer is No. May be Notification API is not designed to launch running application I guess.

Worklight 6.1: How to add EULA to hybrid app

Environment:
Worklight 6.1.0.2
dojo 1.9.4
We have created a hybrid app using Worklight 6.1 for android, iOS and windows8 platform. Now we would like to add and show End User License Agreement (EULA) window to the user, when the app first time launch. It should have Accept and Decline button. If user tap on Accept button, then he should be able to use the app.
I would like to know, how can we achieve this using Worklight 6.1.
Any help on this, will be much appreciated.
FYI there is nothing specific here to Worklight.
You could implement this in any number of ways w/out ever using any Worklight API whatsoever.
You could achieve it for example like this (untested code - you'll need to experiment):
In main.js create some global variable eulaAccepted:
var eulaAccepted;
// You will need to handle this property using HTML5 Local Storage so that it will persist for the next time the app is launched, and have the app act accordingly.
Then, in wlCommonInit():
function wlCommonInit() {
if (!eulaAccepted) {
displayEula();
} else {
displayApp();
}
}
In displayEula():
function displayEula() {
// either display a dialog using `WL.SimpleDialog`...
// Or maybe custom HTML with "accept" and "not accept" buttons
WL.SimpleDialog.show(
"Eula Agreement", "your-eula-text-here",
[{text: "Accept", handler: acceptEula },
{text: "Reject", handler: rejectEula}]
);
}
Handle the result:
function acceptEula() {
eulaAccepted = true;
... // Some code that will store the `eulaAccepted` variable using HTML5 Local Storage API
displayApp();
}
function rejectEula() {
// Display some other custom HTML instead of your app.
// Maybe also additional logic to try again to accept the Eula...
}

FB.ui with method 'feed' is resulting in an 'unknown error' and CAPTCHA request

We're using code that we've used before, so I suspect that this may be site-related. In using a standard:
FB.ui(
{
method: 'feed',
app_id: '<?= $LDP->config->facebook->id ?>',
name: 'Post Name',
link: flink,
picture: "https://www.domain.ca/templates/visual/images/share.gif",
caption: "Caption",
description: 'Join the fun today!',
actions: [
{ name: "Check it out!", link: flink }
]
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
It first displays the expected share dialog, and when you click the button at bottom right to go through with the stream publication, a new popup appears with:
Title: Require Captcha
unknown error
Security Check
please enter the text below
[captcha appears]
The only button is "Ok". Correctly solving the Captcha results in a crash (Facebook servers throwing a 500 error).
Any ideas?
I'm experiencing this too. I can confirm that changing the domain in the link makes it all good.
I got a parallel domain for our app and after three days the same Captcha with "Unknown error" appeared. Best of all – if a user gives the correct Captcha words the post will still fail. This is pretty annoying and we're getting complaints from our users.
Turns out this is a bug with Facebook (broken captcha issue). The pop-up is an innate anti-spam system, but people should be able to succeed with the CAPTCHA. I'd filed a private bug with Facebook, and it's slated to be fixed apparently.
Try calling FB.init() before calling FB.ui() to see if that helps get things in sync. Also be sure to specify the channelUrl in the init call too.

How can i use the port.postmessage to send info from the background page to the content script in a Google Chrome extension

I've been able to send data from the background page to the content script. but this is done using sendrequest(). I will need to send data back and forth so I'm trying to figure out the correct syntax for using the port.postmessage from background page to content script. I have already read, several times, the google page on Messaging and I don't seem to get it. I even copied the code directly from the page and tested with no result. All I'm trying to do for now is send data from background page to content script using connect as opposed to sendrequest. The response from the content script I will deal with later as code with this response has been the main thorn. I just want to understand the process one step at a time without the extra knowledge of sending a response back.
I'm not sure if this contravenes the rules of this board but can someone PLEASE give me an example of some code to do this (background page and content script excerpt, the background page is the sender).
I've asked for assistance several times on this site only to be told to read the documentation or check out sites I've already visited.
If you just want any example of opening a port from the extension to a content script, here's the simplest I can think of. The background just opens a port and sends "Hello tab!" over the port, and the content script sends a message to the background any time you click on the webpage.
I think this is pretty simple, so I don't know why you are so stressed. Just make sure that the content tab is already listening when the background tries to connect (I do this by waiting until the "complete" event).
manifest.json:
{
"name": "TestExt",
"version": "0.1",
"background_page": "background.html",
"content_scripts": [{
"matches": ["http://localhost/*"], // same as background.html regexp
"js": ["injected.js"]
}],
"permissions": [
"tabs" // ability to inject js and listen to onUpdated
]
}
background.html:
<script>
var interestingTabs = {};
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
// same as manifest.json wildcard
if (changeInfo.url && /http:\/\/localhost(:\d+)?\/(.|$)/.test(changeInfo.url)) {
interestingTabs[tabId] = true;
}
if (changeInfo.status === 'complete' && interestingTabs[tabId]) {
delete interestingTabs[tabId];
console.log('Trying to connect to tab ' + tabId);
var port = chrome.tabs.connect(tabId);
port.onMessage.addListener(function(m) {
console.log('received message from tab ' + tabId + ':');
console.log(m);
});
port.postMessage('Hello tab!');
}
});
</script>
injection.js:
chrome.extension.onConnect.addListener(function(port) {
console.log('Connected to content script!');
port.onMessage.addListener(function(m) {
console.log('Received message:');
console.log(m);
});
document.documentElement.addEventListener('click', function(e) {
port.postMessage('User clicked on a ' + e.target.tagName);
}, true);
});
Detailed documentation and easy (the most basic) examples shown in the documentation page.
Plus, a quick search in stackoverflow will allow you to see many similar questions with detailed answers.