Hiding elements within on() - javascript

I am trying to make it so when my "cancel deletion" link is clicked, the links that are confirming whether to delete or not disappear and the original delete button reappears. In essence I am trying to make a confirmation window, but have it occur inside the current document rather than as a popup box.
All my code works except for this bit:
$(document).on("click",".delete_button",function(){
$(".delete_button").hide();
$(".confirm_links").show();
return false;
});
When I click the delete_button link, the confirm_links is shown but delete_button fails to hide. I think delete_button is not hiding because I am passing it as a parameter in .on() and then trying to modify it within the handler I am passing. I think that I need some special syntax to reference, maybe something akin to self, but I am unsure where to go from here. Any advice greatly appreciated. Kthnx
JSfiddle: http://jsfiddle.net/Vvckp/1/

Related

Checking for a class dynamically added from an iFrame

A bit of a weird situation here. I know this is far from the ideal setup, but this is what I am stuck working with, without much leniency to approach it a different way.
Basically, I have a modal window, which has an email signup form embedded via iframe.
I have a script inside of the iframe that sets a class to the main modal when the submit button is pressed. To set the class on the modal, I am using the following:
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
}
I have verified that this code works fine. In inspector, whenever I press the submit button, I see the "submitted" class gets added to the modal.
However... outside of the iframe, I have another script running, that checks when the users presses the close button on the modal.
I want it so that if the modal has the class of "submitted", it does one thing - but if it doesn't have that class, it does something else.
So I have the following:
$(".close-exit-modal").on("click", function(e) {
if ($("#modal-popup").hasClass("submitted")) {
//do something
} else {
//do something else
}
});
Unfortunately, every single time I try the script, the "do something else" runs. The modal clearly shows that it has the proper class - and for the life of me, I can't figure out why this script wont recognize it.
Any ideas what's going on here?
Since you appear to have the ability to change the parent, that to me signifies that you are on the same domain. So potentially you could do some different things.
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
//directly call a method in the parent to let it know the class changed
window.parent.modalPopupWasSubmitted();
});
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
//trigger a custom event that your parent page can have an event listener for
$(window.parent).trigger('modalWasSubmitted');
});
Optionally, depending on the browser support you need, you could also potentially use a postMessage to let the parent know that something happened. Ref. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

How do you think about respective callback for bootstrap modal triggers?

