I'm new to polymer/webcomponents and I'm trying to set an attribute in a component but don't want the corresponding event to be fired.
Why? Because I want to be able to do two things:
1) When the control changes (by clicking on the checkbox) I want to use the event handler to send this event to a server (using websockets)
2) When the control should change (by an event via websocket) I want to be able to set the checkbox but not fire the event.
Hope I made my point clear. It's very hot in germany right now -> brain is melting ;)
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<polymer-element name="webmpc-player">
<template>
<paper-checkbox id="repeat" on-change={{change}}></paper-checkbox> Repeat
<paper-checkbox id="shuffle" on-change={{change}}></paper-checkbox> Shuffle
</template>
<script>
Polymer('webmpc-player', {
ready : function() {
/* Set the component property */
this.$.shuffle.checked = true;
},
change : function(e, detail, sender) {
alert('I don't want to be called!');
}
});
</script>
</polymer-element>
Thank you, this looks like a flaw in paper-checkbox.
I just posted an issue ticket to describe the problem.
https://github.com/Polymer/paper-checkbox/issues/9.
Related
I am trying to integrate Yammer share button https://developer.yammer.com/docs/share-button, I successfully implemented as instructed, but the only catch is first time it requires two click to fire up, later on single click seems to do the job. Here is the code below.
function clickSaveShare(){
var options = {
customButton : true, //false by default. Pass true if you are providing your own button to trigger the share popup
classSelector: 'homeBtn',//if customButton is true, you must pass the css class name of your button (so we can bind the click event for you)
defaultMessage: 'My custom Message', //optionally pass a message to prepopulate your post
pageUrl: 'www.microsoft.com' //current browser url is used by default. You can pass your own url if you want to generate the OG object from a different URL.
};
yam.platform.yammerShare(options);
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<span href="#" class="homeBtn" onclick="clickSaveShare(339,'Reverse KT')"> Click here to share</a>
<script>
</script>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_social_buttons.min.js"></script>
<script type="text/javascript">yam.platform.yammerShare();</script>
</body>
</html>
Calling yam.platform.yammerShare() doesn't actually call the share to Yammer function despite its name. What it does is apply a click event to the specified DOM element so that when that element is clicked the Yammer popup will appear.
The reason you have to click the button twice is that the first time clickSaveShare is called, it calls yam.platform.yammerShare() which sets up a click event on the specified DOM element. The next time the button is clicked your click event has been replaced with the Yammer one so it works as expected.
One simple way to fix it given that you are including jQuery would be to use jQuery's document.ready event:
$(document).ready(function() {
var options = {
customButton : true,
classSelector: 'homeBtn',
defaultMessage: 'My custom Message',
pageUrl: 'www.microsoft.com'
};
yam.platform.yammerShare(options);
});
Here is a CodePen example of the above.
The problem is when using Kendo UI Dropdownlist with the dataBound method to set the selected value at load.
The reason for setting the value in the DataBound method is to ensure the transport has returned with the dropdownlist's dataitems to prevent a race condition failure. This is not demonstrated in the static example below, but my dataset is coming from the transport server side call.
Setting the dropdownlist's option filter: "startswith" works very well for simple client side filtering however a problem arises due to the use of dataBound. Very little documentation on this, but dataBound is called when the dropdownlist is initialized AND when any method takes action against it including filtering.
By placing debuggers in the inspector tool I was able to observe the filter method working, then the dataBound method being hit again and setting it to the initialized value. The effect is that it looks like the filter simply failed.
See the following example. To recreate the problem, try to use the dropdownlist's filter feature, type "Apple" and observe what happens.
$("#dropdownlist").kendoDropDownList({
dataSource: ["Apples", "Oranges"],
filter: "startswith",
dataBound: function(e) {
$("#dropdownlist").data('kendoDropDownList').value("Oranges");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.nova.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />
<input id="dropdownlist" />
I need a way for the dataBound to only fire on initialization or for the filter to no propagate further thereby avoiding the dataBound call after filtering.
After studying the dropdownlist in the DOM, I found a solution, albeit perhaps a bit hacky, to allow the dataBound initialize and set the value after the transport loads the list and prevents it from hijacking the filter method.
$("#dropdownlist").kendoDropDownList({
dataSource: ["Apples", "Oranges"],
filter: "startswith",
dataBound: function(e) {
if (e.sender.filterInput.val() === "") {
$("#dropdownlist").data('kendoDropDownList').value("Oranges");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.nova.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" rel="stylesheet" />
<input id="dropdownlist" />
By wrapping the dataBound initialization logic with a condition checking to see if the entered filter value (filterInput) is an empty string which it will be on initialization, it allows any subsequent use of the filter to bypass the dataBound logic.
Please post any other insights or better solutions you have to this if you have one.
Going to add that just checking the filterInput value is also going to set the value back to the initial value every time you open the dropdown after this. So after you change the value, it will always reset to "Oranges" whenever you open the dropdown, regardless of whether you changed it to "Apples."
Add another check for !this.value()
$("#dropdownlist").kendoDropDownList({
dataSource: ["Apples", "Oranges"],
filter: "startswith",
dataBound: function(e) {
if (!this.value() && e.sender.filterInput.val() === "") {
$("#dropdownlist").data('kendoDropDownList').value("Oranges");
}
}
});
I have an a test array that I am retrieving from iron-ajax with around 1000 items. I set that return array to the people property of my custom polymer element. Iron-list is displaying the first 20 results, but when i scroll down the rest of the results are not being loaded.
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<dom-module id="people-list">
<template>
<iron-list items="[[people]]" as="item" class="flex">
<template>
<div style="background-color:white; min-height:50px;">[[item.city]]</div>
</template>
</iron-list>
<iron-ajax
auto
id="ajaxPeopleList"
method="POST"
url="/people/list"
handle-as="json"
last-response="{{people}}">
</iron-ajax>
</template>
<script>
Polymer({
is: 'people-list',
properties: {
people: {
type: Array
}
}
});
</script>
</dom-module>
I think it may have to do with the height of the screen/iron-list element, but I am stuck and not sure how to proceed.
I can get it load all items if I set the height of the iron-list elements in pixels. But I just want it to fit on the screen. The docs make it look like you can use the iron-flex layout and use the class flex, which is what I tried to do in my sample code, but it has no effect.
This is because nothing is firing the iron-resize event to tell the iron-list to redraw the items. According to the docs:
Resizing
iron-list lays out the items when it recives a notification via the iron-resize event. This event is fired by any element that implements IronResizableBehavior.
By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.
document.querySelector('iron-list').fire('iron-resize');
I've added the following to your code (which is probably a bit of a hack) and got it working:
ready: function () {
document.addEventListener("scroll", function () {
// fire iron-resize event to trigger redraw of iron-list
document.querySelector('iron-list').fire('iron-resize');
});
}
Ben Thomas is right. You're getting the json elements but it's not displayed because the iron-list needs to be redrawn. Since i had the same problem, i went to google polymers website and found THIS code example.
In short for your example:
<script>
// Only execute after DOM and imports (in our case the json file) has been loaded
HTMLImports.whenReady(function() {
Polymer({
is: 'people-list',
properties: {
people: {
type: Array
}
},
attached: function() {
// Use the top-level document element as scrolltarget
this.$.list.scrollTarget = this.ownerDocument.documentElement;
}
});
});
The following simple code creates two CKEditor editors. The cancel event function detects and responds to the cancel event of the image dialog regardless of the editor launching the dialog, which, given its semantics, makes sense. And it works (the alert launches on any image dialog but no others, like link dialogs). However, I want to detect and respond to the cancel event of the image dialog on one and only one of the editors (in my case editor1). I cannot figure out, after much googling and searching the CKEditor API documentation, the proper semantics for doing so. I am using CKEditor 4.5.1.
<textarea id="editor1" name="editor1"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor1', {});
CKEDITOR.on('dialogDefinition', function (e)
{
var dialogName = e.data.name;
if (dialogName != 'image') return;
var dialog = e.data.definition.dialog;
dialog.on('cancel', function ()
{
alert("do something");
});
});
</script>
<textarea id="editor2" name="editor2"></textarea>
<script type="text/javascript">
CKEDITOR.replace('editor2', {});
</script>
Can someone please tell me how to limit the response to the dialog opened by a specific editor? Thank you for your help.
How can i catch the "onblur" event of my htmlbox textarea?
I want to be able to get the htmlbox content when it's onblur..
Thank's In Advance.
Try this code, it loops waiting 1 second until htmlbox creates the iframe, then it adds a .blur handler to the iframe, I found out the iframe's id by using IE8's Developer Tools, by clicking on the arrow icon in the developer tools and clicking the box you can see how HTML looks after the page loads and javascript processed. if($("iframe").length) is true then then htmlbox has created the iframe and you can attach the .blur event handler.
<script type="text/javascript">
$(function(){
var check = function(){
if($("iframe").length){
$("#hb_html").blur(function(){
alert('Blur has occurred!');
});
} else {
setTimeout(check, 1000)
}
}
setTimeout(check, 1000)
});
</script>
This example demonstrates:
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bar").blur(function(){
$(this).text("I have been blurred.");
});
});
</script>
<textarea id='bar'>foo</textarea>
Make sure the file jquery-1.5.min.js is in the same folder IF you use the example above.
You can read up on the .blur event at http://api.jquery.com/blur/
It receives a function as an argument and executes it when it becomes blurred.