My question is whether the following is a good pattern for Polymer?
The other purpose for my posting is to show how to handle events and access bound values from Polymer elements in the mainline of your html. I couldn't find good examples and it took me some time to get my head around how this should work so hopefully it is of use to others (assuming I have it right!)
I recognize that I could encapsulate the entire handling within a new Polymer element but sometimes this seems a bit awkward.
Note if you want try this code you will need to update the references to the Polymer elements.
<!--
Use the template tag to wrap your Polymer elements with data binding: Will Hopkins
-->
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>paper-input</title>
<!--
Update the following script and links to reflect your Polymer element locations
-->
<script src="/polymer/platform/platform.js"></script>
<link href="/polymer/font-roboto/roboto.html" rel="import">
<link href="/polymer/paper-input/paper-input.html" rel="import">
<link href="/polymer/paper-button/paper-button.html" rel="import">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
paper-input.narrow {
width: 150px;
}
</style>
</head>
<body unresolved>
<section>
<!--
OK here is the secret sauce. Wrap your Polymer tags with the template tag, give it and id and specify auto binding
-->
<template id="user-maintenance" is="auto-binding">
<div><paper-input label="ID" floatinglabel=true type=number value="{{iD}}"></paper-input></div>
<div><paper-input label="First Name" id="firstName" floatinglabel=true value="{{firstName}}"></paper-input></div>
<div><paper-input label="Last Name" floatinglabel=true value="{{lastName}}"></paper-input></div>
<div><paper-input label="Blurb" floatinglabel=true multiline maxrows=5 value="{{blurb}}"></paper-input></div>
<div><paper-input label="Concurrency Control"value="{{conControl}}" disabled></paper-input></div>
<br>
<p>id: {{iD}}, First Name: {{firstName}}, Last Name: {{lastName}}, Blurb: {{blurb}}, Concurrency Control: {{conControl}}</p>
<div>
<paper-button raised id="createButton" on-tap="{{createClicked}}">Create</paper-button>
<paper-button raised id="retrieveButton" on-tap="{{retrieveClicked}}">Retrieve</paper-button>
<paper-button raised id="updateButton" on-tap="{{updateClicked}}">Update</paper-button>
<paper-button raised id="deleteButton" on-tap="{{deleteClicked}}">Delete</paper-button>
</div>
</template>
</section>
<script>
//
// OK now lets get a handle to our template
//
var inlineBinding = document.getElementById('user-maintenance');
// now we can set an input value
inlineBinding.conControl = 13;
// and handle events
inlineBinding.createClicked = function() {
// and retrieve values
alert("Create fired for: " + inlineBinding.firstName + " " + inlineBinding.lastName);
};
inlineBinding.retrieveClicked = function() {
alert("Retrieve fired for: " + inlineBinding.firstName + " " + inlineBinding.lastName);
};
inlineBinding.updateClicked = function() {
alert("Update fired for: " + inlineBinding.firstName + " " + inlineBinding.lastName);
};
inlineBinding.deleteClicked = function() {
alert("Delete fired for: " + inlineBinding.firstName + " " + inlineBinding.lastName);
};
</script>
</body>
This is perfectly fine and something we show off in the docs: https://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside
<template is="auto-binding"> is in fact a custom element :), so you shouldn't shy away from it. The only thing it doesn't do (compared to <polymer-element> is <prop>Changed() handlers).
Related
I want to add html table inside a tooltip for each cell without any server request.
Kendo provides this feature with api calling.
$(document).ready(function() {
var tooltip = $("#target").kendoTooltip({
iframe: false,
content: {
url: "*http://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html*"
},
width: 220,
height: 280
}).data("kendoTooltip");
});
Is there any way to add html without making any request?
The content configuration of the tooltip can accept not only a URL, but also a string. This string can contain HTML, like this:
td {
background: red;
width: 10px;
height: 10px;
}
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<body>
<span id="target">
Some content
</span>
<script>
$(document).ready(function() {
$("#target").kendoTooltip({
content: "<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>"
});
});
</script>
</body>
The content option can also be set as a function that exposes event data, containing the target element, so you can return a dynamic string (including HTML elements, as previously mentioned), based on the content of the target element, e.g.:
Example
I am using go-gin and have a re-direct
c.Redirect(http.StatusMovedPermanently, myurl1).
Can I add a timer and call another re-direct once the first one completes in the same handler?
c.Redirect(http.StatusMovedPermanently, myurl1)
// sleep for 5 seconds
c.Redirect(http.StatusMovedPermanently, myurl2)?
Can I pause a handler's execution for a few seconds?
Simply put inside your page:
<meta http-equiv="refresh" content="5; url=http://example.com/" />
Another solution with javascript:
<script type="text/javascript">
setTimeout("location.href = 'http://example.com/';",5000);
</script>
your html logout page with 3-d party logout page inside
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="5; url=https://localhost:8080/login" />
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="http://example.com/" />
</div>
</body>
</html>
If you want to redirect once the page is loaded, you have to do that in javascript.
The base of HTTP protocol is 1 query, 1 answer: "Get me this page" -> "Here it is".
You can't answer once to a query, and one second later and say "Oh, now you have to display this other page" (that's how the protocol was defined).
Therefore, if you want to redirect to another page after a short break, you have to insert a javascript call at the end of your file: Once the first redirection is done, then JS will execute itself, and you can put something like "Wait 5 seconds then call for this second page".
I'm facing a problem, when i using Polymer's iron-ajax element.
I have a custom element like that:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="first-element">
<template>
<!-- Stylesheet-->
<style>
::host{
display:block;
}
</style>
<!-- Element content -->
<h1>
{{yolo}}
</h1>
<iron-ajax
auto
url="http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json"
handle-as="json"
on-response="handleResponse"
last-response="ajaxResponse"></iron-ajax>
<span>{{ajaxResponse.city_name}}</span>
</template>
<script>
Polymer({
is: "first-element",
properties: {
yolo: {
type: String,
value: 'YOLOOO'
}
},
handleResponse: function(){
console.log('Jobs Done')
}
});
</script>
</dom-module>
The handleResponse function, also display's browsers developer console, so that request is working correctly. Databinding also working correctly, i can also see my "yolo" properties value.
But, it doesn't display data, i also use brackets e.g [[ajaxResponse.city_name]]
How can I solve that? Thanks for help!
You are not binding iron-ajax last-response attribute to any of your polymer element properties, it's supposed to be : last-response = "{{ajaxResponse}}".
In addition the amazon request need to be loaded over https.
Here is Plunkr to see it in action.
You can check this PolyCast on iron-ajax if you want to learn more.
<dom-module id="first-element">
<template>
<!-- Stylesheet-->
<style>
::host {
display: block;
}
.icon{
width:35px;
height:auto;
float:right;
position:relative;
top:-20px;
}
</style>
<!-- Element content -->
<h1>
{{yolo}}
</h1>
<iron-ajax auto url="https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json" handle-as="json" on-response="handleResponse" last-response="{{ajaxResponse}}"></iron-ajax>
<h1>{{ajaxResponse.city_name}}</h1>
<template is="dom-repeat" items="{{ajaxResponse.days}}" index-as="day_no">
<div>
<hr>
<span>Day : {{day_no}}</span>
<br>
<img src="{{item.icon}}" alt="" class="icon">
<span> High: {{item.high}} C</span>
<br>
<span> Low: {{item.low}} C</span>
</div>
</template>
</template>
<script>
Polymer({
is: "first-element",
properties: {
yolo: {
type: String,
value: 'YOLOOO'
},
ajaxResponse: {
type: Array
}
},
handleResponse: function(e) {
console.log(e.detail.xhr.response);
}
});
</script>
</dom-module>
I have a jsfiddle here to illustrate my question
http://jsfiddle.net/ttmt/DgnLd/1/
It's just a simple button with a hidden div. The button slide toggles the hidden div.
I would like to have div filled with a random color each time it opens.
At the moment it's picking two random colors - when the div is opening and when the finished opening.
How can I stop the second color and just have one.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
•{
margin:0;
padding:0;
}
#wrap{
margin:20px;
}
#btn{
width:100px;
height:50px;
background:red;
color:white;
padding:10px;
margin:0 0 50px 0;
}
#infoDiv{
width:500px;
height:300px;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
CLICK
<div id="infoDiv">
</div>
</div>
<script>
$(document).ready(function(){
alert('here');
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
$('#infoDiv').slideToggle('slow', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv').css({'background': col});
});
});
});
</script>
</body>
</html>
$(document).ready(function(){
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv:hidden').css({'background': col});
$('#infoDiv').slideToggle('slow');
});
});
Try that -- I've moved your Random color picker out of the SlideToggle callback as that will only run once the slide was finished which from your question I assumed you didn't want.
It also only changes the color of the info div if it's hidden by checking the visible selector, you can read more about that here
Let me know if that works for you
Is this possible ? like I have this phrase on a textbox:
"I went home"
then when I click "home" an options box shows up like:
"I entered home"
|garden|
| motel|
|______|
sorry for my ugly way to show it, couldn't think about anything better lol
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#fieldName").focus(function(){
var el = $(this);
var coords = el.offset();
var div = $("<div>").addClass("dropdown").html("<span>garden</span><span>motel</span>").css({"top":coords.top+18+"px","left":coords.left+45+"px"});
el.after(div);
$(".dropdown span").click(function(){
var newText = "I entered the " + $(this).text();
$("#fieldName").val(newText);
$("div.dropdown").remove();
});
});
});
</script>
<style>
.text {width:120px;}
.dropdown {width:75px; text-align:right; position:absolute; padding:2px; background:#eee; border:1px solid #aaa;}
.dropdown span {display:block; cursor:pointer;}
</style>
</head>
<body>
<input type="text" class="text" name="fieldName" id="fieldName" value="I entered the home" />
</body>
</html>
You'll need a copy of jquery (or point to Google's CDN of it) for this to work. This example's pretty primitive, but hopefully it'll get you where you want to go.