How to get Kendo DateTimePicker format to work like 'toLocaleString'? - kendo-ui
I want the Kendo DateTimePicker to be formatted just as new Date()).toLocaleString("UTC", {timeZone: "UTC"}) + " (UTC)" formats its output string (e.g. 2015.04.23 22:15:54 (UTC)). I have been able to set the value: using toLocaleString and get the correct initial format for the date and time but once the date or time values have been changed using the calendar dropdown the format goes back to default. I cannot figure out how to set the format property to get the correct result.
Here is the code I was experimenting with in the Kendo UI Dojo:
http://dojo.telerik.com/iFiNO/2
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datetimepicker/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
value: (new Date()).toLocaleString("UTC", {timeZone: "UTC"}) + " (UTC)",
format: "g"
});
</script>
</body>
</html>
On the Kendo UI demo site, they have an example of globablization on a date and time picker (here: http://demos.telerik.com/kendo-ui/globalization/index) Here is the full code example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/web/globalization/cultures/kendo.culture.en-US.js"></script>
<script src="../content/web/globalization/cultures/kendo.culture.en-GB.js"></script>
<script src="../content/web/globalization/cultures/kendo.culture.de-DE.js"></script>
<script src="../content/web/globalization/cultures/kendo.culture.fr-FR.js"></script>
<script src="../content/web/globalization/cultures/kendo.culture.bg-BG.js"></script>
<div id="example">
<div id="product-view" class=" demo-section k-header">
<div class="right">
<label for="culture">Choose culture:</label>
<input id="culture" value="en-US" />
</div>
<h2>Product promotion</h2>
<ul id="fieldlist">
<li>
<label for="startDate">Discount start date:</label>
<input id="startDate" />
<input id="startTime" value="12:00 AM" />
</li>
<li>
<label for="endDate">Discount end date:</label>
<input id="endDate" />
<input id="endTime" value="12:00 AM" />
</li>
<li>
<label for="initial">Initial price:</label>
<input id="initial" value="10" min="1"/>
</li>
<li>
<label for="discount">Discount:</label>
<input id="discount" value="0.05" min="0" max="0.5" step="0.01"/>
</li>
</ul>
</div>
<style>
#example h2 {
padding: 5px 0 15px;
font-weight: normal;
border-bottom: 1px solid rgba(128,128,128,.3);
}
#product-view {
overflow: hidden;
width: 600px;
padding: 20px 20px 0 20px;
margin: 30px auto;
background-position: 0 -255px;
}
.right
{
float:right;
}
#fieldlist
{
width: 100%;
float:left;
margin:0;
padding: 10px 0 30px 0;
}
#fieldlist li
{
list-style:none;
padding:5px 0;
}
#fieldlist label {
display: inline-block;
width: 140px;
text-align: right;
}
</style>
<script>
$(document).ready(function() {
function startDateChange() {
var date = startDate.value();
if (date) {
date = new Date(date);
date.setDate(date.getDate() + 1);
endDate.min(date);
}
}
function endDateChange() {
var date = endDate.value();
if (date) {
date = new Date(date);
date.setDate(date.getDate() - 1);
startDate.max(date);
}
}
function changeCulture() {
kendo.culture(this.value());
var datePickerOptions = {
format: kendo.culture().calendar.patterns.d
};
var timePickerOptions = {
format: kendo.culture().calendar.patterns.t
};
startDate.setOptions(datePickerOptions);
endDate.setOptions(datePickerOptions);
startTime.setOptions(timePickerOptions);
endTime.setOptions(timePickerOptions);
initial.value(initial.value());
discount.value(discount.value());
}
var startDate = new kendo.ui.DatePicker($("#startDate"), { change: startDateChange });
var endDate = new kendo.ui.DatePicker($("#endDate"), { change: endDateChange });
var startTime = new kendo.ui.TimePicker($("#startTime"));
var endTime = new kendo.ui.TimePicker($("#endTime"));
var initial = new kendo.ui.NumericTextBox($("#initial"), { format: "c" });
var discount = new kendo.ui.NumericTextBox($("#discount"), { format: "p" });
var today = new Date();
startDate.value(today);
endDate.min(today);
today = new Date(today);
today.setDate(today.getDate() + 1);
endDate.value(today);
startDate.max(today);
$("#culture").kendoDropDownList({
change: changeCulture,
dataTextField: "text",
dataValueField: "value",
dataSource: [
{text: "bg-BG", value: "bg-BG"},
{text: "de-DE", value: "de-DE"},
{text: "en-US", value: "en-US"},
{text: "en-GB", value: "en-GB"}
]
});
});
</script>
</div>
</body>
</html>
The globalization files link to: http://demos.telerik.com/kendo-ui/content/web/globalization/cultures/kendo.culture.en-US.js . The pattern is kendo.culture.{culturename}. This page http://cdnjs.com/libraries/kendo-ui-core provides CDN links to a ton of Kendo culture files for various languages.
Hopefully this should provide you with enough of an example to be able to adjust the format of the date/time picker. In the code example above, there is a spot where they show how to change the pattern option:
var datePickerOptions = {
format: kendo.culture().calendar.patterns.d
};
The last piece is figuring out which culture you actually need. In the example above, the line
kendo.culture(this.value());
changes the culture. You can read more about this built-in Kendo function here: http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-culture
If you simply call kendo.culture() it will return the current culture. So the line
format: kendo.culture().calendar.patterns.d
sets the pattern for the current culture. Of cource for this to work, you have to have the correct culture file loaded.
If you look more in depth at one of the culture files, you can see the patterns and what formats they represent:
(function( window, undefined ) {
kendo.cultures["en-US"] = {
name: "en-US",
numberFormat: {
pattern: ["-n"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
percent: {
pattern: ["-n %","n %"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
symbol: "%"
},
currency: {
pattern: ["($n)","$n"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
symbol: "$"
}
},
calendars: {
standard: {
days: {
names: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
namesAbbr: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
namesShort: ["Su","Mo","Tu","We","Th","Fr","Sa"]
},
months: {
names: ["January","February","March","April","May","June","July","August","September","October","November","December",""],
namesAbbr: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""]
},
AM: ["AM","am","AM"],
PM: ["PM","pm","PM"],
patterns: {
d: "M/d/yyyy",
D: "dddd, MMMM dd, yyyy",
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
g: "M/d/yyyy h:mm tt",
G: "M/d/yyyy h:mm:ss tt",
m: "MMMM dd",
M: "MMMM dd",
s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss",
t: "h:mm tt",
T: "h:mm:ss tt",
u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",
y: "MMMM, yyyy",
Y: "MMMM, yyyy"
},
"/": "/",
":": ":",
firstDay: 0
}
}
}
})(this);
There are a number of reference that will show you how to load a script file using script. Or you can load them all, or combine them into one large JS file and minify it or something. You could also load the culture files from that CDN, or of course download them to your server and host them locally.
Related
Google Picker Search only inside parent folder
I am using setParent() to show a particular folder only in Google picker but searching lists all the files and folders. I want search results restricted to parent folder. Is this possible?
As far as I can tell there is no way to do this with the picker API. One hack is to filter for starred files but that is usually not helpful because you probably just want to set one directory/folder to search inside.
In the end I had to use the Google Drive API instead and create my own interface
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body style="background-color: rgb(221, 238, 232);">
<div style="max-width: 1100px; margin: auto;" class="conainer mt-5">
<div class="row text-center mt-5">
<div class="col-10 ms-5">
<div class="d-flex">
<input type="search" class="form-control me-2" id="search_input" oninput="search(event)" placeholder="Search" aria-label="Search">
<button type="button" class="btn btn-primary" oninput="search(event)">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row text-center mt-5 ">
<div class="col-10 ms-5" style="background-color: white; border-radius: 5px;">
<template type="text/x-handlebars-template" id="documentsTemplate">
<div class="row mt-2 mb-2">
{{#if documents.length}}
{{#each documents}}
<div class="col-2 mt-2">
<div style="height: 200px; width:150px; background-color: white; border-radius: 5px; border: solid 1px; border-color: lightblue;">
<img style="height: 150px; width:150px;" src="{{thumbnailLink}}" />
<input class="form-check-input" type="checkbox" value="">
{{name}}
</div>
</div>
{{/each}}
{{else}}
<div style="height: 200px; width:100%; background-color: white; text-align: center; font-size: 2vw; margin: 0 auto;">
No Results
</div>
{{/if}}
</div>
</template>
<div id="documentsList"></div>
</div>
</div>
</div>
</div>
<script type="module" src="script.js"></script>
<!-- <script src="https://apis.google.com/js/platform.js"></script> -->
<script src="https://apis.google.com/js/api.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
//script.js
//import { google_client_id } from "./utils/configs.js"
// get this from 'APIs and Services'>credentials>Oauth app
const google_client_id=XXXXX
(function() {
// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
gapi.load('auth2', onAuthApiLoad);
gapi.load('picker', onPickerApiLoad);
}
globalThis.search = (event) => {
clearTimeout(globalThis.searchTimeout);
globalThis.searchTimeout = setTimeout(() => {
getTemplateFolder()
.then(searchFiles)
}, 1000)
}
document.getElementById('search_input').addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
var key = event.key || event.keyCode;
if (key === 13) {
// Cancel the default action, if needed
event.preventDefault();
search(event);
}
});
gapi.load('client:auth2', (aa) => {
gapi.client.init({
client_id: google_client_id,
scope: 'https://www.googleapis.com/auth/drive',
discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
})
.then(checkSession)
.then(function() {
return getTemplateFolder();
})
.then(function(folder) {
return getFiles(folder);
});
});
function checkSession() {
if (!gapi.auth2.getAuthInstance().isSignedIn.get()) {
return gapi.auth2.getAuthInstance().signIn();
}
}
function getTemplateFolder() {
return gapi.client.drive.files.list({
q: "mimeType = 'application/vnd.google-apps.folder' and name = 'XXXXXX' and trashed = false",
pageSize: 10,
fields: 'nextPageToken, files(id, name)',
}).then(function(response) {
console.log(response);
return response.result.files[0];
});
}
function getFiles(templateFolder) {
return gapi.client.drive.files.list({
q: `'${templateFolder.id}' in parents and trashed = false`,
pageSize: 10,
fields: 'nextPageToken, files(id, name, mimeType, thumbnailLink)',
}).then(function(response) {
console.log(response);
var template = Handlebars.compile(document.querySelector("#documentsTemplate").innerHTML);
document.querySelector("#documentsList").innerHTML = template({ documents: response.result.files });
return response.result.files;
});
}
function searchFiles(templateFolder) {
return gapi.client.drive.files.list({
q: `'${templateFolder.id}' in parents and fullText contains '${document.getElementById("search_input").value}' and trashed = false`,
pageSize: 10,
fields: 'nextPageToken, files(id, name, mimeType, thumbnailLink)',
}).then(function(response) {
console.log(response);
var template = Handlebars.compile(document.querySelector("#documentsTemplate").innerHTML);
document.querySelector("#documentsList").innerHTML = template({ documents: response.result.files });
return response.result.files;
});
}
})();
Make sure to add the google_client_id and the directory name you want to filter by.
How can i make chat bot appear as live chat using direct line API?
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
I have this code to embed a bot as a live chat using direct Line API instead of the usual iframe but when i put in my directline secrete key, the Bot is occupying the whole web page. I need it to appear by the bottom right of the web page and pop up as a life chat when a user clicks on it. Please someone should guide me in achieving this. Thanks
Your problem is about the way you are displaying your div including the bot: <div id="bot"/> You can style this div to appear like you want; there are several samples provided on the bot Webchat Github project: For sidebar display: https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/sidebar/index.html For fullwindow : https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/fullwindow I would highly suggest to take a look at the 1st sample which has a demo of narrow, normal and wide div
As Nicolas R suggested, you can style the container div <div id="bot"/> to position it at bottom right corner of web page. I achieved same requirement in a project, the following sample code works for me, you can refer to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 450px;
position: relative;
}
#bot {
position: fixed;
bottom: 0;
right: 0;
}
.closechat {
top: 405px !important;
}
</style>
</head>
<body>
<div id="bot"></div>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{Your_BotId}' },
resize: 'detect'
}, document.getElementById("bot"));
$(function () {
$("div.wc-header").prop("isopen", "true");
$("div.wc-header").click(function () {
var isopen = $(this).prop("isopen");
//alert(isopen);
if (isopen == "true") {
$("div.wc-chatview-panel").addClass("closechat");
$("div.wc-header").prop("isopen", "false");
} else {
$("div.wc-chatview-panel.closechat").removeClass("closechat");
$("div.wc-header").prop("isopen", "true");
}
})
})
</script>
Test result:
how to disable previous months in kendo month picker
I have a kendo date picker in which only months are shown.Now i want to disable previous months of current month to disable so user will not be able to enter previous month.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="date"></div>
<script>
$(document).ready(function () {
var myDatePicker = $("#date").kendoDatePicker().data("kendoDatePicker");
myDatePicker.min(new Date()); //This code line will hide previous date from date picker
});
</script>
</body>
</html>
Update 1:
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<style>
.disabledDay {
display: block;
overflow: hidden;
min-height: 22px;
line-height: 22px;
padding: 0 .45em 0 .1em;
cursor: default;
opacity: 0.5;
}
</style>
</head>
<body>
<input id="datepicker" style="width: 150px;" />
<script>
disabledDaysBefore = [
+new Date("10/20/2015")
];
$(document).ready(function () {
var p = $("#datepicker").kendoDatePicker({
value: new Date(),
dates: disabledDaysBefore,
change: onChange,
month: {
content: '# if (data.date < data.dates) { #' +
'<div class="disabledDay">#= data.value #</div>' +
'# } else { #' +
'#= data.value #' +
'# } #'
},
open: function (e) {
$(".disabledDay").parent().removeClass("k-link")
$(".disabledDay").parent().removeAttr("href")
},
}).data("kendoDatePicker");
});
function onChange() {
var tillDate = new Date(disabledDaysBefore[0]);
var selectedDate = new Date(kendo.toString(this.value(), 'd'));
if (tillDate > selectedDate) {
tillDate = tillDate + parseInt(1);
$("#datepicker").data("kendoDatePicker").value(tillDate);
}
}
</script>
</body>
</html>
Let me know if any concern.
You can use the disableDates property and specify a function to check the date is before the current date, roughly along these lines:
$("#monthpicker").kendoDatePicker({
start: "year",
depth: "year",
format: "MMMM yyyy",
disableDates: function (date) {
var currentDate = new Date();
if (date.getFullYear() <= currentDate.getFullYear() && date.getMonth() < currentDate.getMonth()) {
return true;
} else {
return false;
}
}
});
Handling events and accessing bound values in polymer paper-input -- is this a good pattern?
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).
jQuery SlideToggle and random color
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