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.
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 have created a youtube element in polymer using the google-youtube library. I used the id of youtube video in the youtube-element and the video was showing but it disappeared.
I checked in console, shows error:
Library Load failed:failed to load Library
Cannot GET /bower_components/polymer/polymer-micro.html.js
I deleted this library and installed this library again using bower install, but I am still getting the same error. I am not able to load the youtube-element.
can anyone help here?
Code for youtube-element.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="youtube-element">
<template>
<style>
:host {
display: block;
}
</style>
<h1 class="heading" >MY YouTube Videos</h1>
<paper-material class="mid" elevation="1">
<google-youtube
video-id="HgJ0XCyBwzY"
height="270px"
width="480px"
rel="0"
start="5"
autoplay="0">
</google-youtube>
</paper-material>
</template>
<script>
Polymer({
is: 'youtube-element',
properties: {
foo: {
type: String,
value: 'youtube-element',
notify: true
}
}
});
})();
</script>
</dom-module>
My api end point which running on Heroku free account(expressJS) url IS HERE
It shows json response from an expressJS route. The data looks like this
[{"_id":"5938b81bd263a5144c9d7d17","title":"mlab first entry","__v":0},
{"_id":"5939efc7fac2b71aac4add11","title":"Second Entry","__v":0},
{"_id":"5939efd0fac2b71aac4add12","title":"Second Entry","__v":0}]
My polymer code which I run from localhost(http://127.0.0.1:8081/view1):`
<!--
#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-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="my-view1">
<template>
<iron-ajax
auto
url="https://shielded-caverns-24265.herokuapp.com/"
handle-as="json"
last-response="{{response}}">
</iron-ajax>
<<!--tried items={{response}} -->
<template is="dom-repeat" items="[[response.title]]">
<div>
    {{ item.title}}
</div>
</template>
<!-- this code works and pull the data from https://reqres.in/api/users?page=2
<template is="dom-repeat" items="[[response.data]]">
<div>
{{item.first_name}}     {{ item.last_name}}
</div>
</template>
-->
</template>
<script>
class MyView1 extends Polymer.Element {
static get is() { return 'my-view1'; }
}
window.customElements.define(MyView1.is, MyView1);
</script>
</dom-module>
`
But when I visit my polymer page, it is not showing any data...What am I doing wrong?
Here is my route code:
router.get('/', function(req, res){
Comment.find(function(err, comments){
res.json(comments);
});
});
Do I need to format the server res.json? Or use res.format(object)?
I appreciate any help here.
I am am trying to create a custom element that plays a youtube video in paper-dialog. So videoPlayer = Polymer.dom(this.root).querySelector('video-player'); inherits/has access to that paper-dialogs open method, I am trying to extend my custom element. It isn't working, but hopefully I am on the right track and someone can show me correctly.
I am using Polymer 1.0, but I only have https://www.polymer-project.org/0.5/docs/polymer/polymer.html#extending-other-elements to go by for extending elements.
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="video-player">
<template>
<div class="layout horizontal">
<paper-button dialog-dismiss>
<paper-icon-button icon="arrow-back"></paper-icon-button>
</paper-button>
</div>
<div style="height: 100%; width: 100%">
<google-youtube style="height: 100%;"
video-id="YMWd7QnXY8E"
rel="1"
start="5"
playsinline="0"
controls="2"
showinfo="0"
width="100%"
height="100%"
autoplay="1">
</google-youtube>
</div>
</template>
<script>
Polymer({
is: "video-player"
});
</script>
<paper-dialog name="video-player" extends="video-player">
<template>
<shadow></shadow>
</template>
<script>
Polymer();
</script>
</paper-dialog>
<video-player></video-player>
As was mentioned in the comments, you can't yet extend custom elements, so the existing pattern (or at least the one I use) is to make use of behaviors wherever possible and wrappers wherever not.
e.g.
<dom-module id="popup-video-player">
<template>
<video-player></video-player>
</template>
<script>
Polymer({
is: 'popup-video-player',
behaviors: [Polymer.PaperDialogBehavior],
...
});
</script>
</dom-module>
Now you can use <popup-video-player> just like a paper-dialog.
I know it stinks because if video-player has a bunch of properties that you want access to, you have to copy them in the popup-video-player element's API, which is not exactly DRY.
If you look at the paper-input source, you'll see them doing the same thing. It's obvious that they want to extend iron-input, but they can't so you get things like this:
<input is="iron-input" id="input"
aria-labelledby$="[[_ariaLabelledBy]]"
aria-describedby$="[[_ariaDescribedBy]]"
disabled$="[[disabled]]"
title$="[[title]]"
... >
As a side note, you could always hook into the <video-player>s "properties" property and make the API additions programatically.
maybe something like this would work: (untested!)
Polymer({
...
properties: (function () {
var prop = {
//special properties specific to the pop up version of video-player
//..obviously be careful to avoid name space conflicts.
};
var video_player = document.createElement('video-player');
video_player.properties.keys().forEach( function(key) {
props[key] = video_player[key];
});
return props;
}()),
});
I have this Polymer custom element:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../../../bower_components/app-router/app-router.html">
<polymer-element name="custom-pages" attributes="selected">
<template>
<link rel="stylesheet" href="custom-pages.css">
<app-router id="router" bindRouter core-animated-pages transitions="cross-fade-all" trailingSlash="ignore">
<template repeat="{{page in pages}}">
<app-router path="{{page.path}}" import="{{page.url}}"></app-router>
</template>
</app-router>
</template>
<script>
(function() {
Polymer({
selected: 0,
pages: [{
path: "/home",
url: '../custom-home/custom-home.html'
}, {
path: "/about",
url: '../custom-about/custom-about.html'
}],
selectedChanged: function(oldValue, newValue) {
router = this.$.router;
router.go(this.pages[newValue].path);
}
});
})();
</script>
</polymer-element>
Elements custom-home and custom-about should be lazy loaded when "selected" change, but not is happening (no page is displayed).
You have a syntax error in your template definition, nested tags are to be app-route rather than app-routeR:
<app-router id="router" ...>
<template repeat="{{page in pages}}">
<!-- ⇓ superfluous r, nested are app-route -->
<app-router path="{{page.path}}" import="{{page.url}}"></app-router>
<!-- SHOULD BE: -->
<app-route path="{{page.path}}" import="{{page.url}}"></app-route>
</template>
</app-router>
Currently you have created a bundle of empty routers.
Plus, the documentation says:
If you use go(path, options) you should also set the mode to hash or pushstate on the router.
I am not sure if this affects your case, since you do not seem to pass options.
Hope it helps.