How to submit a form using JsonP in Sencha Touch 2? - forms

I'm writing an application using Sencha Touch 2, it works just fine when accessed from web. The problem came when I built it for iPhone and changed the url from a local url (../services/myservice.php) to a remote url (http://remoteurl.com/services/myservice.php)
I started getting a crossdomain error:
**XMLHttpRequest cannot load http://example.com/services/userRegister.php?_dc=1336972603884. Origin http://localhost is not allowed by Access-Control-Allow-Origin.**
And I'd like to ask you if there is a way to submit a form using jsonp, so I don't have this problem anymore.
Here is my code for the form:
Ext.define('RegistroMovil.view.Register',{
extend: 'Ext.form.Panel',
xtype: 'register',
requires:[
'Ext.form.FieldSet',
'Ext.form.Email'
],
config: {
title: 'Register',
iconCls: 'user',
url: 'http://example.com/proys/congreso/services/userRegister.php',
items: [
...
And the code of the button that submits the form:
{
xtype: 'button',
text: 'Register',
handler: function(){
this.up('register').submit({
success: function(f, a){
alert('Your id: ' + a.id);
f.reset();
}
});
}
},
Thank you very much!

You are getting the above error because of cross-origin resource sharing policy.
On the tap event handler of submit button, you could use an Ext.Ajax.request(); but I feel that would also land up you getting the same error.
E.g
Ext.Ajax.request({
values : paramValues // values from form fields..
url: '.../test.php',
success: function(response) {
console.log(response.responseText);
}
failure: function(response) {
console.log(response.responseText);
}
});
So, it's better to write an Ext.util.JSONP.request() to handle a form submit.
Note that if you are retrieving data from a page that is in a domain
that is NOT the same as the originating domain of the running page,
you must use this class, because of the same origin policy.
E.g
Ext.util.JSONP.request({
params: paramValues // values from form fields..
url: '.../test.php',
callbackKey: 'callback',
scope: 'this',
success: function(response) {
console.log(response.responseText);
}
failure: function(response) {
console.log(response.responseText);
}
});

Related

Facebook sharing: going from 'feed' to 'share_open_graph'

I'm messing around with an Angular app, let's say for the sake of argument that I'm not using any meta tags, how can I use the Share Dialog to let users share pages of my app?
Using the old Feed Dialog works, but it has been deprecated:
$scope.share = function() {
FB.ui({
method: 'feed',
name: 'This is the name field',
link: 'The link',
picture: 'The picture',
caption: 'The caption',
description: 'This is the content of the "description" field, below the caption.'
})
},
function(response) {
if (response && !response.error_code) {
console.log('Posting completed.');
} else {
console.log('Error while posting.');
}
});
};
So even though this works, I want to use the Share Diolog in the same way but I'm not figuring it out. This is sort of what I've been trying, keep in mind that I'm a newbie:
$scope.share = function() {
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object: {
'title': 'The title',
'image': 'An image',
'url': $scope.shareUrl,
'description': 'This is the description',
}
})
},
function(response) {
if (response && !response.error_code) {
console.log('Posting completed.');
} else {
console.log('Error while posting.');
}
});
};
Any hints?
The short answer is that you can't, you must use OpenGraph meta tags.
Since Facebook doesn't understand JavaScript and thus Angular, you must detect Facebook's crawlers server-side and render a static page for them instead of the Angular app.
While the precise implementation will vary depending on your server technologies, here's the general idea:
Setup a route for the resources that need sharing: http://example.com/resources/:id
Look for the user-agent
If it's one of Facebook's crawlers, fetch the resource and render a simple view with OpenGraph tags and an empty body. Otherwise, simply render the Angular app.
Facebook's crawlers are available here and they currently are:
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
facebookexternalhit/1.1
Facebot

How to cancel likes on other site

When you click the Like button https://graph.facebook.com/object_id/likes calls.
To cancel the Like what should I do?
I tried the following:
<code>
<script>
function doLike(objectId) {
$.ajax({
url: 'https://graph.facebook.com/'+objectId+'/likes',
type: 'post',
data: {
access_token: '....'
}
});
}
function doCancel(objectId) {
$.ajax({
url: '???',
type: 'post',
data: {
access_token: '....'
}
});
}
</script>
<input onclick="doLike('...')">Like</button>
<input onclick="doCancel('...')">Cancel</button>
</code>
This drove me nuts. Firefox/Chrome and probably everything else apparently won't allow HTTP DELETE ajax calls unless the host has previously communicated during the current request. So $.ajax{(type: 'delete', ... )} works for YOUR server url host but not anything else.
The workaround is something like:
$.ajax({
url: "https://graph.facebook.com/" + FB_ACTION_ID,
type: 'post',
data: { access_token: ACCESS_TOKEN,
'method': 'delete',
'_method' : 'delete' }
})
If you're looking for an API which allows you to remove a Like of a Facebook page, this is not possible.
If you're looking for an API to remove a Like of an object (via URL) - you can make a HTTP DELETE request to /LIKE_INSTANCE_ID which is the ID returned to your app when you posted the Open Graph like - otherwise it's not possible
You should be able to "unlike" an object ID simply by doing a HTTP DELETE. Using your code, it'd look something like this:
function doCancel(objectId) {
$.ajax({
url: 'https://graph.facebook.com/'+objectId+'/likes',
type: 'delete',
data: {
access_token: '....'
}
});
}
Alternatively, use the Facebook Javascript SDK, in which you can simply do:
FB.api("/" + objectId + "/likes", 'delete', callback);
where callback is the function to call when the unlike operation is complete.

