Trying to get this paper-dialog to open when a paper button is clicked but it doesn't seem to want to work outside of Chrome. I feel like the issue has to do with the fact that it is in a dom-repeat but I'm not sure any help you could give me would be greatly appreciated. The error I am getting in Safari is "TypeError: dialog1.toggle() is not a function. (In 'dialog1.toggle()','dialog1.toggle' is undefined)". In Firefox I just got "TypeError: dialog1.toggle is not a function". Here is my code I hope someone can point me in the right direction.
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/demo/simple-dialog.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
</head>
<body class="unresolved">
<template is="dom-bind">
<template is="dom-repeat" items="{{data}}">
<paper-button raised onclick$="dialog{{item.id}}.toggle()">{{item.series}} </paper-button>
<simple-dialog id$="dialog{{item.id}}">
<h2>{{item.series}}</h2>
<p>{{item.data}}</p>
</simple-dialog>
<br />
</template>
<iron-ajax auto id="GetData" url="get_category_data.php" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>
</body>
Using getElementById seems to work fine. Here is the code that worked for me in firefox. Hopefully it'll also work in safari
<template is="dom-bind">
<template is="dom-repeat" items="{{data}}">
<paper-button raised onclick$="toggleDialog({{item.id}})">{{item.series}}</paper-button>
<simple-dialog id$="dialog{{item.id}}">
<h2>{{item.series}}</h2>
<p>{{item.data}}</p>
</simple-dialog>
<br />
</template>
<iron-ajax auto id="GetData" url="get_category_data.json" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>
<script>
function toggleDialog(id){
var dialog = document.getElementById('dialog'+id);
dialog.toggle();
}
</script>
old thread but I'll add this variation of the above for Polymer1.0
<div>
VAT check date: <paper-button value="paperbuttontest" raised on-tap="_paperDialogButtonEdit">{{buyer1.vat_check_date}}</paper-button>
<paper-dialog id="vat_check_date_dialog_edit">
<calendar-lite name="date.buyer1.vat_check_date" min-date="2017,3,1"></calendar-lite>
</paper-dialog>
</div>
and in the Polymer
_paperDialogButtonEdit: function (event) {
//console.log(" event.target = ",event.target.getAttribute('value'));
var dialog = document.getElementById('vat_check_date_dialog_edit');
dialog.toggle();
},
Related
I have been having problems with my Polymer 2 app, I first through it was the routing but I found that after hitting this page and the Dom-if fires when navigating back to the page it is not re-firing.
EG,
If I am on url/matters/6719 it displays the details page, but if I click the back button and go to url/matters the dom-if is not being hit again and its still showing me the details page,
It also happens when using my navigation selector which is set up like the PWA starter kit.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="Matters/matter-list.html">
<link rel="import" href="MatParties/matparty-list.html">
<link rel="lazy-import" href="Matters/matter-detail.html">
<dom-module id="my-matters">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<app-route route="{{route}}" pattern="/:matter_id" data="{{routeData}}" tail="{{subroute}}">
<app-route route="{{subroute}}" pattern="/matparties/:this_page" data="{{pageData}}"></app-route>
</app-route>
<div class="card">
<template is="dom-if" if="[[_subidIsDefined(pageData.this_page)]]">
<matparty-list linkedmatpartyid="[[pageData.this_page]]"></matparty-list>
</template>
<template is="dom-if" if="[[!_subidIsDefined(pageData.this_page)]]">
<template is="dom-if" if="[[!_idIsDefined(routeData.matter_id)]]">
<matter-list></matter-list>
</template>
<template is="dom-if" if="[[_idIsDefined(routeData.matter_id)]]">
<matter-detail linkedmatterid="[[routeData.matter_id]]"></matter-detail>
</template>
</template>
</template>
<script>
class Matters extends Polymer.Element {
static get is() { return 'my-matters'; }
_subidIsDefined(subid) {
//There are probably ways to optimize this
if (subid) {
return true;
}
return false;
}
_idIsDefined(id) {
//There are probably ways to optimize this
if (id) {
return true;
}
return false;
}
}
window.customElements.define(Matters.is, Matters);
</script>
</dom-module>
have you checked the pattern? Normally the pattern should respect the url pattern.... in your case "url/matters/6719"
Since you have defined the pattern="/matparties/:this_page" on the router and matparties is != 'matters' in 'url/matters/6719' that could generate the error. I don't know if you have defined a base url that generate also some issues on this regards.
So the url should be matparties/6719 to match the pattern and resolve into the dom-if
I am new to Polymer and try to create an ajax call by iron-ajax. I run into an error, that generateRequest()is undefined.
Polymer 1 is in use.
I installed iron-ajax with this command: bower install --save PolymerLabs/promise-polyfill#1
And as you can see, I load it with <link rel="import" href="../bower_components/promise-polyfill/promise-polyfill-lite.html">
I compare it with some examples but can not find the mistake.
Does someone has an idea or solution?
this is the code:
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/promise-polyfill/promise-polyfill-lite.html">
<dom-module id="my-view2">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<div class="card">
<div class="circle">2</div>
<h1>View Two</h1>
<p>Demo output</p>
</div>
<template is="dom-repeat" items="[[repos]]">
<span>{{items.name}}</span>
</template>
<button on-click="setajax">Click me</button>
<iron-ajax
id="ajax"
url=""
params='{"type":"all"}'
handle-as="json"
on-response="hresponse"
debounce-duration="300" >
</iron-ajax>
</template>
<script>
Polymer({
is: 'my-view2',
setajax: function () {
this.$.ajax.url = "https://api.github.com/users/burczu/repos";
this.$.ajax.params= {"type":"all"};
this.$.ajax.generateRequest();
},
hresponse: function(request) {
console.log(request.detail.response);
console.log(this.$.ajax.lastResponse);
}
});
</script>
</dom-module>
You need to install iron-ajax:
bower install --save PolymerElements/iron-ajax
Then, you can import using the following code:
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
Your code will work after you do the above things.
Question
It is not possible to use <paper-tabs> inside a custom element to [[select]] <neon-animated-pages> right now. Correct?
The comment by #FelixEdlemann:
But I still didn't find a solution for using neon-animated-pages in combination with paper-tabs.
on this Youtube video by #RobDodson seems to support my experience that using <paper-tabs> (inside a custom element) breaks <neon-animated-pages> right now.
Please provide working example.
If I'm wrong. And if it is possible to use <paper-tabs> to [[select]] <neon-animated-pages>, could somebody please post a working example?
My proof of this theory is that simply changing only the <iron-pages> element to <neon-animated-pages> causes the following code to go from "working" to "not working."
What happens is, when trying to use <neon-animated-pages>, all the pages appear on <my-view> at the same time. As it would if there were no <neon-animated-pages> element tag at all.
Working Code
index.html
<my-view>...</my-view>
my-view.html
<template>
<iron-pages class="flex" selected="[[selected]]">
<!--Changing only the above line to <neon-animated-pages breaks it-->
<my-page-1></my-page-1>
<my-page-2></my-page-2>
<my-page-3></my-page-3>
</iron-pages>
<paper-tabs selected="{{selected}}">
<paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="star"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="perm-media"></iron-icon></paper-tab>
</paper-tabs>
</template>
Not Working Code
index.html
<my-view>...</my-view>
my-view.html
<template>
<!-- The below tag is what seems to break it / stop it from working -->
<neon-animated-pages
class="flex"
selected="[[selected]]"
entry-animation="slide-from-left-animation"
exit-animation="fade-out-animation"
>
<my-page-1></my-page-1>
<my-page-2></my-page-2>
<my-page-3></my-page-3>
</neon-animated-pages
<paper-tabs selected="{{selected}}">
<paper-tab><iron-icon icon="home"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="star"></iron-icon></paper-tab>
<paper-tab><iron-icon icon="perm-media"></iron-icon></paper-tab>
</paper-tabs>
</template>
Working JsBins per #zerodevx:
At top level index.html | http://jsbin.com/vudinaziwe/edit?html,output
Inside custom element | http://jsbin.com/bejahumeru/edit?html,output
I don't see why not - unless <neon-animation>'s API has changed, your page elements need to implement Polymer.NeonAnimatableBehavior. The <neon-animatable> element is a convenience element for that. You also need to import the specific animations you are using.
In your example, your imports should should look something like:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">
While your body might look something like:
<template is="dom-bind">
<paper-tabs selected="{{selected}}">
<paper-tab>PAGE 1</paper-tab>
<paper-tab>PAGE 2</paper-tab>
<paper-tab>PAGE 3</paper-tab>
</paper-tabs>
<neon-animated-pages class="flex" selected="[[selected]]" entry-animation="slide-from-left-animation" exit-animation="fade-out-animation">
<neon-animatable>PAGE 1 CONTENTS</neon-animatable>
<neon-animatable>PAGE 2 CONTENTS</neon-animatable>
<neon-animatable>PAGE 3 CONTENTS</neon-animatable>
</neon-animated-pages>
</template>
Working jsbin: http://jsbin.com/vudinaziwe/edit?html,output
UPDATE 1:
Applying this inside a custom element,
x-test.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">
<dom-module id="x-test">
<template>
<paper-tabs selected="{{selected}}">
<paper-tab>PAGE 1</paper-tab>
<paper-tab>PAGE 2</paper-tab>
<paper-tab>PAGE 3</paper-tab>
</paper-tabs>
<neon-animated-pages class="flex" selected="[[selected]]" entry-animation="slide-from-left-animation" exit-animation="fade-out-animation">
<neon-animatable>PAGE 1 CONTENTS</neon-animatable>
<neon-animatable>PAGE 2 CONTENTS</neon-animatable>
<neon-animatable>PAGE 3 CONTENTS</neon-animatable>
</neon-animated-pages>
</template>
<script>
Polymer({
is: "x-test",
properties: {
selected: { type: Number, value: 0 }
}
});
</script>
</dom-module>
Jsbin: http://jsbin.com/bejahumeru/edit?html,output
My problem was with my imports.
I was using:
<link rel="import" href="bower_components/neon-animated-pages/neon-animated-pages.html">
instead of:
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
I'm having troubles with the following small self contained polymer example for databinding.
My understanding is that by having the consumer and supplier both have an attributes with data, with the expression {{stuff}} passed in, that this is referring to the variable "stuff", in the scope of the element.
When the supplier is loaded, and ready, it should populate the stuff variable, causing the consumer to insert the data.
http://jsbin.com/yawipodayo/1/edit?html,css,js,output
<!doctype html>
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="consumer" attributes="data">
<template bind="{{data}}">{{}}</template>
</polymer-element>
<polymer-element name="supplier" attributes="data">
<template></template>
<script>
Polymer('supplier', {
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "root">
<template>
<supplier data="{{stuff}}"></supplier>
<consumer data="{{stuff}}"></consumer>
</template>
</polymer-element>
<root>
</root>
</body>
</html>
You have an amount of glitches within your code. I will drop comments around the problems to be fixed:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<!-- noscript tags are mandatory for elements not having script declared -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-consumer" attributes="data" noscript>
<!-- when you need to output data, output it -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<template>{{data}}</template>
</polymer-element>
<!-- names MUST include hyphens (everywhere) -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-supplier" attributes="data">
<template></template>
<script>
// As of 0.5 you don’t need to specify name in script
// ⇓⇓⇓⇓
Polymer({
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "my-root" noscript>
<template>
<my-supplier data="{{stuff}}"></my-supplier>
<my-consumer data="{{stuff}}"></my-consumer>
</template>
</polymer-element>
<my-root>
</my-root>
</body>
</html>
The corrected version works as expected: http://jsbin.com/zewimobaro/1/edit
I am trying to use data binding through attributes on Polymer but I'm just going from failure to failure. I tried many syntax to send my JSON but nothing seems to work... Can I ask a little bit of help to see and understand what i was doing wrong ?
Thanks in advance,
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Self Tutorial 02</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="import" href="social-nav.html">
</head>
<body>
<social-nav social='[{"twitter":"#cyberwarfighte1"}]'></social-nav>
</body>
</html>
And here is my polymer element :
<polymer-element name="social-nav" attributes="social">
<template>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
<div class="social-icons">
{{social}}
<template repeat="{{k in social}}">
{{k}}
</template>
</div>
</template>
<script>
Polymer('social-nav', {
});
</script>
</polymer-element>
Well, I found a way to solve my problem by myself.
For anyone who have the same problem than me, the answer is that your attribute need to be declared as an object inside the polymer element.
Here is my fixed code :
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
<polymer-element name="social-nav" attributes="social">
<template>
<div class="social-icons">
<template repeat="{{k in social}}">
<a class="{{k.social}}" href="{{k.link}}"><i>{{k.social}}</i></a>
</template>
</div>
</template>
<script>
Polymer('social-nav', {
created: function(){
this.social = []; // <- HERE !!
}
});
</script>
</polymer-element>
And my fixed element call with the good JSON
<social-nav social="[{'social':'twitter','link':'http://twitter.com/cyberwarfighte1'}, {'social':'facebook','link':'http://facebook.com/samuel.cardillo.5'}]"></social-nav>
Hope it can help someone :)