im having a problem on implementing the login FB on my framework7 code. It just doesnt display the button, as follows:
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<button class="btn-default" scope="public_profile,email" onlogin="checkLoginState();">Login fb</button>
</div>
</div>
Any sugestion on how to tackle this problem?
Does your project is in cordova environment ? , I would suggest You using cordova fb plugin
https://github.com/Wizcorp/phonegap-facebook-plugin
Mine work like a charm
Login page
<li class="item-link">
<a class="signin button button-raised">Sign In</a>
</li>
<li class="item-link">
<a class="registerpage button button-raised">Register</a>
</li>
<li class="item-link">
<span id="facebookLogin" class="button button-fill color-blue">Login With Facebook</span>
</li>
<li class="item-link">
<span id="googleLogin" class="button button-fill color-red">Login With Google</span>
</li>
</ul>
</div>
init function
$('#facebookLogin').on('click', function () {
facebookLogin();
})
facebookLogin function
function facebookLogin() {
facebookConnectPlugin.login(["public_profile", "user_birthday", "user_hometown", "email"],
fbLoginSuccess,
function (error) { app.app.alert(JSON.stringify(error)) }
);
var fbLoginSuccess = function (userData) {
// use token from userData to your existing login system
//userData.authResponse.accessToken
};
}
Related
I have followed a Microsoft template to get an ASP.NET Core React JS project in visual studio 2022. The end product displays a list of weather forecasts with no navigability in the website. I am trying to convert the site to be more adaptable and start building my own project. I have attached a navbar file that I would like to implement, and the removal of the weather forecast. Please can someone tell me how to do this?
App.js
import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from './Navigation/Navbar.js';
export default class App extends Component {
static displayName = App.name;
constructor(props) {
super(props);
this.state = { forecasts: [], loading: true };
}
componentDidMount() {
this.populateWeatherData();
}
static renderForecastsTable(forecasts) {
return (
<table className='table table-striped' aria-labelledby="tabelLabel">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
{forecasts.map(forecast =>
<tr key={forecast.date}>
<td>{forecast.date}</td>
<td>{forecast.temperatureC}</td>
<td>{forecast.temperatureF}</td>
<td>{forecast.summary}</td>
</tr>
)}
</tbody>
</table>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading... Please refresh once the ASP.NET backend has started. See https://aka.ms/jspsintegrationreact for more details.</em></p>
: App.renderForecastsTable(this.state.forecasts);
return (
<div>
<h1 id="tabelLabel" >Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
{contents}
</div>
);
}
async populateWeatherData() {
const response = await fetch('weatherforecast');
const data = await response.json();
this.setState({ forecasts: data, loading: false });
}
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
Navbar.js
import React from "react";
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">
Home <span className="sr-only">(current)</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Features
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Pricing
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown link
</a>
<div
className="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<a className="dropdown-item" href="#">
Action
</a>
<a className="dropdown-item" href="#">
Another action
</a>
<a className="dropdown-item" href="#">
Something else here
</a>
</div>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
Im used Bootstrap v4-alpha Im added pop over its working, but i need to add popover-content for the on click function its not fire in Ember-js,
how to put onclick function in emebr-js
this is im used onlick event
<li class="list-group-item" onclick={{action `'event'}}>Airport Pickup</li>
This is my code sample
add-newbooking.hbs
<div class="form-group">
<a href="#" data-toggle="popover" data-placement="bottom" data-toggle="popover" title="Bill Category">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder=""></a>
</div>
<title>Bootstrap Example</title>
<!-- loaded popover content -->
<div id="popover-content" style="display: none">
<ul class="list-group custom-popover">
<li class="list-group-item" onclick={{action 'event'}}>Airport Pickup</li>
<li class="list-group-item" >Food and Beverage</li>
<li class="list-group-item">Yoga Class</li>
</ul>
</div>
<script>$(document).ready(function() {
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
});</script>
add-newbooking.js
import Ember from 'ember';
export default Ember.Component.extend({
actions:{
event: function () {
console.log("ppessssssss")
}
}
});
The guides have a whole section on this
<li class="list-group-item" {{action 'event'}}>Airport Pickup</li>
You could be better off adding a link or button inside the list item though so that the button is focusable etc
adding onclick and action on an element will add both events i.e. DOM events as well as ember events. so always remember to add any one of the events (preferably ember).
I'm using ember.js with handlebars, and it seems external URL cannot be reached without a script. I put a link to www.google.com to test and it never fires! Is there something I am missing on?
<script type="text/x-handlebars" data-template-name="subusers">
<div class="click-nav" {{action 'toggleDdSubusers'}}>
<ul class="no-js" >
<li>
<a class="clicker">
{{render 'currentsubuser'}}
</a>
<ul class="filter-options">
{{#each subuser in model}}
{{#unless (equals subuser.id currentSubuserInfos.id)}}
<li>
<a href="http://www.google.com">
<span class="profileimg">{{{subuser.profileImage}}}</span>{{subuser.name}}<span class="numbers"> ({{subuser.openedConvCount}})</span>
</a>
</li>
{{/unless}}
{{/each}}
</ul>
</li>
</ul>
</div>
</script>
I still don't know why I got this behavior on my app. What I did to solve my problem is I put an action on my li and send the wanted redirect URL as a function parameter.
In this action, I simply manually redirect with : window.location.href = paramUrl.
I am a newbie in MeteorJS. I tried to do list with download and report buttons:
List template:
<template name="myBooks">
<div class="container">
<h2>My books</h2>
<div class="list-group">
{{#each myBooks}} {{> myBookListItem}} {{/each}}
</div>
</div>
</template>
myBookListItem Template:
<template name="myBookListItem">
<a class="list-group-item">
<span class="badge badge-success">{{downloads}}</span>
<span class="badge badge-error">{{warnings}}</span>
<h4 class="list-group-item-heading "><i>{{title}}</i> - {{author}}</h4>
<p class="list-group-item-text ">{{description}}</p>
<button type="submit" id="download" class="btn btn-success">Download</button>
<button type="submit" id="report" class="btn btn-danger">Report</button>
</a>
</template>
My book collection item contains also "link" property which is url to downloadable pdf - how can I access it on #download button click?
if (Meteor.isClient) {
Template.myBookListItem.events({
'click #download': function (event) {
//What_kind_of_magic_shoud_i_use_here()
alert();
},
'click #report': function (event) {
alert();
},
});
}
Anybody can help me:)?
I just needed to use this.link.
I want to change the DIV class base on CLICK action. I am trying to make a floating sidebar like this http://startbootstrap.com/templates/simple-sidebar.html
This demo has only three lines of code for toggle-ing the class.
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
I want to achive same thing but in ember way. Below is my HTML code:
<div id="wrap">
<div class="pull-left" id="main_menu">
<ul class="list-group">
<li class="list-group-item">{{#link-to "selectImage"}}<h4>Choose Picture</h4>{{/link-to}}</li>
<li class="list-group-item">{{#link-to "message"}}<h4>Write Message</h4>{{/link-to}}</li>
<li class="list-group-item"><h4>Account info</h4></li>
<li class="list-group-item"><h4>Recent Orders</h4></li>
<li class="list-group-item"><h4>How to</h4></li>
<li class="list-group-item"><h4>FAQ</h4></li>
</ul>
</div>
<!-- Begin page content -->
<div class="container" id="page_content">
{{outlet}}
</div>
<!-- End page content -->
</div>
</script>
<script type="text/x-handlebars" id="cards/index">
<h1>
<button class="pull-left btn btn-default" data-target="#main_menu" {{action 'changeClass'}}>
<img src="images/icons/menu_tablet.png" class="main_menu"/>
</button>
</script>
Now I do not know how can I use the action to change the class in WRAP div. I will really appreciate any help regarding this issue.
You can add the action handler within the controller for cards/index
Controller = Ember.ObjectController.extend({
actions: {
changeClass: function() {
// Run logic here
}
}
})