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.
Related
I'm seeing an issue where I can see the bound 'test' value appear on the demo page on Chrome but not in Firefox. I'm already including the polyfills (webcomponents-lite.js) so I'm really not sure what's missing. Any ideas?? Thank you in advance.
ticket-item demo page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ticket-item demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../ticket-item.html">
<script>
window.addEventListener('WebComponentsReady', function() {
let element = document.getElementById('ticket-item');
element.test = 'test';
});
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic ticket-item demo</h3>
<demo-snippet>
<template>
<ticket-item id="ticket-item"></ticket-item>
</template>
</demo-snippet>
</div>
</body>
</html>
ticket-item element
<dom-module id="ticket-item">
<template>
<style include="my-theme">
:host {
display: block;
}
</style>
<div>test: [[test]]</div>
</template>
<script>
class TicketItem extends Polymer.Element {
static get is() { return 'TicketItem'; }
static get properties() {
return {
test: String
};
}
}
window.customElements.define(TicketItem.is, TicketItem);
</script>
</dom-module>
The first thing:
Custom element names. By specification, the custom element's name must start with a lower-case ASCII letter and must contain a dash (-). There's also a short list of prohibited element names that match existing names. For details, see the Custom elements core concepts section in the HTML specification.
So, you must change the name of "item" element.
Instead of loading the webcomponents-lite.js directly, load webcomponents-loader.js (a client-side loader that dynamically loads the minimum polyfill bundle, using feature detection), that will do the rest.
Plnkr link: works both in Firefox and Chrome.
The problem was that I named my component 'ticket-item' and the id was set to 'ticket-item'. It apparently needs to be something different from 'ticket-item'. I change the id to 'item' and now I'm seeing the binding.
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 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!
I am new with using the Kendo data source and so far it is not working. My page is extremely simple.
<head>
<meta name="viewport" content="width=device-width" />
<title>View Quote Lists</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/styles/kendo.common.min.css" rel="stylesheet" />
<link href="/styles/kendo.default.min.css" rel="stylesheet" />
<link href="/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
</head>
<body>
<div>
</div>
<script src="/Scripts/jquery-2.1.3.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script>
var query = "3";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/QuoteAPI?page=1",
dataType: "json"
},
requestEnd: function() {
console.log(JSON.stringify(dataSource.data()))
}
}
});
dataSource.read();
</script>
</body>
The server data set that is returned from the service is an object that looks like:
{
{"QuoteCount":13393,"CurrentPage":1,"Quotes":[{"QuoteID":"B0339420-52C1-4762-8F41-474BE601E872","QuoteNo":"00014857","QuoteDate":"2015.03.09","netgainID":"5BDF1655-CB35-4326-80E3-6DCA0CC00C8B","Qty":1.0,"SKU":"CC1512570","Product":"WELDMNT,ANTLER FRAME ","Price":186.66,"Customer":"Grady Health Systems","repID":"{CA7A9606-8EAB-447E-934E-C52B4D8E06C6}","Rep":"Kirkland, Travis"},{"QuoteID":"B0339420-52C1-4762-8F41-474BE601E872","QuoteNo":"00014857","QuoteDate":"2015.03.09","netgainID":"8DBF5603-DAED-4DF8-89FD-1A172CA3589E","Qty":4.0,"SKU":"CC0900265","Product":"FRONT FLOOR PLATE (PR) 175 KIT","Price":28.95,"Customer":"Grady Health Systems","repID":"{CA7A9606-8EAB-447E-934E-C52B4D8E06C6}","Rep":"Kirkland, Travis"}......]
When I load the page is calls the web service and returns the data which I can see using Google tools. However the line dataSource.read() gives an error
Uncaught TypeError: undefined is not a function kendo.all.min.js:11
The requestEnd function is never called so I can't see the data even though it has been called.
Can someone tell me why this is not working. I have tried every variation of the docs that seem appropriate but this refuses to work.
Thanks,
Terry
Can you move requestEnd out side of transport block and try? If it doesn't help create a Kendo Dojo to replicate the problem so that it's easier to fix it there.
Here is a dojo with similar code that is working, except that I am using jsonp.
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.