facebook api with private message multiple to (friends)

I development facebook private message for invite with facebook api.
<script>
FB.init({ appId: 'xxxxxxxxxx', xfbml: true, cookie: true });
FB.ui({
method: 'send',
to: ['1736383768','590528674'],
// picture: 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
//Can be page, popup, iframe, or touch.
display: 'popup',
name: 'yyyyyy',
link: '<%=Request.QueryString["link"]%>'
});
</script>
but adds only the first mate.
how to multiple friends send private message ?
var publish =
{
method: 'stream.publish',
message: 'Some kind of test',
uid: uid,
attachment: {
name: 'Test',
caption: 'Facebook API Test',
description: ('Sure hope it worked!'),
href: 'http://www.test.com/',
media: [
{
type: 'image',
href: 'http://test.com/',
src: 'http://test.com/image.jpg'
}
]
},
action_links: [
{ text: 'Your text', href: 'http://www.test.com/' }
],
user_prompt_message: 'Share your thoughts about test'
};
publish.target_id = friendID;
FB.ui(publish);
publish.target_id = friendID;
FB.ui(publish);
return false;
You should not use stream.publish.
As said by facebook : "We are in the process of deprecating the REST API, so if you are building a new application you shouldn't use this function. Instead use the Graph API and POST a Post object to the feed connection of the User object"
So, now you have the send and feed methods left.
You cannot fill the send method with more than one user id (you can only if you are whitelisted by facebook, but I'm not quite sur how to do this , I would not count on it either).
You can use the feed method to post on many user's friends wall with something like this
FB.api('/USERID/feed', 'post', {
name:postName,
link:postLink,
picture:postPicture,
description:postDescription,
message:postMessage
}, function (postResponse) { //DO SOMETHING HERE });
But doing it, you are taking the risk of your app being deleted by facebook if someone flag it as spam.
As far as I know, sending messages to multiple friends via an App is considered bad/spam by facebook so they do not allow this anymore.
You still can Invite as many friends as you want via the App request dialog (method apprequests) but I'm not sure this is what you want.

Extjs getting fields values from extended FormPanel

The submit button for my formPanel works by using scope:this as it is an extended formPanela nd ext.getCmp(formid) doesn't work.
In my submit function, it successfully works using this.getForm().submit(....). However when trying to get the field values, this.getForm().getFields() doesn't work, flagging that it is not a function.
the buttons & handler function is nested within the formPanel setup.
Can anyone shed light on how to get the values in this manner?
Submit function:
{
text: 'Submit',
id: "submitBtn",
handler: this.submit,
scope: this
}
....
,submit : function(url, waitMsg) {
//this.getForm.getFields()
this.getForm().submit({
url: url
,scope: this
,waitMsg: 'Please wait'
,success: this.onSuccess
//,failure: this.onFailure
});
}
submit : function(url, waitMsg) {
//this.getForm.getFields() -- should work now
this.getForm().submit({
url: url
,scope: this
,waitMsg: 'Please wait'
,success: this.onSuccess
//,failure: this.onFailure
});
}.createDelegate(this)
I've resolved this by not using the submit action but by using a simple Ext.Ajax.request:
,submit : function() {
var data = this.getForm().getValues();
Ext.Ajax.request({
url: '...',
method: 'GET',
timeout:180000,
params: {
param1: Ext.encode(this.getForm().getValues())
}
.
})

FB.ui share how to open in page instead of popup

Trying to set up a sharing mechanism with FB.ui.
The issue is the share dialog opens a popup instead of it opening in the same page.
The reason I'm trying to avoid the popup is that safari doesn't show the popup in mobile.
<script>
$(document).ready(function()
{
$.ajax(
{
url: '//connect.facebook.net/en_US/sdk.js',
dataType: 'script',
cache: true,
success:function(script, textStatus, jqXHR)
{
FB.init({
appId : 'someID',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
share();
}
});
});
function share() {
FB.ui(
{
method: 'share',
href: 'https://example.com',
quote: 'Some description',
title : 'Title',
hashtag: null,
display: 'iframe'
},
response => {
window.parent.postMessage(
{
earningRule: 'fb_share',
action: 'shared',
response: response
}
);
}
)
}
</script>
Is there any way to either avoid the popup or to address the safari popup blocking issue?
Thanks in advance
The main problem is that you are trying to open the dialog in the callback function of an AJAX request. You must use FB.ui directly on mouse interaction, or it will get blocked by browsers.
If that does not work, you can use sharer.php instead: https://developers.facebook.com/docs/workplace/sharing/share-dialog/?locale=de_DE#sharedialogvialink