Develop Reference

jQuery removeClass on iFrame button click

I wrote some code to addClass to elements to open an iFrame imported by Shopify on WordPress and it works.
But now, I want to close the iFrame by removing the class on my website element.
I've tried a lot of things but it dosen't work
Here is my code :
jQuery(document).ready(function( $ ) {
$(document).ready(function() {
$('.cart-button').click(function() {
$('.shopify-buy-cart-wrapper').addClass('is-active is-visible');
$('.shopify-buy-cart-wrapper iframe').addClass('is-block');
return false;
});
//$("iframe").contents().find("button .shopify-buy__btn--close").click(function(){
$('.shopify-buy__btn--close').click(function() {
$('.shopify-buy-cart-wrapper').removeClass('is-active is-visible');
$('.shopify-buy-cart-wrapper iframe').removeClass('is-block');
});
});
});
Open cart is working, but now I want to close the cart

If you want to remove multiple classes with jQuery removeClass() you have to pass them as an array, not as a string.
Also, any event listener should be attached only after the element has been inserted in the DOM. If you define the event listener but the element is created afterwards, it won't work.

javascript events not working with dynamic content added with json

I'm stuck with a situation where my DOM elements are generated dynamically based on $.getJSON and Javascript functions for this elements are not working. I'll post some general idea on my code because I'm looking just an direction of what should I do in this situation.
site.js contains general features like
$(document).ready(function() {
$('.element').on('click', function() {
$(this).toggleClass('active');
});
$(".slider").slider({
// some slider UI code...
});
});
After that:
$.getJSON('json/questions.json', function (data) {
// generating some DOM elements...
});
I have also tried to wrap all site.js content into function refresh_scripts() and call it after $.getJSON() but nothing seems to be working.

Firstly you need to use a delegated event handler to catch events on dynamically appended elements. Then you can call the .slider() method again within the success handler function to instantiate the plugin on the newly appended content. Try this:
$(document).ready(function(){
$('#parentElement').on('click', '.element', function() {
$(this).toggleClass('active');
});
var sliderOptions = { /* slider options here */ };
$(".slider").slider(sliderOptions);
$.getJSON('json/questions.json', function(data) {
// generating some DOM elements...
$('#parentElement .slider').slider(sliderOptions);
});
});

Instead of calling on directly on the element, call it on a parent that isn't dynamically added and then use the optional selector parameter to narrow it to the element.
$('.parent').on('click', '.element', () => {
// do something
});
The difference between this and:
$('.element').on('click', () => {});
is with $('.element').on(), you're only applying the listener to the elements that are currently in that set. If it's added after, it won't be there.
Applying it to $(.parent), that parent is always there, and will then filter it to all of it's children, regardless when they're added.

the easiest way is to add this after you add/generate your DOM
$('script[src="site.js"]').remove();
$('head').append('<script src="site.js"></script>');
of course your js function that generates DOM needs to be on another file than your site.js

jQuery Turnbox.JS - Animate without user interaction

I really like to use KeiichiroHirai's Turnbox.JS script (http://www.noht.co.jp/turnbox),
However, This script seems only to work with a user clicking/hovering on any button this script is appending itself to.
I wish use these animations when DOM is ready,
I tried:
$(function() {
$.turnBoxLink({
box: ".example"
});
});
But since I'm posting here, It's obviously not working.
Thank you in advance!

If you wish to do that when DOM is ready you should wrap your init code into
$(document).ready(function() {
// go when DOM is ready
});
or
$(window).load(function() {
// go when page and images are loaded
});
And also, Turnbox can be initialized like this :
HTML markup
<div class='login_form'>
<h3>My form element<h3>
</div>
With the following code you'll get the extra simple sample, without any options. but for test purposes it could be good to start here :
$(".login_form").turnBox();
If now, you want to launch the animation at specific event (for example to the ready or load event), you'll be able to do so by using :
$(".login_form").turnBoxLink({
box: ,
events: "ready", // you can also try 'load'
dist: "next"
});

After initializing, click the generated .turnBoxButton child element:
$.turnBoxLink({
box: ".example"
});
setInterval(function() {
$(".example .turnBoxButton").click();
}, 1000);
This will spin the box every second.

If You want to programmatically trigger a click event on an element with jQuery You can use the .click() function.
$(document).ready(function() {
$('.sample').turnBox();
...
$('.sample').click();
});

add simple onclick js to rails

I have a simple div in one of my views that I want to click to hide another element on the page. I put this in my application.js But it doesn't do anything. Did I put it in the wrong place?
function toggleNewPostForm {
$('.new-post-btn').hide();
}

Use document ready to make sure document is loaded before selecting an element from HTML and call your function inside
function toggleNewPostForm(){
$('.new-post-btn').hide();
};
$( document ).ready(function() {
toggleNewPostForm();
});

Try something like this
<div class="xyz">Click here!</div>
in javascript
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
Also check if event listener is added after document ready method? i.e
$(function(){
$(".xyz").click(function(){
$('.new-post-btn').hide();
});
});

If this is the only js you have, there will be no click-behaviour. You have to tell the element, that is has to react to a click-event.
Try this in your application.js-file:
function toggleNewPostForm() {
$('.new-post-btn').hide();
}
$(document).on('ready page:load', function(){
$('.new-post-btn').on('click', function(){
toggleNewPostForm();
});
});
P.S.: As RGraham points out, you have to write the parameter-paranthesis if you define a function.
P.P.S.: In ruby on rails, you should check against 'ready' and 'page:load' as document-ready-handlers, because Ruby on Rails uses the "Turbolinks"-library by default.

How can I call a Jquery method on DOM elements that don't exist yet?

I'd like to use this lightbox plugin for some autocomplete links, that don't yet exist on my page.
You normally activate it using:
$(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
Since the a links aren't all on the page upon page load, I would normally look to the .live or .delegate methods to bind to an event, but in this case, what 'event' would I bind to to say "once this element is on the page, then call this method on it".
Or am I going about this totally the wrong way?

There is no such event.
You need to invoke the plugin when you add the elements to the page.
// create a new <a>, append it, and call the plugin against it.
$('<a>',{rel:"facebox"}).appendTo('body').facebox();
This example creates a new <a> element. If you're getting some elements from an AJAX response, call it against those:
var elems = $( response );
elems.filter( 'a[rel="facebox"]' ).facebox(); // if the <a> is at the top level
elems.find( 'a[rel="facebox"]' ).facebox(); // if the <a> is nested
elems.appendTo('body');

Not yet tested :
$(document).ready(function($) {
$(document).bind('change', docChanged) ;
})
function docChanged()
{
if ($('a[rel*=facebox][class!="faceboxed"]').length > 0)
{
$('a[rel*=facebox][class!="faceboxed"]').addClass("faceboxed").facebox();
}
}

This is entirely possible using the .live function. You just need to use the DOMNodeInserted event.
$(document).ready(function() {
$("a[rel*=facebox]").live("DOMNodeInserted", function() {
$(this).facebox();
});
});

You'll need to just add this call to the ajax that loads in the links.