I have tried to use Braintree hosted fields with Polymer but it didn't work (apparently braintree says no support yet) so I have decided to embed an iframe in polymer which will point to a nodejs server backend that will render the payments page, however when I visit that URL directly I get:
err=null
But when I embed the page in polymer I get: {name: "BraintreeError", code: "HOSTED_FIELDS_TIMEOUT", message: "Hosted Fields timed out when attempting to set up.", type: "UNKNOWN", details: undefined}.
Tried to make it work within polymer using https://codepen.io/braintree/pen/NbqPVO however it doesn't seem to work with Polymer 3.
// setup shadow dom
var btfields = document.querySelector('#braintree-fields')
var shadow = btfields.createShadowRoot()
var template = document.querySelector('#braintree-fields-template')
shadow.appendChild(template.content)
template.remove()
// setup bt
braintree.client.create({
authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
}, function (clientErr, clientInstance) {
if (clientErr) {
// Handle error in client creation
return;
}
var options = {
client: clientInstance,
styles: {
'input': {
'font-size': '14px'
},
'input.invalid': {
'color': 'red'
},
'input.valid': {
'color': 'green'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#expiration-date',
placeholder: '10/2019'
}
}
};
braintree.hostedFields.create(options, function (hostedFieldsErr, hostedFieldsInstance) {
if (hostedFieldsErr) {
// Handle error in Hosted Fields creation
return;
}
var btn = shadow.querySelector('#submit')
btn.addEventListener('click', function (event) {
event.preventDefault()
hostedFieldsInstance.tokenize(function (tokenizeError, payload) {
if (tokenizeError) {
console.error(tokenizeError)
} else {
alert('Send payload.nonce to server: ' + payload.nonce)
}
})
})
});
});
I fails on braintree.hostedFields.create method
Found an answer at: https://github.com/braintree/braintree-web/issues/226 #runia1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Load redux library -->
<script src="/redux/dist/redux.js"></script>
<!-- Load the Client component -->
<script src="https://js.braintreegateway.com/web/3.12.0/js/client.min.js"></script>
<!-- Load the Hosted Fields component -->
<script src="https://js.braintreegateway.com/web/3.12.0/js/hosted-fields.min.js"></script>
<!-- Load your application shell -->
<link rel="import" href="/src/my-app.html">
<!-- Add any global styles for body, document, etc. -->
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app>
<div id="braintree-fields">
<div class="field" id="card-number-container">
<label for="card-number">Card Number</label>
<div id="card-number"></div>
</div>
<div id="cvv-container">
<label for="cvv">CVV</label>
<div id="cvv"></div>
</div>
<div id="expiration-date-container">
<label for="expiration-date">Expiration Date</label>
<div id="expiration-date"></div>
</div>
</div>
</my-app>
</body>
</html>
then in where you want to put it.
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-home name="home"></my-home>
<my-give name="give"></my-give>
<my-checkout name="checkout">
<slot id="#braintree-fields"></slot>
</my-checkout>
<my-view404 name="view404"></my-view404>
</iron-pages>
Finally, in just slot in any content (which should be only the #braintree-fields)
<iron-form id="giveForm" on-iron-form-presubmit="_giveFormSubmitted">
<slot></slot>
</iron-form>
Related
I have tried to link the neo4j to the web page but the code does not run successfully. Has anyone done that before?is it because of the part where I try to import the json file into the neo4j database or is it due to other part of the code?
<html>
<head>
<title>Data Visualization</title>
<style type="text/css">
#viz {
width: 900px;
height: 700px;
}
</style>
<script src="https://cdn.neo4jlabs.com/neovis.js/v1.5.0/neovis.js"></script>
</head>
<script>
function draw() {
var config = {
container_id: "viz",
server_url: "bolt://localhost:7687",
server_user: "neo4j",
server_password: "secret",
labels: {
Troll: {
caption: "user_key",
size: "pagerank",
community: "community",
},
},
relationships: {},
initial_cypher:"call apoc.load.json("file:/graph-phase1-labelled1.json")
yield value
unwind value.nodes as nodes
unwind nodes.properties as prop
with prop where prop.sourceIP is not null
with prop where prop.destIP is not null merge(n1:Node{src:prop.sourceIP})
merge(n2:Node{dest:prop.destIP})
with prop,n1,n2
merge (n1)-[ :connected_to]->(n2) return n1,n2,prop",};
var viz = new NeoVis.default(config);
viz.render();
}
</script>
<body onload="draw()">
<div id="viz"></div>
</body>
</html>
I have problem with my code.
This is my index page
<!DOCTYPE html>
<html lang="en">
<!-- Page INDEX -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<div id="page"></div> <!-- ID For LOADED from page getsoal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.ajax({
url: 'getsoal.php',
data: { page: 1 },
dataType: 'html',
success: function (data) {
/* Get konten from page getsoal */
$('#page').html(data);
console.log(data)
}
});
$('.jawab').change(function () { /* Class jawab from page getsoal while loaded */
$(this).closest("form").submit();
});
$('#form').submit(function (e) { /* ID form from page getsoal while loaded */
e.prevendDefault();
/* SEND via AJAX */
})
</script>
</body>
</html>
and this is page from getsoal.php
<div class="container">
<form id="form">
<input type="hidden" name="soal" value="1">
<label for="jawab-1"><input type="radio" class="jawab" id="jawab-1" name="jawab" value="1"> A </label>
<label for="jawab-2"><input type="radio" class="jawab" id="jawab-2" name="jawab" value="2"> B </label>
</form>
</div>
My question is how can I get the ID or class that is on the getsoal.php page and give it an event on the index page using jquery? I use the html() function instead of load(), because if I use load(), the content of soalpage.php doesn't appear because it's blocked
Your submit handler is being set up in the wrong place (before #form is loaded). You need to move that to right after the HTML is loaded. You also have a typo: prevendDefault() should be preventDefault(). Your corrected code should read:
$.ajax({
url: 'getsoal.php',
data: { page: 1 },
dataType: 'html',
success: function (data) {
/* Get konten from page getsoal */
$('#page').html(data);
console.log(data)
// Now that .jawab and #form have been loaded, attach event handlers to them:
$('.jawab').change(function () { /* Class jawab from page getsoal while loaded */
$(this).closest("form").submit();
});
$('#form').submit(function (e) { /* ID form from page getsoal while loaded */
e.preventDefault();
/* SEND via AJAX */
})
}
});
Hello i'm not sure to understand what you want to achieve but if you want to append the content get from your ajax request to the #page div you can use append function of jquery in the success callback of your ajax function
$("#page").append(data);
My app shows an HTML page with multiple views, and each view can be conditionally built from multiple HTML templates.
I want to edit each HTML file and add a few lines at the top, something like
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{how do I get the file name}}</p>
<hr>
</div>
And maybe the same at the footer.
Thus, by setting $scope. showFileNames to true, I could switch the display of file names on/off and see how my page is actually composed (is this clear, or should I add some ascii art?).
I could just hard code {{how do I get the file name}} in each file, but doing it dynamically means that I can more easily add the code to each file, plus it guards against files being renamed.
Can it be done? If so, how?
[Update] I just realized that the question didn't explain well enough. Sorry.
I need to stress that part where I said
each view can be conditionally built from multiple HTML templates
While the view is state based, its contents are built from different <ng-include> files, based on data.
So, state A might include A.html, but, based on the data, that view might <ng-include> B.html, C.html and E.html, or it might <ng-include> F.html, G.html and H.htFl - and I want to show the file name of each at the head & foot of the part of the view shown by each file
Update: You may have templates loaded with ui-view and ng-include. The example given bottom of this answer has a nice generic directive to return the corresponding template name even though if you nested ui-view and ng-include together. Click through "Home", "About" and "Named View" link inside "About".
Few theory goes below,
If you use ui-view then you can try this with $state.current.templateUrl as below.
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{$state.current.templateUrl}}</p>
<hr>
</div>
The above will work if you had defined your state as below,
.state('state1', {
url: '/state1',
templateUrl: 'partials/state1.html'
controller: 'State1Ctrl'
})
But if you had defined this as named views as below,
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
}
}
}
})
Then, better you can have a method assigned with the $rootScope as below and pass the $state.current.views from the html to the function.
$rootScope.getTemplate = function(view) {
var keys = Object.keys(view);
if(keys.length === 0) return '';
return view[keys[0]].templateUrl;
};
and the html,
<div ng-if="showFileNames”>
<hr>
<p>Start of file {{getTemplate($state.current.views)}}</p>
<hr>
</div>
But you can have a look at the below generic directive which covers ui-view, nested ui-view, named ui-view and ng-include and even a bit of complex nesting with ui-view and ng-include.
Generic directive with an example page
Click through "Home", "About" and "Named View" link inside "About"
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'TestController'
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'TestController'
})
.state('about.named', {
url: '/named',
views: {
'named': {
templateUrl: 'named.html',
controller: 'TestController'
}
}
});
}
]);
app.controller('TestController', function($scope) {
});
app.directive('templateName', ['$state', function($state) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var templateName = $state.current.templateUrl;
var includesParent = $(element).closest('[ng-include]');
if(includesParent && includesParent.length > 0) {
if(includesParent.find('[ui-view]').length === 0) {
templateName = scope.$eval(includesParent.attr('ng-include'));
}
}
if(!templateName && $state.current.views) {
var uiViewParent = $(element).closest('[ui-view]');
var viewName = $state.current.views[uiViewParent.attr('ui-view')];
if(viewName) {
templateName = viewName.templateUrl;
}
}
element.html(templateName);
}
};
}]);
angular.bootstrap(document, ['app']);
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<div>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation" ng-include="'nav.html'">
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
<script type="text/ng-template" id="home.html">
<h3>Home Page</h3>
<p>Start of file: <span template-name></span></p>
</script>
<script type="text/ng-template" id="about.html">
<h3>About Page<h3>
<p>Start of file: <span template-name></span></p>
<div ng-include="'aboutUs.html'"></div>
</script>
<script type="text/ng-template" id="aboutUs.html">
<h3>About us<h3>
<p>Start of file: <span template-name></span></p>
<a ui-sref="about.named">Named View</a>
<div ui-view="named"></div>
</script>
<script type="text/ng-template" id="named.html">
<h3>Named View<h3>
<p>Start of file: <span template-name></span></p>
</script>
<script type="text/ng-template" id="nav.html">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">Start of file: <span template-name></span></a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</script>
</div>
First of all, I'm quite a noob so please excuse me if I ask stupid questions, or if the same question has already been answered elsewhere: I might not know the rights terms to effectively search for a topic.
So here's my problem. I'm trying to create a dashboard using Polymer. Therefore, I'll have a nav bar / menu with many option (contracts, calendars, admin page...). While looking at the polymer starter kit and its demo, we are told to put all the pages related to the navigation drawer within the index.html file, between <section> markups.
However, these pages may contain a lot of code, and there will be many pages (12 at the moment). I fear the index.html will soon become humongous, which will probably mean "hard to maintain" and "long loading time".
So my question is the following: is there a way to easily split the page app into multiple html files? Like creating a new custom element and importing it in the header, then using it between the <section> markups?
Okay so, following the advices I've been given here, I've read about HTMLimport, and the tutorial about "Lazy loading" on Chrome developpers' youtube and here's what I did (it is based on polymer starter kit). Problem: it does not work :(
Clicking on "Contracts" in the navbar does nothing. I don't get it :/
Help me please!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My awesome page</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/elements.html">
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="contracts" href="{{baseUrl}}contracts">
<iron-icon icon="description"></iron-icon>
<span>Contracts</span>
</a>
</paper-menu>
<div class="content">
<iron-pages id="iron" attr-for-selected="data-route" selected="{{route}}">
<section data-route="contracts" tabindex="-1">
<page-contracts id="contracts"></page-contracts>
</section>
<!-- lots of other <section> here -->
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
and here's the routing element:
<script src="../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') { // if production
page.base(app.baseUrl.replace(/\/$/, ''));
}
// Middleware
function scrollToTop(ctx, next) {
app.scrollPageToTop();
next();
}
function closeDrawer(ctx, next) {
app.closeDrawer();
next();
}
function setFocus(selected){
document.querySelector('section[data-route="' + selected + '"] .page-title').focus();
}
// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
next();
});
/* other routing here */
page('/contrats', function() {
if (Polymer.isInstance(this.$.contrats)) {
app.route = "contrats";
return;
}
Polymer.base.importHref(
"/page-contrats/page-contrats.html", function() {
app.route = "contrats";
return;
}
)
});
/* other routing here */
// 404
page('*', function() {
app.$.toast.text = 'Impossible to find: ' + window.location.href + '. Redirecting to dashboard';
app.$.toast.show();
page.redirect(app.baseUrl);
});
// add #! before urls
page({
hashbang: true
});
});
</script>
Your routing page needds to look like this:
<script src="../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') { // if production
page.base(app.baseUrl.replace(/\/$/, ''));
}
// Middleware
function scrollToTop(ctx, next) {
app.scrollPageToTop();
next();
}
function closeDrawer(ctx, next) {
app.closeDrawer();
next();
}
function setFocus(selected){
document.querySelector('section[data-route="' + selected + '"] .page-title').focus();
}
// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
next();
});
/* other routing here */
page('/contrats', function() {
app.route = 'contrats';
setFocus(app.route);
});
/* other routing here */
// 404
page('*', function() {
app.$.toast.text = 'Impossible to find: ' + window.location.href + '. Redirecting to dashboard';
app.$.toast.show();
page.redirect(app.baseUrl);
});
// add #! before urls
page({
hashbang: true
});
});
</script>
In your elements.html you need to import the page:
<link rel="import" href="/page-contrats/page-contrats.html">
And your enement needs to look like this:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../elements.html">
<dom-module id="contrats">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
</style>
<your-code-here>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'contrats',
});
})();
</script>
</dom-module>
Hope I helped.
Hi I'm trying to make a slider I got off the internet to work, but, I keep getting errors. In gallery.html, when I put the slider element at the top I get nothing, when I put it at the bottom I get errors. The error is something along the lines
Error: [$compile:tplrt] http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=slider&p1=partials%2Fgallery.html
Changed my code to match the suggestions in one of the comments.
I'm no longer getting the error to do with not have just 1 root element. Now, I can't get the next and previous to work. It just redirects me to the main page.
Note:
- gallery.html and slider.html are in a folder called partials
- all the images are in a folder called img
Thanks in advance!
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<!-- ANGULAR IMPORTS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ui-router-master/release/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<!-- JS FILES -->
<script src="js/controller.js"></script>
<script src="js/directives.js"></script>
<link href='css/app.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
<div class="navbar">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a ui-sref="state1">State 1</a></li>
<li><a ui-sref="state2">State 2</a></li>
<li><a ui-sref="gallery">Gallery</a></li>
</ul>
</div>
<div class="dynamiccontent">
<div ui-view></div>
</div>
<!-- App Script -->
<script>
/** MAIN ANGULAR VAR */
var myapp = angular.module('myapp', [
/**IMPORT DEPENDENCIES*/
'ui.router',
'ngAnimate',
/**FILE DEPENDENCIES*/
'appController',
'slider.directive'
]);
/** UI-ROUTING */
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /state1
$urlRouterProvider.otherwise("/state1")
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: 'state1controller'
})
.state('gallery', {
url: "/gallery",
templateUrl: "partials/gallery.html",
controller: 'slidercontroller'
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: 'state2controller'
});
});
</script>
</body>
</html>
controller.js
var appController = angular.module('appController',[]);
appController.controller('state1controller', ['$scope', function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}]);
appController.controller('state2controller', ['$scope', function($scope){
$scope.things = ["A", "List", "Of", "Items"];
}]);
appController.controller('slidercontroller', ['$scope', function($scope) {
$scope.pictures=[{src:'img1.png',title:'Pic 1'},{src:'img2.jpg',title:'Pic 2'},{src:'img3.jpg',title:'Pic 3'},{src:'img4.png',title:'Pic 4'},{src:'img5.png',title:'Pic 5'}];
}]);
directive.js
angular.module('slider.directive', [])
.directive('slider', function ($timeout) {
return {
restrict: 'AE',
replace: true,
scope:{
pictures: '='
},
link: function (scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.pictures.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.pictures.length-1;
};
scope.$watch('currentIndex',function(){
scope.pictures.forEach(function(image){
image.visible=false;
});
scope.pictures[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,5000);
},5000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
},
templateUrl:'partials/slider.html'
}
});
gallery.html
<slider pictures="pictures"></slider>
slider.html
<div class="slider">
<div class="slide" ng-repeat="image in pictures">
<img ng-src="img/{{image.src}}"/>
</div>
<div class="arrows">
<img src="img/left-arrow.png"/>
<img src="img/right-arrow.png"/>
</div>
</div>
You are mixing several concerns here. partials/gallery.html is used as a template for your directive and your page. This leads to the directive being used itself in it's own template.
The solution is to remove your directive code from gallery.html and use it in a new file slider.html.
directive.js
.directive('slider', function ($timeout) {
return {
...
templateUrl:'partials/slider.html'
slider.html
<div class="slider">
<div class="slide" ng-repeat="image in images">
<img ng-src="img/{{image.src}}"/>
</div>
<div class="arrows">
<img src="img/left-arrow.png"/>
<img src="img/right-arrow.png"/>
</div>
</div>
gallery.html
<slider images="pictures"/>
First off - the error does have to do with the root element.
https://docs.angularjs.org/error/$compile/tplrt
Template for directive '{0}' must have exactly one root element. {1}
Now that you fixed that issue - your infinite loop is called because you're trying to populate the slider directive with gallery.html - but in that template, you're calling the slider directive. So that's an infinite loop.