I am creating a json tree with checkbox using jquery. Here is my code:
<body>
<div id="regionTree">
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<script>
$(function(){
var json = [{"ID":1,"Name":"r1","Child":[{"ID":1,"Name":"c1"},{"ID":2,"Name":"c2"}]},{"ID":1,"Name":"r2","Child":[{"ID":1,"Name":"c1"},{"ID":2,"Name":"c2"}]}];
//debugger;
var treeString = '';
treeString+='<ul>';
$(json).each(function(key, value) {
treeString+='<li>';
treeString+='<label><input type="checkbox" class="parent"/>'+value.Name+'</label><br/>';
//alert(value.Name);
if(value.Child != undefined && value.Child.length > 0)
{
treeString+='<ul>';
$(value.Child).each(function(key,value){
treeString+='<li>';
treeString+='<label><input type="checkbox" class="child"/>'+value.Name+'</label><br/>';
treeString+='</li>';
//alert(value.Name);
});
treeString+='</ul>';
}
treeString+='</li>';
});
treeString+='</ul>';
$('#regionTree').append(treeString);
//------
$('.parent').live('click', function(){
debugger;
console.log($(this).find('.child').size());
$(this).parent().children(':checkbox').prop("checked", true);
});
});
</script>
</body>
If you copy paste it and open up in FF/Chrome you can see the checkbox tree. I wanted to select all child elements of a node if parent is selected. But for some reason i am not able to get all child checkboxe for a node.
Please help.
$(this).parent().children(':checkbox').prop("checked", true);
the checkbox's parent is the label, not the li.
try:
$(this).closest('li').find(':checkbox').prop("checked", true);
You can use any ready plugin to create a tree with checkboxes form a JSON source. For example:
https://github.com/AlexLibs/niTree
Related
I've a custom element which, among other things, has a core-input and a paper button in it.
When the element is created, the input is disabled, and I want to enable it when I tap the button.
I've tried several ways and can't access the input's attribute.
<paper-input-decorator label="Nombre de usuario" floatingLabel>
<input id="usernameinput" value="{{UserName}}" is="core-input" disabled />
</paper-input-decorator>
<paper-button raised id="edprobutton" on-tap="{{edbutTapped}}">EDITAR</paper-button>
What should I write in
edbutTapped: function () {
},
EDIT
So, I've learned that the problem was that my username input element was inside a repeat template, and that's bad for what I was trying to do. Now I'm trying to bind a single json object to my element, with no luck so far.
What I have right now:
In my Index page:
<profile-page id="profpage" isProfile="true" entity="{{profEntity}}"></profile-page>
<script>
$(document).ready(function () {
var maintemplate = document.querySelector('#fulltemplate');
$.getJSON('api/userProfile.json', function (data) {
var jsonString = JSON.stringify(data);
alert(jsonString);
maintemplate.profEntity = jsonString;
});
}
</script>
In my element's page:
<polymer-element name="profile-page" attributes="isprofile entity">
<template>
<style>
[...]
</style>
<div flex vertical layout>
<core-label class="namepro">{{entity.Name}}</core-label>
<core-label class="subpro">{{entity.CompanyPosition}}</core-label>
<core-label class="subpro">{{entity.OrgUnitName}}</core-label>
</div>
</template>
</polymer-element>
And my JSON looks like this:
{"Name": "Sara Alvarez","CompanyPosition": "Desarrollo","OrgUnitName": "N-Adviser"}
I'm asuming I need to "update" my element somehow after changing its entity attribute?
Try the following
<script>
Polymer({
edbutTapped: function () {
this.$.usernameinput.disabled = false;
}
});
</script>
The this.$ allows you to access controls defined in an elements and the usernameinput is the id you assigned to the input.
This can go below the closing tag of the element you are defining.
'disabled' is conditional-attribute.
So this will be the correct use of it:
<input id="usernameinput" value="{{UserName}}" is="core-input" disabled?="{{isDisabled}}" />
In the prototype:
//first disable the field, can be done in ready callback:
ready: function () {
this.isDisabled = 'true';
}
//set idDisabled to 'false' i.e. enable the input
edbutTapped: function () {
this.isDisabled = 'false';
},
OK this is going to be a long answer (hence why I am not entering this as an edit of my original answer). I've just done something which is functionally the same.
The first thing is this code;
$.getJSON('api/userProfile.json', function (data) {
var jsonString = JSON.stringify(data);
alert(jsonString);
maintemplate.profEntity = jsonString;
});
Polymer has a control called core-ajax - this as it's name suggests makes an ajax call. The other really nice thing is that it can be made to execute when the URL changes. This is the code from the project I've got.
<core-ajax id="ajax"
auto=true
method="POST"
url="/RoutingMapHandler.php?Command=retrieve&Id=all"
response="{{response}}"
handleas="json"
on-core-error="{{handleError}}"
on-core-response="{{handleResponse}}">
</core-ajax>
The auto is the bit which tells it to fire when the URL changes. The description of auto from the polymer documentation is as follows;
With auto set to true, the element performs a request whenever its
url, params or body properties are changed.
you don't need the on-core-response but the on-core-error might be more useful. For my code response contains the JSON returned.
So for your code - it would be something like this
<core-ajax id="ajax"
auto=true
method="POST"
url="/api/userProfile.json"
response="{{jsonString}}"
handleas="json"
on-core-error="{{handleError}}" >
</core-ajax>
Now we have the data coming into your project we need to handle this. This is done by making use of Polymer's data-binding.
Lets detour to the element you are creating. Cannot see anything wrong with the following line.
<polymer-element name="profile-page" attributes="isprofile entity">
We have an element called 'profile-page' with two properties 'isprofile' and 'entity'.
Only because my Javascript leaves a bit to be desired I would pass each property as a seperate entity making that line
<polymer-element name="profile-page" attributes="isprofile name companyposition OrgUnitName">
Then at the bottom of your element define a script tag
<script>
Polymer({
name: "",
companyposition: "",
OrgUnitName: ""
});
</script>
Now back to the calling (profile-page). The following code (from my project) has the following;
<template repeat="{{m in response.data}}">
<map-list-element mapname="{{m.mapName}}" recordid="{{m.Id}}" on-show-settings="{{showSettings}}">
</map-list-element>
</template>
Here we repeat the following each element. In your case you only have one entry and it is stored in jsonString so your template is something like this
<template repeat="{{u in jsonString}}">
<profile-page name="{{u.name}} companyposition="{{u.companyposition}}" OrgUnitName="{{u.OrgUnitName}}">
</profile-page>
</template>
Now we get to the issue you have. Return to your profie-page element. Nothing wrong with the line
on-tap="{{edbutTapped}}"
This calls a function called edbutTapped. Taking the code I gave you earlier
<script>
Polymer({
edbutTapped: function () {
this.$.usernameinput.disabled = false;
}
});
</script>
The only thing to change here is add the following code
created: function() {
this.$.usernameinput.disabled = true;
},
This is inserted after the Polymer({ line. I cannot see in your revised code where the usernameinput is defined but I am assuming you have not posted it and it is defined in the element.
And you should be working, but remember to keep your case consistent and to be honest I've not been - certain parts of Polymer are case sensitive - that catches me out all the time :)
I'm trying to setup an element with a paper-checkbox inside of it. I want the checkbox's checked state to be controlled by the response of an ajax call.
HTML:
<epic-list-episode checked="<%= episode.seen? %>">
<p><strong><%= episode.show.name %></strong></p>
</epic-list-episode>
Custom element:
<polymer-element name="epic-list-episode" attributes="checked">
<template>
<link rel="stylesheet" href="epic-list-episode.css.scss" />
<div horizontal layout center>
<div flex>
<content></content>
</div>
<div vertical layout>
<paper-checkbox checked?="{{checked === 'true'}}" on-change="{{changeHandler}}"></paper-checkbox>
</div>
</div>
</template>
<script>
Polymer({
changeHandler: function(event) {
//Send ajax, wait for error/success callback
//checkbox.checked = response from ajax
}
});
</script>
</polymer-element>
How can this be achieved? I've tried return false but the checkbox still does its toggle animation.
To clarify, here is the flow i want:
Checkbox is unchecked
I click the checkbox (I don't want it to toggle yet)
Ajax request is sent off
Wait for the callback
If it's successful, toggle the state of the checkbox
I don't think you need that checked attribute at all.
What you can do is, when the on-change is called, set the checked property of the paper-checkbox back to its previous value. And then after the ajax callback, set it back to what it should be.
changeHandler: function (event, detail, sender) {
this.$.checkbox.checked = !this.$.checkbox.checked;
// give the checkbox a little loading animation
var loading = new CoreAnimation();
loading.duration = 750;
loading.easing = 'ease-in';
loading.keyframes = [{ opacity: 1, transform: "scale(1)" }, { opacity: 0.4, transform: "scale(0.9)" }];
loading.direction = 'alternate';
loading.iterations = '1000';
loading.target = this.$.checkbox;
loading.play();
// give it a little delay to act like a callback
this.job('delay', function () {
// stop the animation
loading.finish();
this.$.checkbox.checked = !this.$.checkbox.checked;
}, 3000);
}
Note that I have also included some animation code to make the user feel like the paper-checkbox is doing something, for a better user experience. Please see this jsbin for a working example.
there are a few ways to actually go about it. i have made this plunker to show the 2 ways i go about doing this. http://plnkr.co/edit/xqHCSvs63u4bdFJYM6TF?p=preview
using declarative binding
<paper-checkbox checked="{{checked}}" on-change="{{changeHandler}}"></paper-checkbox>
in your script
this.checked = true;
and pure js
<paper-checkbox id="box" on-change="{{changeHandler}}"></paper-checkbox>
then in your script
var box = document.querySelector("#box");
box.checked = true;
I have a polymer-element like this:
<polymer-element name="x-block" attributes="data">
<template>
<div class="block-wrapper">
<div class="plus-button"on-click="{{showMdl}}">+</div>
<div hidden?="{{!showModal}}" id="modal">
Modal
</div>
<content select="header"></content>
</div>
</template>
/*Polymer */
<script>
Polymer({
ready: function(){
this.showModal = false;
},
showMdl: function(e,detail,sender){
this.showModal = true;
this.$.modal.style.top = e.layerY+'px';
this.$.modal.style.left = e.layerX+'px';
var newElement = document.createElement('div')
newElement.innerHTML = 'dynamicllyElement';
newElement.setAttribute('on-click','{{clickOnDynamicllyElement}}');
this.$.modal.appendChild(newElement);
},
clickOnDynamicllyElement:function(){
console.log('1111')
}
});
</script>
</polymer-element>
clickOnDynamicllyElement does not work.
You can use the undoc'd injectBoundHTML()
Example:
this.injectBoundHTML('<div on-click="{{clickOnDynamicllyElement}}">dynamicllyElement</div>', this.$.modal);
Disclaimer - this has been answered by the Polymer team elsewhere on SO
From the Polymer docs
https://www.polymer-project.org/docs/polymer/polymer.html#imperativeregister
Registering imperatively
Elements can be registered in pure JavaScript like this:
<script>
Polymer('name-tag', {nameColor: 'red'});
var el = document.createElement('div');
el.innerHTML = '\
<polymer-element name="name-tag" attributes="name">\
<template>\
Hello <span style="color:{{nameColor}}">{{name}}</span>\
</template>\
</polymer-element>';
// The custom elements polyfill can't see the <polymer-element>
// unless you put it in the DOM.
document.body.appendChild(el);
</script>
You need to add the to the document so that the Custom Elements polyfill picks it up.
Important: Since the Polymer call here is outside the , it must include the tag name argument.
I am trying to use ondblclick inside polymer element, but I cannot get it to work.
I know that I can just use ondblclick="someFunction()" but I need to access double clicked element model, something like on-tap event:
event.target.templateInstance.model.myModel;
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="dblclick-test">
<template>
<button on-dblclick="{{btnDblClick}}" on-tap="{{btnTap}}">{{btnText}}</button>
</template>
<script>
Polymer({
btnText: 'double click me',
btnDblClick: function(event) {
// in real code I need to use
// event.target.templateInstance.model
// just like on-tap's event param
this.btnText = 'Hi, u dbl clicked me !!!!!!';
},
btnTap: function(event) {
this.btnText = 'Hi, u clicked me !';
}
})
</script>
</polymer-element>
<dblclick-test></dblclick-test>
Is there any polymeric way to do it?
First
I was missing the declarative event mapping by using ondbleclick instead of on-dblclick, thanks to ebidel edit to my question.
Even though the above example won't work.
Second
To solve the conflict between on-tap and on-dblclick, I used something like the following in my code:
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="dblclick-test">
<template>
<button on-tap="{{btnTap}}">{{btnText}}</button>
</template>
<script>
Polymer({
btnText: 'double click me',
btnDblClick: function(event) {
this.btnText = 'Hi, u dbl clicked me !!!!!!';
},
btnTap: function(event) {
if (this.tappedOneTime) {
this.btnDblClick();
this.tappedOneTime = false;
} else {
this.btnText = 'Hi, u clicked me !';
}
this.tappedOneTime = true;
// reset flag after 800ms
this.async(function() {
this.tappedOneTime = false;
}, null, 800);
}
})
</script>
</polymer-element>
<dblclick-test></dblclick-test>
I assume tap is also fired on dblclick this makes it difficult.
My (and other answers) to this question Distinguish between onClick and onDoubleClick on same element to perform different actions in Dart show possible solutions.
Don't use on-tap and on-dblclick together, if you need both behaviors use on-click instead on-tap.
<my-elem on-click="clicked" on-dblclick="dblclicked">
I have a PHP file that serves up a JSON array populated from a MySQL database and is loaded into the DOM. This data is loaded via jQuery getJSON() method into the #navContent divide of the HTML document. This functions as planed.
At the very-bottom of the HTML doc, I have a click function that targets the #navItem div that was dynamically loaded into the DOM but this does not fire. I am assuming the <li ID = 'navItem'... isnt kept when the data is dynamically populated..??
What do I have wrong? For now, I just want all the divides that were dynamically created into the #navContent div to click thru to a URL.
<html>
. . .
<head>
. . .
<script type="text/javascript">
var ajaxLoader = '';
var container = "navItem";
var appendE = "navContent";
var dns = 'http://192.168.1.34';
var navContent = '/andaero/php/regulatory_list.php';
var bodyContent = '/wiki/index.php/Airworthiness_Directive #content';
<!-- ================ When Ready Do This ============================ -->
<!-- **************************************************************** -->
$(document).ready(function(){
loadNav(dns + navContent, container, appendE);//<- This gets loaded into the navContent<div
loadPage(dns + bodyContent, "bodyContent");
});
. . .
</script>
<body>
. . .
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent" >
<li id="navItem" style="display: none;">
<h1 class="navH1"></h1>
<h2 class="navH2"></h2>
<p class="navP"></p>
<hr class="navHR" />
</li>
</div>
</div>
. . .
</body>
<!-- ================ Functions ===================================== -->
<!-- **************************************************************** -->
<script type="text/javascript">
/* --------------- Handle Pg Loading ----------------- */
function loadPage(url, pageName) {
$("#" + pageName).load(url, function(response){
// transition("#" + pageName, "fade", false);
});
};
function loadNav(url, container, appendE) {
$.getJSON(url, function(data){
$.each(data.items, function(){
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
// And add the new list item to the page
newItem.children().appendTo('#' + appendE)
});
$('#navHeaderTitle').text(data.key);
//transition("#" + pageName, "show");
});
$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
e.preventDefault();
$('#bodyContent').load('www.google.com');
});
};
</scrip>
</html>
============ EDIT ================
I tried everything that was sugested with no prevail. I ended up using the code Shyju answered with but one modification to get it to work: As per the docs,
.on( events [, selector] [, data], handler(eventObject) ), I changed [,data] from the tag ID to just the tag type. ie: a. This function now since I wrapped the whole with the tag. See bellow:
Changed HTML to:
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent" >
<li id="navItem" style="display: none;">
<a> //<-- ADDED THIS TAG WRAPPER!!
<h1 class="navH1"></h1>
<h2 class="navH2"></h2>
<p class="navP"></p>
<hr class="navHR" />
</a>
</li>
</div>
</div
Changed the Function to (Note that .on() allows a click event on any TAG element--even new ones--since the event is handled by the ever-present previous element after it bubbles to there.:
$('#navContent').on('click', 'a', function(e){//<--CHANGED DATA TO 'a'
e.preventDefault();
$('#bodyContent').load('http://www.google.com');
});
for dynamic content, you should use jquery on.
http://api.jquery.com/on/
So your code should look like this
$("#navScrollContainer").on("click","#navItem").click(function(e){
e.preventDefault();
$('#bodyContent').load('www.google.com');
});
But i guess you should not use the id selector for click event, because ids will (And should) be unique for an element. So when you load new content, the id will be different i believe. Probably you can use class name which is common for all those elements to be clicked.
on method is availabe from jQuery 1.7 version only. If you are using a previous version, you should use live as Niyaz mentioned.
http://api.jquery.com/live/
Instead of:
$('#navItem').click(function(){});
try using:
$('#navItem').live('click', function(){}); // jQuery older than 1.7
or
$('#navItem').on('click', function(){}); // jQuery 1.7 or newer
It would appear so that all your nav elements are created with the same ID. This
$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
will apply to only one of them I suppose. Try adding some sort of counter to the ID when you are cloning:
var newItem = $('#' + container).clone();
newItem.attr("id","something_unique_in_here");