I'm trying to upload a file chosen through a Polymer <paper-input type="file" id="filepicker"> element but when i try to access the file with:
var file = this.$.filepicker.files
i get a files is not defined error.
I haven't found any other methods to access files in paper inputs so I'm not sure what the problem is here.
Any help would be appreciated!
The files property is found on the inner <input> element of <paper-input>, which you could access with <paper-input>.inputElement.inputElement. So you would use this:
this.$.filepicker.inputElement.inputElement.files[0];
Note: In earlier versions of <paper-input>, the inner <input> was accessed with this.$.filepicker.inputElement, but it has since been refactored to have another container (hence, this.$.filepicker.inputElement.inputElement).
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_handleFiles: function() {
console.log(this.$.input.inputElement.inputElement.files[0]);
}
});
});
<head>
<base href="https://polygit.org/polymer+1.10.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<paper-input type="file" id="input"></paper-input>
<button on-tap="_handleFiles">Log file info</button>
</template>
</dom-module>
</body>
codepen
Related
I have two html files named homepage.html & dashboard.html at same level under same folder. I only want to fetch a particular div as my main project has a lot of divs.
Here's the code of homepage.html
<html>
<head>
<meta charset="UTF-8">
<title>Homepage</title>
<link rel="stylesheet" href="css/homepage.css">
</head>
<body>
<div class="homepage-side-menu">
<div id="homepage-home">
<label>Home</label>
</div>
<div id="homepage-dashboard">
<label>Dashboard</label>
</div>
</div>
<div id="homepage-main-view"></div>
<script src="js/homepage.js"></script>
</body>
</html>
And here's the code of dashboard.html
<html>
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css">
</head>
<body>
<div class="dashboard-side-menu"></div>
<div id="dashboard-main-view"></div>
<script src="js/dashboard.js"></script>
</body>
</html>
I want to only fetch the content from the div class="homepage-side-menu"> and show it under <div class="dashboard-side-menu"></div> using simple JavaScript.
First you have to refer the file which you want to consume. then you use getElementByClass()
here is how you import the html file into another html
<link href="homepage.html" rel="import" />
or using javascript:
<script>
$(function(){
$("#addContentFromAnotherHTML").load("homepage.html");
});
</script>
and you can view something like this:
<body>
<div id="addContentFromAnotherHTML"></div>
</body>
something like this:
var classData = document.getElementsByClassName('homepage-side-menu');
Since html5 you can use imports
<link rel="import" href="/path/to/imports/stuff.html">
In older browsers the only way is using javascript (XHR, fetch, or Jquery .load
Using jQuery you could add this to dashboard.html :
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( ".dashboard-side-menu" ).load( "homepage.html .homepage-side-menu" );
</script>
There are several ways in which you can share HTML template across several pages
1. jQuery - AJAX load() Method
$(selector).load(URL,data,callback);
The load() method loads data from URL and puts the returned data into the selected element.
Read more about it here
2. Server side inclueds using some server side programming languages
<?
php include 'header.php';
?>
Read more about it here
3. Using some build tools like gulp or grunt or webpack
https://www.npmjs.com/package/file-include-webpack-plugin
https://www.npmjs.com/package/gulp-file-include
4. Using HTML imports
HTML imports is an exciting technology that promises to change how we build websites. Imports allow you to include HTML documents within other HTML documents.
Read more about it here
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
https://blog.teamtreehouse.com/introduction-html-imports
This one is recomended but not works with older browser
I'm trying to catch the error when css file or js file not loaded by the browser
what I'm looking for is something like this
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 id="#status">Status : ...</h1>
</body>
<script>
docuement.whenLoadErrorHappen = function ()
{
document.findElementById("status").innerHTML = "Error Loading File";
}
</script>
</html>
Use error event attached to <link> and, or <script> element, see Is there a way to know if a link/script is still pending or has it failed
For checking css file exist or not, Just check if a <link> element exists with the href attribute set to your CSS file's URL:
if (!$("link[href='/path/to.css']").length){
// css file not exist
}
and for js
if (!$("script[src='/path/to.js']").length){
// js file not exist
}
I'm writing an Polymer element that's supposed to be used like this:
<x-elem>Some text</x-elem>
The element would transform the text content. But when I try to access it in attached callback, it's empty:
attached: function() {
var text = this.root.textContent;
console.log(text); // Outputs ''
}
Frankly, the number of all child nodes is 0:
attached: function() {
console.log(this.root.childNodes.length); // Outputs 0
}
According to these docs I would think that at least my attempt at getting child nodes is correct, but apparently I do something wrong here. Perhaps I need to put something in my template (right now it's simple <template></template>, but it is not clear what.
this.root provides access to the element's local DOM (i.e., the DOM locally declared in the <dom-module>'s template), but you're trying to access light DOM (i.e., the DOM passed in). Use Polymer.dom(this).textContent for that:
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
attached: function() {
console.log('textContent:', Polymer.dom(this).textContent);
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo>hello world</x-foo>
<dom-module id="x-foo">
<template>
</template>
</dom-module>
</body>
How do I access the paper-button with id='signin' outside of the Polymer constructor. I need to access it from Template.{template-name}.rendered method. Is there a way to use selector for paper-button?
<!-- Code -->
<dom-module id="app-bar">
<template>
<link rel="import" href="bower_components/iron-media-query/iron-media-query.html">
<iron-media-query query="min-width: 1008px" query-matches="{{largeScreen}}">
</iron-media-query>
<template is="dom-if" if="{{largeScreen}}">
<span class="separator">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<paper-button id="signin" on-click="login" raised>Sign in</paper-button>
</span>
</template>
<template is="dom-if" if="{{!largeScreen}}">
<span class="title"></span>
</template>
</template>
<script>
Polymer({
is: "app-bar",
login: function() {
FlowRouter.go('/login');
}
});
</script>
</dom-module>
<!-- In the landing-page.html -->
<landing-page>
<link rel="import" href="app-bar.html">
<app-bar></app-bar>
</landing-page>
The easy, less prone way to breakage... (with shadowRoot you will potentially break in Polyfil'd browsers) get a reference to your 'app-bar' element and from there use the $ property id shortcut. If you cannot find the element via [landing-page].querySelector('app-bar') then try Polymer.dom(landing-page-element.root).querySelector('app-bar'). ($ shortcut only works for elements given an ID in that particular elements template, so for your app-bar this will work with signin. It would not work if the elements/ids were generated by a dom-repeat though.
document.querySelector('landing-page').querySelector('app-bar').$.signin;
Can someone help me with stating what am I doing wrong in this example -- http://jsbin.com/bekoxo/2/edit?html,output#H:L23
The screenshot for the chrome inspector is at -
https://www.dropbox.com/s/t6uua7h714h2otg/Screenshot%202014-10-13%2001.32.54.png?dl=0
I can figure out that the element (appler-page) is not registered successfully, template shows document-fragment instead of desired shadow-root
the 2nd element, where polymer definition is part of the markup(same markup) is rendered successfully.
Can someone point out what am I missing in order to make the first part of example also work.
(which is creating an element via javascript and using it immediately)
EDIT --- problem code below
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
<meta name="description" content="problem with dynamically building a polymer element" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var scr = '<polymer-element name="appler-page"><template>template content {{test}}</template><script>var proxymodel = {};proxymodel["test"] = "testfie" ;'+
'Polymer(proxymodel);<\/script><\/polymer-element><appler-page><\/appler-page>';
$(document).ready(function(){
document.getElementById("fie").onclick = function(){
var divel = document.createElement("div");
divel.innerHTML = scr;
document.querySelector(".polymerized").innerHTML = "";
document.querySelector(".polymerized").appendChild(divel);
}
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="button" id="fie" value="fie"/>
<div class="polymerized">before content</div>
EDIT -- A better jsbin for the problem
http://jsbin.com/bekoxo/2/edit?html,output#H:L23
Here is one way in which you can register your element imperatively (which, I believe is what your first element is trying to do). I've simplified your example a bit.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import"
href="http://www.polymer-project.org/components/polymer/polymer.html">
<script>
Polymer('appler-page', {test: 'testfile'});
var el = document.createElement('div');
el.innerHTML = '\
<polymer-element name="appler-page">\
<template>template content {{test}}</template>\
</polymer-element>';
document.body.appendChild(el);
</script>
<appler-page></appler-page>
</body>
</html>
See http://jsbin.com/qifupa/edit
Another instance of staying up with the latest Polymer version I found.
here's the working piece of code that may help anyone else if they are attempting the same thing.
I switched to Polymer-project.org addresses for the imports and it worked.
http://jsbin.com/bekoxo/14/edit?html,output#H:L23