I have an object of polymer:
<newfolder-element id="newfolderelement" popupStyle="width: 362px; height: 100px;">
<span class="title">Utwórz nowy folder</span>
<input type="text" class="ginput" style="width: 350px; padding: 5px;" placeholder="Nowy katalog" />
<br />
<button class="action blue"><span class="label">Utwórz</span></button>
<button class="action red" id="cancelBtn"><span class="label">Anuluj</span></button>
<script type="text/javascript">
...
</script>
</newfolder-element>
I want to access dom elements in javascript, I tried this:
<script type="text/javascript">
Polymer('newfolderelement', {
domReady : function(){
$(this.shadowRoot.querySelector("#cancelBtn")).on('click', '#cancelBtn', function(){
console.log("clicked");
});
}
});
</script>
And this:
<script type="text/javascript>
$(this.shadowRoot.querySelector("#cancelBtn")).on('click', '#cancelBtn', function(){
console.log("clicked");
});
</script>
And this:
<script type="text/javascript>
$("#cancelBtn").click(function(){
console.log("clicked");
});
</script>
But all of above doesn't work. How to access dom elements inside polymer object ?
Why do you want to use jQuery, the Polymer already provides that functionality to you:
to access DOM elements use the $ map of the element, ie to get reference to the #cancelBtn use
this.$.cancelBtn
to add an eventhandler use declarative event mapping, ie to add an click handler to the button
<button class="action red" id="cancelBtn" on-click="{{cancelClicked}}"></button>
and just add method cancelClicked to your component's script section.
<script>
Polymer('newfolder-element', {
cancelClicked: function() {
// do something
}
});
</script>
This is much simpler and your component won't require additional library.
Related
I searched in this community, answers are available but does not work for my code.
Although my code works when I use button OnClick but I don't want to load it from within the body.Please help to load this JavaScript code automatically as soon as window load.
<html lang="en">
<head><title>demo</title>
<script>
function removeElement(parentDiv, childDiv){
//if (childDiv == parentDiv) { alert("The parent div cannot be removed.");}
if (document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child); //parent.remove(parentDiv);
}
else {
alert("Child div has already been removed or does not exist.");
return false;
}
};
</script>
</head>
<body> <!-- I don't want to load it in body onLoad="removeElement('parent','child');" -->
<div id="parent" style="border: 1px solid red; padding: 10px;">
I am the parent div.
<div id="child" style="border: 1px solid green; padding: 10px;">
I am a child div within the parent div.
</div>
</div>
<input type="button" value="Remove Element" onClick="removeElement('parent','child');">
</body>
</html>
If you wrap you code in a 'DOM ready event'
$(function() {
// your code here
}
That is the short handed version, alternatively you can use:
$( document ).ready(function() {
// your code here
}
Note: your question has the 'jquery' tag so, you should reference this on your file also if you wish to utilise this library, for example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Just add window.onload = function() { removeElement('parent','child'); } before </script>
I have a div which i am trying to toggle its class from one to another. I am able to toggle it only once but it will not return to the original class. I looked around for possible answers and looked into the propogation function, however i am unsure this is the correct use?
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
<script>
$(startStopCount).click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
</script>
</body>
You are getting the element via $('.cInact'). However, when you toggle the class .cInact, you can no longer get that element by $('.cInact') (it doesn't have that class anymore).
You can either do a selection with $('#counter') (getting the ID instead of the class, because you aren't toggling the ID) or assign the element reference to a variable:
var myAwesomeCounter = $('.cInact');
// Then use
myAwesomeCounter.toggleClass('cDown cInact');
Well, you're selecting the class 'cInact' and then toggling it's class.
i.e- removing it.
Wen you're trying to select the element again with the same selector: classname == cInact it's no longer true for that element. so you select nothing, and nothing happens.
To fix this, try using a different selector- e.g- id, like so-
$('#counter').toggleClass('cDown cInact');
The selector $(startStopCount) is wrong. It should be $("#startStopCount")
$('#startStopCount').click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
</body>
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
Better perhaps:
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('body').click(function () {
$('#counter').removeClass('cDown');
});
I have the following DOM structure.
<div class="purchase-section">
<div class="purchase">
<input type="submit" id="add-to-cart" class="btn" name="add" value="Add to Cart"> <span class="rc-or">Or</span>
<button class="btn rc-button" id="btn-buy-now" onclick="event.preventDefault(); window.location='https://example.com?productId=681';">Buy Now - 3 installment</button>
</div>
</div>
The button element is added by a script which runs after the page has loaded. I need to change the onclick handler for this button. I tried following but it doesn't work.
$(document).ready(function() {
$('.purchase-section').on('change', '.purchase', function(){
$("#btn-buy-now")[0].onclick = null;
$("#btn-buy-now").click(function() { alert("done") });
});
});
Can anyone please help me with this?
Use $("#btn-buy-now").removeAttr("onclick"); to remove onclick completely and then delegate event to dynamically added element.
$("static_parent").on("event", "dynamic_element", function () {
});
$(".purchase").on("click", "#btn-buy-now", function () {
/* code */
});
Try this:
$(document).ready(function() {
$(".purchase-section").find("#btn-buy-now").removeAttr('onclick');
$(".purchase-section").find("#btn-buy-now").click(function(e) {
e.preventDefault();
alert("done");
});
});
However, it depends on when this element is loaded. You will need to ensure your button is already in the DOM before this script executes, otherwise this may not be effective.
I am trying to make a webpage that has 2 buttons performing different actions. WHen i click on one button, it is performing both the functions but i want it to perform just one function.
TASK 3.1: 200x200 green box div:
<button>Remove</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").remove();
});
});
<br/>
</script>
<button>Animate</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ left:'300px' });
});
});
</script>
<div style="
width: 200px;
height: 200px;
padding: 25px;
border: 25px solid green;
margin: 25px;
position: absolute;">
</div>
The selector "button" matches every button in the document at that time. When a selector matches multiple elements, the $.fn.click method actually loops over that resulting collection and binds to each and every element matched.
If you'd like to match only particular elements, you'll need to distinguish them from other matched elements. One of the most common ways to do this if by giving them a unique ID:
<button id="remove">Remove</button>
<button id="animate">Animate</button>
And then target those specifically from your scripting:
$("#remove").click(function remove () {
$("div").remove(); // This removes every div from the document
});
$("#animate").click(function animate () {
$("div").animate({ left: 300 }); // Animates the left property of every div
});
You need to assign a different id or class to each button. You can also condense both scripts into one. Also, seems that instead of using a div selector, you should also assign a specific id or class to the divs.
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("div").remove();
});
$("#button2").click(function(){
$("div").animate({
left:'300px'
});
});
});
</script>
<button id="bremove"> Remove</button>
<script>
$(document).ready(function(){
$("button#bremove").click(function(){
$("div").remove();
});
});
<br/>
</script>
<button id="banimate"> Animate</button>
<script>
$(document).ready(function(){
$("button#banimate").click(function(){
$("div").animate({
left:'300px'
});
});
});
</script>
http://www.frostjedi.com/terra/scripts/demo/jquery01.html
Clicking the button on that page should unhide the "hello, world!" div tag shouldn't it? When I click it I get a $("#demo").style is undefined error.
$("#button").click(function () {
$("#div").hide();
});
$("#button").click(function () {
$("#div").show(2000);
});
Try this , the simplest one ..
<input type="button" onclick="$('#demo').toggle()" value="clicking me should unhide a div tag">
You should use
$('#demo').show(); // to display
or
$('#demo').hide(); // to hide the div
try .show()
$("#demo").show()
You cannot access properties of jQuery objects by . (dot) (They are not javascript objects)
You this,
$('#demo').css({'display':'none'})
Or you can use $('#demo').hide(); (Its a shortcut)
jQuery.hide() is very slow.
Use the following instead:
document.getElementById('demo').style.display = 'none'
This is where you heard of the style property. This property works on DOM objects. jQuery objects are not DOM objects.
Use the hide() method
$("#demo").hide()
or
$("#demo").hide()
or even the toggle() method to toggle visibility:
$("#demo").toggle()
Integrated in your example:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div>
<input type="button" onclick="javascript:$('#demo').show();" value="clicking me should unhide a div tag">
</div>
<div id="demo" style="display: none">hello, world!</div>
</body>
</html>
Example from jQuery documentation:
<h1 class="firstHeading" style="display: block;">Tutorials:Basic Show and Hide</h1>
<div class="examples">
<input id="hideh1" type="submit" value="Hide site tile" name="hideh1">
<input id="showh1" type="submit" value="Show site title" name="showh1">
<input id="toggleh1" type="submit" value="Toggle site title" name="toggleh1">
</div>
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.showhide,h1').hide();
});
$('#showh1').click(function () {
$('div.showhide,h1').show();
});
$('#toggleh1').click(function () {
$('div.showhide,h1').toggle();
});
});
});
</script>
$("#demo").style is not a jQuery function
You should either use $("#demo").css("display","block") property or use show() or toggle() functions
Do
$(document).ready(function() {
$("input[type='button']").click(function() {
$("#demo").show();
});
});
or
document.getElementById("demo").style.display = "block";