I'm loading the Paypal smart button into a vue component. I've tried loading the external Paypal js script, which appears to create a paypal object.
However when trying to access the paypal object, I get this error:
found in
---> <PaypalButton> at resources/assets/js/components/PaypalButton.vue
<Root>
After the page is loaded, I can successfully console.log(paypal) in chrome dev tools console window, and I can also successfully create a button in vue to also access it, but it does not appear to be able to referenced in the mounted hook.
Here is the code:
<template>
<div class="paypal-button-wrapper">
<div id="paypal-button-container"></div>
<button #click="showPaypal">Clicking this successfully renders the button</button>
</div>
</template>
<script>
export default {
data: () => ({
}),
mounted: function () {
let paypalScript = document.createElement('script');
paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=AUo4kSgRdH44poEYLQwPdqM24oN8nQc4Jm1HAkWs5vQTAMGu-BBlpfN4xnMDEzSGfj4wjwOy6eLtNKyv¤cy=USD');
document.head.appendChild(paypalScript);
this.showPaypal(); // fails to render the paypal button, with reference error
},
methods: {
showPaypal: function() {
paypal.Buttons().render('#paypal-button-container');
}
}
};
</script>
The solution is to use paypalScript.onload. I'm not sure if this is the most direct method, but it does work.
mounted: function () {
let paypalScript = document.createElement('script');
paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=SB_ID¤cy=USD');
document.head.appendChild(paypalScript);
var that = this;
paypalScript.onload = function () {
that.showPaypal();
};
},
Reference: Run the method of the Vue component after the external script is loaded
Related
I want to include an external rtf component in my svelte app.
I tried adding tinymce using the cdn in template.htm and then creating the following svelte component. The editor renders, however I can't get data into or out of the editor.
<script>
import { onMount, tick } from 'svelte'
export let label = ''
export let value = ''
$: console.log('value', value)
onMount(() => {
tinymce.init({
selector: '#tiny',
})
})
</script>
<p>
<label class="w3-text-grey">{label}</label>
<textarea id="tiny" bind:value />
</p>
Super old but encountered this today and found a solution.
Solution:
<svelte:head>
<script src="https://cdn.tiny..."></script>
</svelte:head>
<script>
import {onMount} from 'svelte';
let getHTML;
let myHTML;
onMount(() => {
tinymce.init({
selector: '#tiny'
})
getHTML = () => {
myHTML = tinymce.get('tiny').getContent();
}
})
</script>
<textarea id="tiny" bind:value />
<!-- click to get html from the editor -->
<button on:click={getHTML}>Get HTML from TinyMCE</button>
<!-- html is printed here -->
{myHTML}
Explanation:
My initial thought was to bind per normal with
<textarea bind:value></textarea>
but that doesn't work I think because tinyMCE is doing complicated stuff in the background. Instead of adding the cdn reference in template.htm I used <svelte:head> so it only is loaded for this component. The function tinymce.get('...').getContent() must be called to get the contents of the editor, but it requires tinyMCE, so it must be called within the onMount. So I define a function getHTML within onMount. Now getHTML can be used anywhere to assign the contents of the editor to myHTML.
step one:
run this command on in your terminal
npm install #tinymce/tinymce-svelte
(reference for installation : https://www.tiny.cloud/docs/integrations/svelte/)
step two :
<script>
import { onMount } from 'svelte';
let myComponent;
let summary='';
onMount(async()=>{
const module=await import ('#tinymce/tinymce-svelte');
myComponent=module.default;
})
</script>
step three :
<svelte:component this={myComponent} bind:value={summary}/>
{#html summary}
In Vue 2, I'm implementing Github Social Registration and login with my app.
In my Register.vue, I have button click that would lead to Github
<button class="btn github" #click="registerWithGithub()"><i class="fab fa-github fa-fw"></i> Register with Github</button>
registerWithGithub() method would look like this
registerWithGithub () {
window.location.href = `https://github.com/login/oauth/authorize?scope=user:email&client_id=${this.githubClientId}`
}
and I have configured a route to get callback from Github?
How do we manage those callbacks in Vue?
I have created a view component called GithubCallback.vue
and my route would look like
{
name: 'githubCallback',
path: '/auth/github',
component: GithubCallback
},
<template>
<div>callback</div>
</template>
<script>
export default {
name: 'githubCallback',
mounted() {
}
}
</script>
However, clueless on how to handle callback response returned from Github.
Try vue-authenticate plug-in. It helped me solve the same problem with Facebook
I am new to this Firefox SDK , but what i have understood you can execute content Scripts on Pages.
Here is the Code
MAIN.JS
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
var sidebar = require("sdk/ui/sidebar").Sidebar({
id: 'my-sidebar',
title: 'My sidebar',
url: data.url("index.html"),
onReady: function (worker) {
worker.port.emit('turl',tabs.activeTab.url);
}
});
SIDEBAR.JS
$('#bt1').on('click',function(){
$('title').textContent;
});
INDEX.HTML
<!DOCTYPE HTML>
<html>
<body>
<input type="button" id="bt1" value="Click Me"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="sidebar.js"></script>
</body>
</html>
But this code tries to find out title of the Sidebar html.
I have also tried using contentScriptFile in Main.js but same thing happened
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
var sidebar = require("sdk/ui/sidebar").Sidebar({
id: 'my-sidebar',
title: 'My sidebar',
url: data.url("index.html"),
contentScriptFile: [data.url("jquery.min.js"),data.url("sidebar.js")],
onReady: function (worker) {
worker.port.emit('turl',tabs.activeTab.url);
}
});
The Jquery code is in the sidebar.js
Still no Results.Please help
There is no contentScriptFile for the Sidebar class.
Try this: copy the jquery library to a local file in the data folder, then refer to it using a relative path. Sidebars can only use 'local' JS, they cannot load scripts from the internet.
I'm using AngularJS v1.2.13 to create a page with a form which will download a user's file on click.
I'm using $sce to enable the injection of the file URL which works fine.
However, the loading of the resource disables the form submit. I'm sure it has to do with the resource load because when I remove the load and hardcode the url it works fine. I've also created a JSFiddle without it and have not been able to reproduce the problem there.
Any ideas on why this is happening and how it can be fixed?
HTML:
<div ng-controller="viewProfileController" data-ng-init="findOne();">
<form method="get" action="{{downloadFileURL}}">
<button type="submit" class="no-button comment-small" >
Download File
</button>
</form>
</div>
Controller:
'use strict';
angular.module('bop.viewProfile').controller('viewProfileController', [
'$scope', 'Users', '$sce', '$routeParams',
function($scope, Users, $sce, $routeParams) {
$scope.downloadFileURL = '';
// Find current user
$scope.findOne = function() {
Users.get({
userId: $routeParams.userId
}, function(user) {
$scope.user = user;
$scope.downloadFileURL = $sce.trustAsResourceUrl($scope.user.file.url);
});
};
}]);
Users Service:
var userServices = angular.module('bop.users', ['ngResource']);
userServices.factory('Users', ['$resource', function($resource) {
return $resource(
'users/:userId',
{ userId: '#_id' },
{ update: { method: 'PUT' } }
);
}]);
My problem is simple, everything in this code works as expected except that everytime, I click on login button, I get redirected to '/'. I do not want that. I want the user to stay on login page until they finish authenticating via facebook/persona/twitter and then get redirected to '/content'.
Here is my router/app/controllers:
var app = angular.module("myapp", ["ngRoute","firebase"]);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'landing.html',
});
$routeProvider.when('/login',{
templateUrl: 'login.html',
controller: 'controller'
});
$routeProvider.when('/content',{
authRequired: true,
templateUrl: 'content.html',
controller: 'MyController'
});
$routeProvider.otherwise({redirectTo: '/'});
}]);
app.controller('MyController',['$scope', '$firebase','$firebaseAuth',function($scope,$firebase,$firebaseAuth) {
var ref = new Firebase("https://mybase.firebaseio.com/");
$scope.auth = $firebaseAuth(ref,{path: '/'});
$scope.messages = $firebase(ref);
$scope.addMessage = function(e) {
if (e.keyCode != 13) return;
$scope.messages.$add({from: $scope.name, body: $scope.msg});
$scope.msg = "";
};
}]);
app.controller('controller',['$scope','$firebaseAuth',function($scope, $firebaseAuth) {
var ref = new Firebase('https://mybase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref);
}]);
This (my preferred solution) didnt work either:
.controller('LoginCtrl',['$scope','$firebase','$firebaseAuth','$location',function($scope,$firebase,$firebaseAuth,$location, waitForAuth){
var ref = new Firebase('https://myfirebase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref,{path: '/'});
waitForAuth.then(function(user){
$location.path('/content');
})
}])
My div/button looks as follows (I also have similar one but with 'persona'.):
<div ng-controller="controller">
<div class="facebook-login">
<span><i class="fa fa-facebook-square fa-lg"></i> LogIn with Facebook</span>
</div>
<div class="facebook-login">
<span><i class="fa fa-facebook-square fa-lg"></i> LogIn with Persona</span>
</div>
</div>
I have included the following in my html:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/v0/firebase-simple-login.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
<script src="//code.angularjs.org/1.2.6/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/module.waitForAuth.js"></script>
<script src="//login.persona.org/include.js"></script>
<script src="app.js"></script>
I have enabled facebook login and persona login in my firebase forge. Also I have added my facebook app id and secret too. Everytime I click on the login button I get redirected to '/'. waitforAuth I use is here: https://gist.github.com/katowulf/7328023, but if I use it in my controllers, login with facebook/persona buttons do not work at all. If I use waitForAuth, everytime I click on one of the login buttons I get redirected to '/' immediately instead of login popup.
Anyone? :)
I finally found the solution to my problem. Adding the following stops automatic redirect to '/' before login even takes place:
I just needed to add this:
$scope.$on('$locationChangeStart', function(event) {
event.preventDefault();
});
In here like this:
app.controller('controller',['$scope','$firebaseAuth','$location','$rootScope',function($scope, $firebaseAuth,$location,$rootScope) {
$scope.$on('$locationChangeStart', function(event) {
event.preventDefault();
});
var ref = new Firebase('https://mybase.firebaseio.com/');
$scope.auth = $firebaseAuth(ref);
$rootScope.$on('$firebaseAuth:login', function(){
$location.path('/content');
});
}]);
However, I ran into another problem, because this now doesnt work:
$rootScope.$on('$firebaseAuth:login', function(){
$location.path('/content');
Because after user is finished authenticating they should be redirected to /content (instead of being stuck at login page with login buttons disappearing due to ng-hide (See above)), but it does not matter what I try $location.path('/content') doesnt work.
I tried this:
waitForAuth.then(function(){
console.log('test');
$location.path('/content');
})
But console.log prints out "test" in the console way before user is authenticated, so waitForAuth doesnt seem to work either :/. Somehow waitForAuth fires console.log but it doesnt fire $location.path... Odd.
I even tried doing this (both with waitForAuth and $rootScope.$on:
waitForAuth.then(function(){
console.log('test');
$location.path('/content');
$scope.$apply();
})
But I just get an error that angular $digest is already in progress.
Adding this: ng-click="auth.$login('facebook'); return false;" like that, angular throws me this error :
Error: [$parse:syntax] Syntax Error: Token 'false' is an unexpected token at column 33 of the expression [auth.$login('facebook'); return false;] starting at [false;].
And login buttons become un-clickable... :(
Ohh dear... me :)
I had the same problem where the URL was always reverting back to the homepage. The problem was caused by a simple mistake in the html syntax:
Log out
After I removed # in the href attribute the problem was resolved. Hope this helps others who may experience a similar problem.