Here is the template whose DOM elements I am trying to control:
<template name='libraryTemplate'>
<div class="container-fluid library_container">
<div class="row">
<div class="col-sm-6">
<h1 id='maglens_library_header'>MY LIBRARY</h1>
<div id='library_page_break'></div>
<div id='folders_text'>
Folders:
</div>
</div>
<div class="col-sm-6">
<a class='button-text btn' id='add_new_button'>ADD NEW</a>
</div>
</div>
<div class="row">
<div class="col-sm-3 folders" id='google_drive_thumbnail'></div>
</div>
</div>
</template>
And here is the jQuery Im using to do so. My $('body') selector works fine, and my log statement just inside $(document).ready() behaves correctly, but why can't I target the selector $('.folders')? Upon inspection of the DOM, I can see exactly where the code is, but it's like jQuery thinks it doesnt exist?
$(document).ready(function(){
console.log('document ready');
$('.folders').on('click', function(){
console.log('folders clicked');
})
// $('body').on('click', function(){
// console.log('body clicked');
// })
});
I don't see any selectors named folders.
I do see <div id='folders_text'>.
That's why your body event fires but your other one doesn't.
Secondly, you should be using template events, you're working with Meteor now.
Template.libraryTemplate.events({
'click .folders': function() { console.log('clicked') }
})
I'd definitely recommend using the meteor events as everyone else suggested.
What you had actually works, it is just since the div with the "folders" class has no content, the div is very small (unless you have a height attribute on ".folders" or "#google_drive_thumbnail") and thus very hard to click on. Inspect element on the div and you'll see the size
Related
Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/
The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.
I have a form that I am controlling visually with jQuery. I am using removeClass to remove a few classes on the first part of the form, which works fine. However when the button is clicked to go to the second part of the form, the form is not responding to the removeClass and I can't figure out why this is happening. I have tried adding an event (below) to see if I am able to target the class/id within the div, but no luck either. Any suggestions would be greatly appreciated.
$(document).ready(function(){
$('input#createMember').click(function(){
$.find('account-edit-engagement-block').removeClass('col-md-6');
});
});
Ok Here is the code for the form. I am trying to remove the classes associated to this segment ""
<div class="form-container promo-carousel-lp__form">
<h4>Get $150 for signing up</h4>
<div class="account-edit-engagement-block"><script
src="/bundles/ActivationFormBlock?
v=FmZitrV3y_UtI4ysqjWZ2dKUPIGjPegx-dWRIDqgcrI1"></script>
<div id="activateAccount">
<div class="">
<div id="activationview"></div>
<div id="editview">
<script src="/bundles/AccountEdit?
v=V6iouLyL7iEfMRGYC4DTKQc8Yv95VNfdF_08-ZAgeRU1"></script>
<div id="editAccount">
<div class="row">
<div class="col-md-offset-3 col-md-6 col-xs-12">
<form action="/api/UserApi/EditUserAsync"
EDIT Try this again, iterate:
$(document).ready(function(){
$('input#createMember').click(function(){
$('.account-edit-engagement-block').each(function(ix,ex){
$(ex).find('.col-md-6').removeClass('col-md-6');
});
});
});
Fiddle HERE: https://jsfiddle.net/u5bLfrks/1/
I'm running an asynchronous 3rd party script that loads an image gallery into my page, but unfortunately their code doesn't provide me with a callback after their image gallery has finished loading.
The modal starts off like this:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
</div>
</div>
After the gallery is loaded, the modal looks like this:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<div id="ze_galleria">
//gallery stuff
</div>
</div>
</div>
So I need some way to display a loading animation until #ze_galleria appears. The loading animation function I can do myself, but is there something in jQuery that will listen for when a certain DOM element is created? Once the DOM element appears, it'll run the callback to remove the animation.
Based on how that script adds the gallery/gallery items you could use the DOMSubtreeModified event and then check if that particular item were added
document.addEventListener("DOMSubtreeModified", function(e) {
if (document.querySelector("#ze_galleria")) {
// exists
}
});
Here is a DOM tree event list, where you can check other possible events that might could be used.
https://developer.mozilla.org/en-US/docs/Web/Events
Update
Make sure you take a look at the MutationObserver as well, as it has very good browser support nowadays.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Also, you can set an interval:
var cincopa = $('#cincopa');
var counter = 0;
var intervalCode = setInterval(function(){
if (cincopa.find('#ze_galleria').length){
clearInterval(intervalCode);
yourCallback();
}
counter++;
console.log(counter + ' seconds past till the event loaded.');
}, 1000);
I think the code is intuitive, but if there is any doubt, just ask :)
Presuming that your "3rd party library" is going to totally overwrite the contents of what ever you point it at (as your example code suggests it does). You can solve your problem simply by adding an img:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<img src="loading.gif"/>
</div>
</div>
When the library has done what it needs to do it will overwrite the contents of the div <div class="container-fluid" id="cincopa"> resulting in:
<div class="modal-body">
<div class="container-fluid" id="cincopa">
<div id="ze_galleria">
//gallery stuff
</div>
</div>
</div>
thus removing your loading image.
I have the following HTML code, and i am currently trying to add the 'selected' class when a photo is clicked, and to remove the class when it is clicked again.
<div id="container">
<h1>Photo Gallery</h1>
<div id="gallery">
<div class="photo">
<img src="photos/skyemonroe.jpg">
<div class="details">
<div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
<div class="date">12/24/2000</div>
<div class="photographer">Alasdair Dougall</div>
</div>
</div>
//Repetitions of the photo class.....
</div>
<a id="more-photos" href="pages/1.html">More Photos</a>
</div>
I am currently using the following jquery code to bind an event handler to the photo's ancestor so that when more pictures are appended to the page when clicking the more photos button, the jquery code will still work with these newly added pictures.
jQuery
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
The jQuery code above DOES NOT work when i try using the #gallery, NOR does it work when i try using #container.However, the code works when i use $(document) for the event delegation.
I can't seem to figure out why binding the event handlers to the parent elements do not work, but binding it to the document itself makes it work.
Would appreciate any insights into the matter
EDIT: Added the jsfiddle here http://jsfiddle.net/744cX/ ( The code works in the fiddle, but does nothing on my laptop, and i can't seem to figure out why)
You can listen event on '.photo' class
<div class="photo" onclick="$(this).toggleClass('selected');">
I forked your fiddle and as can be seen here:
http://jsfiddle.net/6Qz8C/1/
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
I did:
when the nextpage event is fired, append a new photo.
add the event delegation when the document is ready.
set the delegator to the #gallery
I've done some research and nothing seems to be working. Here is the HTML followed by the JavaScript I am putting together. What I am trying to do is set it up so that whenever dashboard_gear_options is clicked, it toggles the appropriate hidden options row. Each block of code exists multiple times at different locations on the page. I tried using this, find, parent, next and children to no avail.
HTML:
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block
// start block
<div class="content_block_holder">
<div class="content_top">
<div class="dashboard_gear_options"></div>
<div class="dashboard_gear_divider"></div>
</div>
<div class="dashboard_holder">
<div class="hidden_options_row"></div>
</div>
</div>
// end block (etc..)
JS:
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).parent('.content_block_holder').find('.hidden_options_row').toggle();
});
});
Try using closest([selector]) ( http://api.jquery.com/closest/ ) instead of parent in your selector. It will traverse up the tree and find "content_block_holder". parent([selector]) will just check the immediate parent and return an empty set if it doesn't match the selector provided.
$(document).ready(function(){
$('.dashboard_gear_options').click(function(){
$(this).closest('.content_block_holder').find('.hidden_options_row').toggle();
});
});
JSFiddle based on your code: http://jsfiddle.net/gK7yM/
try this
$(this).closest('.content_block_holder').find('.dashboard_holder').find('.hidden_options_row').toggle();
Also this chain works:
$(this).parent().next('.dashboard_holder').children('.hidden_options_row').toggle();
or
$(this).parent().next('.dashboard_holder').find('.hidden_options_row').toggle();