On bootstrap modals, we know that we can bind events for triggers like show or hide using show, shown, hide, hidden, but this event binding only works for general case. What I want is 'specific case' such as:
$("#myModal").modal("show", function(e){
alert("This pops-up after #myModal is shown properly.");
});
or maybe using dictionaries for more options.
Anyway, I want to call some functions as callback after these modal triggers are done.
I do know that there can be alternative implementations, like using setTimeout to wait until the modal is completely shown or hidden, or just unbind the event inside the callback function so the event handler works only for once. Either way, it's not very convenient and ugly.
Can this feature be feasible feature request for bootstrap?
Also, I'm not very satisfied that to change modal's property after its init, I have to change it by directly managing $("#myModal").data("bs.modal").options.
Again, I'm asking about particular situation. I don't want to make callback function called for every show, shown, hide or what ever. Just for specific situation where the modal is triggered manually via javascript.
Here is an example:
Let's say that there are #myModal, and #btn-a, #btn-b.
$(document).ready(function(){
$("#myModal").on("shown.bs.modal", function(e){
console.log("myModal shown.");
})
$("#btn-a").click(function(e){
$("#myModal").modal("show");
});
$("#btn-b").click(function(e){
// There is no such thing like below. It's just pseudo code.
$("#myModal").modal("show", function(e2){
console("myModal shown by b.");
});
});
}
Then if #btn-a is clicked,
myModal shown.
will appear while if #btn-a is clicked,
myModal shown.
myModal shown by b.
will appear.
Again and again, I'm actually not asking how to make it. I already made what I want. What I'm asking is, will this feature be feasible feature request for bootstrap.
Check out the section titled Events here:
http://getbootstrap.com/javascript/#modals
Hopefully, it will give you all the information you need
You can use shown events to detect when the modal has been made visible on the screen:
$('#myModal').on('shown.bs.modal', function (e) {
alert("This pops-up after #myModal is shown properly.");
})
You can check for more information in the events section of modal here.

how to bind click trigger, only to clicked element?

I have some elements having fbutton class. How can I bind a click element only to clicked element. I have a code like this:
$('.fbutton').click(function() {
/*
Some Code 1
*/
$(this).next().click();
/*
Some Code 2
*/
enough;
});
$(this).next().click(); line triggers a click on an element, but also all other fbutton elements are triggered too (this part bothers me).
First solution that comes to mind is that end script processing after Some Code 2. As return; does not work, I used an illegal javascript code that results abnormal end of execution of code. It works, but it is not the correct way of ending execution. How can I end javascript execution or How can I trigger an event only for clicked element.
More Clarification
I want only clicked .fbutton to trigger. So does jquery identify clicked element? Also I can not define any class for any .fbutton element, because trigger should depend on user click.
Have you tried using stopPropagation?
$('.fbutton').on('click',function(e){
e.stopPropagation();
$(this).next().trigger('click');
});
onclick give it a class, and bind the click triggering to it.
$('.fbutton').on('click',function() {
// Code 1
$(this).hasClass('clicked')) ? $(this).next().trigger('click') : $(this).addClass('clicked');
// Code 2
});
Also, using jQuery vs $? I kept it consistent for you, but if you can use $ I recommend it.
EDIT
To clarify my answer:
This is a ternary if statement. It checks to see if the item clicked has a class of clicked, and if it does, then it assigns the click you want to $(this).next(), but if it doesn't have the class already it adds the class (without binding the click statement yet). When the element is clicked again, it will have class clicked, so it should fire then.
This allows you to only have the click event binded to elements that have already been clicked.
SECOND EDIT
Here is a jsFiddle to show it works.
Click example once and nothing will happen but adding the class, click it again and it will trigger the click of the next button, but not anything else. The same is true for the second button, so that you can see they are separate events for each pairing, unrelated to any other button pairs.

Unwanted recursion - how to avoid child click event from passing to parent in jquery?

I have a some elements, roughly like this:
<div>
<a>
<div>
When a user clicks anywhere on the div, I want the a element to be clicked - for usability purposes.
Simple right? So I wrote this:
$('div.class').click(function(){
$('a.class', this).click();
console.log('clicked');
});
Trouble is, this clicks the a element alright, but the event propagates to the div, which clicks it, which clicks the a, which... well you can see where it's going.
I cooked up a sample on JSfiddle here
but it doesn't show the console log. So if you click, Firebug doesn't show anything. but my local site sets Firebug crazy with logs (clicked) so much that in the end script gets killed saying too much recursion on this page
How do I stop this recursion?
Yes I know, I know that I can use window.location for this purpose, but clicking the link does some extra work and also uses window history for browsers, so I really want to click that vicious a without making it click its Dad. Or Mom. Or whatever that div is.
PLEASE READ
Since everyone is suggesting the same thing over and over again, and it's not working, please take a look this JSfiddle. Try it and see if it works before you answer. When you click on a div, Google should load up. That's what I'm looking for.
If this is is your markup:
<div>
<a></a>
</div>
...all you will need to do is in your css do something like:
div a { display: block};
The anchor element will then stretch and occupy all the available space in the parent div. However, if some other elements exist within that div, you could do:
$('a.class').click(function(event){
event.stopPropagation();
alert('you clicked on me');
});
$('div.class').click( function () {
$(this).children('a.class').trigger('click');
});
Use the event.stopPropagation() method.
How about this?
$('selector').attr('onclick')()
Instead of using the click event on the child node, just set the browser location to the href value
$('div.class').click(function(){
location = $(this).find('a').attr('href');
});
$('div.class').click(function(event){
event.stopPropagation();
$('a.class', this).click();
console.log('clicked');
});
You need to add the event argument and a stopPropagation method to the handler.

Locating an element in a 'Facebox' box

Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.

Categories

Resources