I am creating mobile app using ionic framework in that I am going to implement facebook login.
My fblogin() function should called on ng-click but it didn't. Any help would be appreciated
<ion-view class="welcome-view" ng-controller="WelcomeCtrl as ctrl" cache-view="false">
<ion-content scroll="false">
<div class="top-content row">
<div class="app-copy col col-top">
<h1 class="app-logo">logo</h1>
<p class="app-tagline">
This app helps you discover and buy amazing things all in one place.
</p>
</div>
</div>
<div class="bottom-content row">
<div class="col col-bottom">
<a class="facebook-sign-in button button-block" ng-click="facebookSignIn()">
Log in with Facebook
</a>
</div>
</div>
</ion-content>
</ion-view>
my fblogin function
.controller('WelcomeCtrl', function($scope, $state, $q, UserService, $ionicLoading) {
alert('Facebook login init');
//This method is executed when the user press the "Login with facebook" button
$scope.facebookSignIn = function() {
alert('Facebook login init');
facebookConnectPlugin.getLoginStatus(function(success){
if(success.status === 'connected'){
// the user is logged in and has authenticated your app, and response.authResponse supplies
// the user's ID, a valid access token, a signed request, and the time the access token
// and signed request each expire
console.log('getLoginStatus', success.status);
//check if we have our user saved
var user = UserService.getUser('facebook');
if(!user.userID)
{
getFacebookProfileInfo(success.authResponse)
.then(function(profileInfo) {
//for the purpose of this example I will store user data on local storage
UserService.setUser({
authResponse: success.authResponse,
userID: profileInfo.id,
name: profileInfo.name,
email: profileInfo.email,
picture : "http://graph.facebook.com/" + success.authResponse.userID + "/picture?type=large"
});
$state.go('app.home');
}, function(fail){
//fail get profile info
console.log('profile info fail', fail);
});
}else{
$state.go('app.home');
}
} else {
//if (success.status === 'not_authorized') the user is logged in to Facebook, but has not authenticated your app
//else The person is not logged into Facebook, so we're not sure if they are logged into this app or not.
console.log('getLoginStatus', success.status);
$ionicLoading.show({
template: 'Logging in...'
});
//ask the permissions you need. You can learn more about FB permissions here: https://developers.facebook.com/docs/facebook-login/permissions/v2.4
facebookConnectPlugin.login(['email', 'public_profile'], fbLoginSuccess, fbLoginError);
}
});
};
})
Added in ionic play. Its working , Check here.
http://play.ionic.io/app/29b9296b6f89
Add this in your ion-view replace TheNameOFController with the name of the controller you are using
ng-controller="TheNameOFController as ctrl"
and this to your ng-click
ng-click="ctrl.facebookSignIn()"
I have found a solution for that
$scope.$on('$stateChangeSuccess', function() {
$('*[ng-click]').each(function() {
$(this).attr("ng-click");
$(this).attr("on-touch", $(this).attr("ng-click"));
});
});
Related
I work in Angular 2 project (and also use Ionic 2).
In my project, I have a page to display pictures-list.
User can add/remove pictures (by cordova-camera plugin).
My problem is: when user remove picture, I remove it from list behind UI.
Debugging at chrome - work nice.
BUT, try emulate on IOS, or really test on Smart-phone, when user delete picture the view is doesn't get refresh till he press any button.
What should I do???
Here is my code:
HTML:
<ion-list>
<ion-col width-50 *ngFor="let picture of pictures">
<div>
<button (click)="checkAsGood(picture)">I like</button>
<button (click)="deletePicture(picture)"><ion-icon name="trash"></ion-icon></button>
</div>
<div>
<img [src]="picture.src" />
</div>
</ion-col>
</ion-list>
Java Script:
private deletePicture(pictureRecord:Picture) {
var self = this;
self.pictureService.deleteUserPicture(pictureRecord).then(function deleteSucceeded() {
self.pictures.splice(self.pictures.indexOf(pictureRecord), 1);
}, function deleteFaild(error) {
self.messagesService.showToastMessage(error.code)
});
}
Call change detection explicitly
class MyComponent {
constructor(private cdRef:ChangeDetectorRef) {}
private deletePicture(pictureRecord:Picture) {
this.pictureService.deleteUserPicture(pictureRecord).then(() => {
this.pictures.splice(this.pictures.indexOf(pictureRecord), 1);
this.cdRef.detectChanges();
}, (error) => {
this.messagesService.showToastMessage(error.code)
});
}
}
or ensure the callback is executed in Angulars zone already in the service using zone.run(...).
It looks like some functionality your pictureService is using functionality that isn't fully covered by the zone.js package on IOS.
I've been following web tutorials to try to learn angularJS on a .NET MVC Application. All the tutorials seem to cover getting a list, getting an individual item etc.
What I want to do is allow the user to fill in an email address, I want to verify that email address against the database and return true or false if it existed. I'm then trying to put that value in the scope so I can do something in response to whether its true or false.
I'm using a single page app so this is the login html.
<form name="form" class="form-horizontal">
<div class="control-group" ng-class="{error: form.ValidEmailAddress.$invalid}">
<label class="control-label" for="ValidEmailAddress">Valid Email Address</label>
<div class="controls">
<input type="email" ng-model="item.ValidEmailAddress" id="ValidEmailAddress">
</div>
</div>
<div class="form-actions">
<button ng-click="login()" class="btn btn-primary">
Go!
</button>
<label ng-if="user.isAuthorised">Authorised</label>
<label ng-if="!user.isAuthorised">NotAuthorised</label>
</div>
</form>
In my app.js file I declare a loginCtrl controller when the url was /login so that's all fine. The logic that I'm calling on my button click is this:
var LoginCtrl = function ($scope, $location, $http, AuthorisedUser) {
$scope.login = function() {
var isValidUser = $http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress);
$scope.user.isAuthorised = isValidUser;
} };
Which is then calling an MVC AuthorisedUserController class method:
public bool IsValidUser(string id)
{
var list = ((IObjectContextAdapter)db).ObjectContext.CreateObjectSet<ApprovedUser>();
var anyItems = list.Any(u => u.ValidEmailAddress == id);
return anyItems;
}
So it vaguely seemed to be working when I put in a value like "aaa" into the textbox. But as soon I try putting in an email address the value is undefined. Maybe I'm supposed to be doing a post but the only thing I can successfully hit my .NET controller with is by using get.
I'm sure I'm missing fundamental knowledge and potentially tackling this in the wrong way.
In case it helps I've created a module and defined factories like this:
var EventsCalendarApp = angular.module("EventsCalendarApp", ["ngRoute", "ngResource"]).
config(function ($routeProvider) {
$routeProvider.
when('/login', { controller: LoginCtrl, templateUrl: 'login.html', login: true }).
otherwise({ redirectTo: '/' });
});
EventsCalendarApp.factory('AuthorisedUser', function ($resource) {
return $resource('/api/AuthorisedUser/:id', { id: '#id' }, { isValidUser: { method: 'GET' } });
});
One of my questions is - should I be accessing the controller method using the $http object, or is there a way of using my factory declaration so that I can go something like:
AuthorisedUser.IsValidUser($scope.item.validEmailAddress)
I know in the tutorial I was following I could do stuff like:
CalendarEvent.save()
to be able to call a CalendarEventController post method.
What i think is, your get() function will return a promise. and you can't assign promise like this. so better try this approch once. I hope, it'd work. if not please let me know...
here I assume your first,second and third snippet of code works fine...
$http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress).success(function (result, status) {
var isValidUser=result;
$scope.user.isAuthorised = isValidUser;
$scope.$apply();
}).error(function (result, status) {
//put some error msg
});
Searched for almost 2 days and cant able to find a suitable answer.
I am developing a Jquery Mobile page. Currently I have 2 JQuery Mobile pages. When the page is launched it will show a button. Hitting the button will send a SOAP request to the server to get a response. After receiving the response the second page will be displayed.
The SOAP request might take a minimum of 3 to 5 seconds. During that time I would like to show a loader/spinner on the centre of the page till I get the response from the server. How to do that? Following is the code I use.
HTML File containing 2 pages
<form name="frm_login" action="" method="post">
<div id='pg_login' data-role="page">
<div data-role="content">
<input type="submit" name="btn_login_submit" id="btn_login_submit" value="Login" />
</div>
</div>
<div id='pg_menu' data-role="page">
<div data-role="header" data-position="fixed">
<h1>Welcome</h1>
</div>
</div>
</form>
Javascript code as below
$(document).ready(function() {
$('form').submit(function(e){
e.preventDefault();
var xmlRequest = getXmlRequest();
loadingStart();
$.soap({
url: 'full wsdl url',
method: 'getUserName',
data: xmlRequest,
success: function(xmlResponse) {
loadingEnd();
$.mobile.changePage('#pg_menu');
},
error: function(xmlResponse) {
}
});
return false;
});
});
function loadingStart(){
$.mobile.loading( 'show', {
text: "loading",
textVisible: true
});
}
function loadingEnd(){
$.mobile.loading( "hide" );
}
I also keep a 5 second sleep time in the WSDL function for testing purposes.
The loader is not displaying. Please let me know what is going wrong here.
Regards
Malai
The problem is because of the jQuery SOAP plugin (http://plugins.jquery.com/soap/)
After I change to native AJAX things started working fine with the below code.
$(document).ajaxStart(function() {
$.mobile.loading( 'show', {
text: "loading...",
textonly: false,
textVisible: true,
theme: 'a',
html: ""
});
});
$(document).ajaxStop(function() {
$.mobile.loading('hide');
});
I have a jquery mobile app integrated with phonegap to deploy on android devices, with following markup in index.html file :
<div id="home" data-role="page">
<div data-role="content">
Details
</div>
</div>
<div id="about" data-role="page">
</div>
When I go to about page and change the device orientation, it redriects to 'home' page and does not remian on the current page.
also in home page 'pagecreate' event I check a condition and if it true, I change the page to about page, but I see that home page`s 'pagebeforeshow' event is fired, and I dont want it to happen.
$(document).on('pagecreate', '#home', function (e) {
if (e) {
e.preventDefault();
}
if(condition){
$.mobile.changePage( "#aboutus",null );
}
else
{
//
}
});
$(document).on('pagebeforeshow', '#home', function (e) {
if (e) { e.preventDefault(); }
});
Basically I want to display a list of friends (with pictures and names) and invite them to my app I'm creating in rails with the fb_graph gem. The link shows the flow of how this would work, basically you would click an "Invite Friends" button and a list of friends would pop up with a button allowing you to invite the respective user.
http://www.quora.com/User-Acquisition/What-is-the-best-invite-a-friend-flow-for-mobile
Is there a way to do this with fb_graph?
You bet. Assuming you have a working implementation of fb_graph, you can get a list of friends with the following command (from https://github.com/nov/fb_graph ):
FbGraph::User.me(fb_token).friends
You can use that to generate your UI for your friends list, then invite the selected friends, like so ( untested modification from the previous link, as well as https://developers.facebook.com/docs/reference/dialogs/requests/ ):
app_request = FbGraph::User.me(token).app_request!(
:message => 'invitation message',
:to => friend.uid
)
The previous code also can accept a comma separated collection of UIDs.
I'll leave you to design and code the UI, but it is possible, using fb_graph, for sure. Those two links should be solid gold, should you decide to expand the scope, at all.
Thanks for your interest for my gem.
Brad Werth's code works for existing (= already installed your app) users, but probably not for new users.
There are lots of limitations to send App Requests in background to avoid spamming.
That limitation directly affect fb_graph's sending App Request feature.
If you are developing iOS app, I recommend you to use FB official iOS SDK.
https://developers.facebook.com/docs/howtos/send-requests-using-ios-sdk/
Using iOS SDK (or JS SDK in html5 app), you have less limitations.
ps.
I'm not familiar with Android App development nor FB official Android SDK, but I assume they have something similar functionality in their Android SDK too.
Of course Facebook provides a beautiful dialog box to select friends that you want to send requests to. But there is also a nice tool, built in javascript, through which you have the same kind of Facebook Friends selector dialog box.
JQuery Facebook Multi-Friend Selector Plugin
This plugin will make a Graph API call to Facebook and collect your friend list. The advantage of this plugin is that it will load all the friends list in "lazy loading mode".
This might be of some help, I used it on my PHP server and it worked.
This code helps you post, send messages, and also send requests to your friends.
Head tag:
<script type="text/javascript">
function logResponse(response) {
if (console && console.log) {
console.log('The response was', response);
}
}
$(function(){
// Set up so we handle click on the buttons
$('#postToWall').click(function() {
FB.ui(
{
method : 'feed',
link : $(this).attr('data-url')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
$('#sendToFriends').click(function() {
FB.ui(
{
method : 'send',
link : $(this).attr('data-url')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
$('#sendRequest').click(function() {
FB.ui(
{
method : 'apprequests',
message : $(this).attr('data-message')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
});
</script>
Body Tag:
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxxx', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Listen to the auth.login which will be called when the user logs in
// using the Login button
FB.Event.subscribe('auth.login', function(response) {
// We want to reload the page now so PHP can read the cookie that the
// Javascript SDK sat. But we don't want to use
// window.location.reload() because if this is in a canvas there was a
// post made to this page and a reload will trigger a message to the
// user asking if they want to send data again.
window.location = window.location;
});
FB.Canvas.setAutoGrow();
};
// Load the SDK Asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<header class="clearfix">
<?php if (isset($basic)) { ?>
<p id="picture" style="background-image: url(https://graph.facebook.com/<?php echo he($user_id); ?>/picture?type=normal)"></p>
<div>
<h1>Welcome, <strong><?php echo he(idx($basic, 'name')); ?></strong></h1>
<p class="tagline">
This is your app
<?php echo he($app_name); ?>
</p>
<div id="share-app">
<p>Share your app:</p>
<ul>
<li>
<a href="#" class="facebook-button" id="postToWall" data-url="<?php echo AppInfo::getUrl(); ?>">
<span class="plus">Post to Wall</span>
</a>
</li>
<li>
<a href="#" class="facebook-button speech-bubble" id="sendToFriends" data-url="<?php echo AppInfo::getUrl(); ?>">
<span class="speech-bubble">Send Message</span>
</a>
</li>
<li>
<a href="#" class="facebook-button apprequests" id="sendRequest" data-message="Test this awesome app">
<span class="apprequests">Send Requests</span>
</a>
</li>
</ul>
</div>
</div>
<?php } else { ?>
<div>
<h1>Welcome</h1>
<div class="fb-login-button" data-scope="user_likes,user_photos"></div>
</div>
<?php } ?>
</header>