I'm currently facing a problem when playing around with Polymer - actually I just figured out when I tried in Firefox or IE (11) as in Chrome everything just works as I expected it.
So here is a small demo to reproduce my problem:
The "Webcomponents are ready to use!" box is shown right after the page is loaded (but in fact it doesn't matter because at this time no custom element is on the page yet).
When clicking the "Insert Polymer" button the paper-input element is added to the page using innerHTML - as soon as the label should be printed (see call to alertLabel()) it will print "undefined" (I guess the element has not yet been upgraded). When I click the "Alert label" button afterwards it works as expected.
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<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-input/paper-input.html">
<script>
window.addEventListener('WebComponentsReady', function(){alert('Webcomponents are ready to use!');});
</script>
</head>
<body unresolved>
<button id="insertelement" onclick="insertPolymerElement();">Insert Polymer</button>
<button id="button" onclick="alertLabel();">Alert label</button>
<div id="placeholder"></div>
<script>
function insertPolymerElement(){
document.getElementById('placeholder').innerHTML = '<paper-input id="testinput" label="I\'m the label!"></paper-input>';
alertLabel();
}
function alertLabel(){
alert(document.getElementById('testinput').label);
}
</script>
</body>
</html>
So the question is: how can I determine when I can interact with the added element? - The WebComponentsReady event is never fired again.
Thanks for your help!
Related
We discovered that the Chromecast plugin cannot register two cast buttons when there are more than one player embedded with Chromecast plugin available.
The visible console error is:
Uncaught DOMException: Failed to execute 'registerElement' on 'Document': Registration failed for type 'google-cast-button'. A type with that name is already registered.
It also appears that the cast framework is changing the css property of the second button to display:none once there is another player using it.
Test page representing the error: https://jsbin.com/repivowuge/edit?html,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>Chromecast 'google-cast-button' error, toggle browser console to see</h2>
<h3>Player 1</h3>
<script src="https://cdnapisec.kaltura.com/p/1673641/sp/167364100/embedIframeJs/uiconf_id/41860021/partner_id/1673641"></script>
<div id="kaltura_player_1519307906" style="width: 560px; height: 395px;"></div>
<script>
kWidget.embed({
"targetId": "kaltura_player_1519307906",
"wid": "_1673641",
"uiconf_id": 41860021,
"flashvars": {
"streamerType": "auto",
"chromecast.plugin": true
},
"cache_st": 1519307906,
"entry_id": "1_4bc211jv"
});
</script>
<h3>Player 2</h3>
<div id="kaltura_player_1519307903" style="width: 560px; height: 395px;"></div>
<script>
kWidget.embed({
"targetId": "kaltura_player_1519307903",
"wid": "_1673641",
"uiconf_id": 41860021,
"flashvars": {
"streamerType": "auto",
"chromecast.plugin": true
},
"cache_st": 1519307906,
"entry_id": "1_4bc211jv"
});
</script>
</body>
</html>
Taken from here, Google official answer on the matter
Thanks for reporting the issue. It looks like you are loading the
sender twice in the page. Usually, you can have multiple buttons in
the page however the "google-cast-button" registration would be one.
From the error message, it indicates that the type is being registered
twice.
We don't support registering "google-cast-button" twice.
So if you use <button is="google-cast-button"></button> as recommended here for CAF sender, then you can only have one of those. The second one would need to be a custom button.
The popup is opened, but keeps loading. I copied the code from the example page, which is working OK.
The paths for css, js and ajax-content are ‘bonafide’.
I can't get my head around it.
http://gerardwessel.nl/swipe/index_ajaxklik.html
<head>
<link rel="stylesheet" href="popup/magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="popup/jquery.magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.simple-ajax-popup').magnificPopup({
type: 'ajax'
});
});
</script>
<title>ajax klik</title>
</head>
<body>
Load content via ajax
</body>
It looks like the ajaxtekst.html file needs to be an HTML file with html, head, and body tags.
When you click on "Load content via ajax", you can see there is an error in the browser console.
I'm trying to load a document with XHR, and move some loaded nodes into the main document. The problem is that Polymer elements defined in the loaded document "don't work" after moving. They are look and behave like regular <div>s.
Here is a simple repro case.
Loaded document:
<!-- insert.html -->
<div>
<link rel="import" href="paper-button/paper-button.html">
<div>Hello, world!</div>
<paper-button>I am a button</paper-button>
</div>
Main page:
<!-- index.html -->
<html>
<head>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="core-ajax/core-ajax.html">
<script>
window.addEventListener('polymer-ready', function() {
var ajax = document.getElementById('ajax');
ajax.addEventListener('core-response', function(e) {
var insertTo = document.getElementById('insertion-point');
insertTo.appendChild(e.detail.response.body.children[0]);
});
ajax.go();
});
</script>
</head>
<body>
<core-ajax id="ajax" url="insert.html" handleAs="document"></core-ajax>
<div id="insertion-point"> </div>
</body>
</html>
After loading I see that #insertion-point contains loaded document, as expected, but <paper-button> is not functioning and looks like <div>I am a button</div>.
Things don't get better when I add <link rel="import" href="paper-button/paper-button.html"> to the main page's <head>.
Replacing <core-ajax> with a native XMLHttpRequest doesn't help as well.
I'm testing on Google Chrome 42 with the latest Polymer.
My question: is this supposed to work at all? If not, why? If yes, who's to blame?
x-posting from Elliott Sprehn's response the polymer-dev mailing list.
This doesn't work because you're taking elements from an xhr document where there's no custom element registry and then just moving them. You need to do appendChild(document.importNode(response.body.children[0])) which will create a clone of the node, but using the document where polymer has registered the custom elements.
I have a problem where my Ionic app won't render my views but I'm not getting an error. When I run this app only the navbar and a blank page is showing.
index.html:
<html ng-app="App">
<head>
<!-- Project setup: https://scotch.io/tutorials/angularjs-best-practices-directory-structure -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>TEST Mobile</title>
<!-- Assets -->
<link href="assets/libs/ionic/ionic.css" rel="stylesheet" />
<script src="assets/libs/ionic/ionic.bundle.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.route.js"></script>
<!-- Controllers -->
<script src="app/components/home/homeController.js"></script>
<script src="app/components/projects/projectsController.js"></script>
<script src="app/components/vms/vmsController.js"></script>
<script src="app/components/auth/authController.js"></script>
<!-- Services -->
<script src="app/components/home/homeService.js"></script>
<script src="app/components/projects/projectsService.js"></script>
<script src="app/components/vms/vmsService.js"></script>
<script src="app/components/auth/authService.js"></script>
<!-- Cordova.js isn't loaded until build for a specific platform, this will give 404 when viewing from ordinary browser -->
<script src="cordova.js"></script>
</head>
<body>
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
I have a module file and a seperate routing file:
var app = angular.module('App', ['ionic']);
routing js file:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/components/home/homeView.html',
controller: 'homeController'
});
$urlRouterProvider.otherwise('/home');
})
When I run this I only get the nav bar to show but not the ion-view home, which is now just for demonstration:
<ion-view view-title="Forgot Password">
<ion-content padding="true">
<p>
Yeah this is just a demo showing how views can be shown without tabs, then you can navigate
to views within tabs. Additionally, only one set of tabs needs to be written for all of the different views that should go inside the tabs. (Compared to written the same tab links in the footer of every view that's in a tab.)
</p>
<p>
There's no username/password, just click
the Sign-In button back a the sign-in view.
</p>
<p>
Return to Sign-In.
</p>
</ion-content>
</ion-view>
I suspect my issue is in the routing config but I wasn't able to find a working fix for this problem.
Add ui-view to your ion-nav-view in your index.html and it will work.
<ion-nav-view ui-view></ion-nav-view>
The issue wasn't with the routing config. The issue was that in another file (controller file) I also stated the angular.module('App', ['ionic']); this overrided my app.config.
Am using jquery draggable collision plugin which throws the error on loading the page that is "Type Error i is undefined"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type= "text/javascript" src="js/jquery-ui.js"></script>
<script type= "text/javascript" src="js/jquery-collision.min.js"></script>
<script type= "text/javascript" src="js/jquery-ui-draggable-collision.min.js"></script>
<script type= "text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="header">Sprite Generator</div>
<div id="droppable" >
<div id="overLay">Drop Files Here</div>
</div>
<div id="cssDetails">
<div id="cssHead">CSS Data</div>
</div>
<div id="errorMessage"></div>
</body>
</html>
This is the code I use. Kindly help, am not aware what is going wrong here.
The error lies in the draggable collision plugin file. Each time the method .data("draggable") is called, an undefined value is returned.
There is a slight difference between jQuery UI 1.9.2 and 1.10.3. In this last version, .data("draggable") has been replaced by .data("ui-draggable").
You should :
Either use an old version of jQuery UI plugin,
or use the last version, then replace .data("draggable") by .data("ui-draggable") in the jquery-ui-draggable-collision.min.js file.
In my own case, I used the second solution. But your case may be different, since I don't know which version of jQuery UI plugin you are using now.
The README for jQuery UI Draggable Collision reads:
Load jquery-ui-draggable-collision and its dependencies:
<script src="jquery-1.8.3.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="jquery-collision-1.0.2.js"></script>
<script src="jquery-ui-draggable-collision-1.0.2.js"></script>
It doesn't explain why you need to load modules separately, but my suspicion is there's a conflict going on somewhere. I'd try including the specific individual files (core, widget, mouse, draggable, collision, and ui-draggable-collision) and see if that works. Without more information in your question, it's hard for me to try a set of specific things, but this may be your best bet.