Checking for a class dynamically added from an iFrame - javascript

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

Related

How to trigger my javascript pop up form with WordPress navigation link?

I've created a javascript pop up contact form, how do I trigger this after clicking a WordPress navigation item?
I have already tried the following code which works fine. However, after 1 second it loads the page which I've set the nav item to in WordPress.
document.getElementById('menu-item-177').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
$('body').css('overflow','hidden')
});
I tried deleting the page, but obviously the nav link disappears. I also tried removing the menu item in the Menu settings of WordPress, same outcome.
I somehow need to block the page loading when the nav link is clicked. Is there a way round this?
Make sure that you are selecting the <a href=".. anchor element and listen for the click on that. I see that you have jQuery loaded in, so it might be good to just use that, or don't use it at all.
In your click event listener you listen for a click to happen. Whenever this click happens the function in the listener will be called. This function exposes some information about the event in the Event object. You'll see this in other pieces of code named e, evt, event or something else to refer to this Event object.
The Event object has a method called Event.preventDefault() which stops the browser from executing any kind of behavior that is linked to that element. Like navigating with an <a> tag. See why it is important to know what element you are clicking on? By adding that you can add your own behavior. See the example below.
$('#menu-item-177 > a').on('click', function(event) {
event.preventDefault(); // Prevents default navigation behavior.
$('.bg-modal').css('display', 'flex');
$('body').css('overflow', 'hidden');
});

Assign event to button from external library

Every time I press a button, there is a random chance that a alertify alert window popups. The alertify alert popup is something I use instead of javascript Alert, just to get a nicer design.
Alertify library
And here is a screenshot of the current situation:
I want to assign a event to the OK button. When I use the "inspect element" function in google chrome, I see that this green OK button has an id called "alertify-ok", so I want to assign an event when this button is pressed.
I've tried to add this part to my HTML document in the script part:
$( "#alertify-ok" ).on( "click",function() {alert("finally");});
But nothing happens. The reason why I need this to work, is that the youtube popupmodal should come up right after I've pressed the OK button. I belive the error comes because the alertify window with HTML is from an external library, so how can i do this?
Alerts and the others take callback functions on creation, https://github.com/alertifyjs/alertify.js/blob/0.3.12/src/js/alertify.js#L608. You don't need to attach another event listener, just give it the function you want it to execute. example below:
alertify.alert("alerttext", function(e) {
functionIWantToCall();
});
You can put the event on an element you know is already existent (like "body") and specify it to trigger only when the wanted element is clicked:
$(" body").on({
click: function () {...
}
}, "#trigger");

Hiding elements within on()

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/

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.

JQuery if statement for .is(':visible') not working

I have a div that when the page is loaded is set to display:none;. I can open it up using this simple code:
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").css({'display':'block'});
});
Once it's opened, I'd like the user to be able to close it so I tried using the .is(':visible') function and then wrapping my original code in an if statment but this time using display:none;
if($('.field-group-format-wrapper').is(':visible')){
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").css({'display':'none'});
});
}
This does not seem to work though and I am not getting any syntax errors that I know of.
I also tried this:
if ($('.field-group-format-wrapper').is(':visible'))
$(".field-group-format-toggler").click(function () {
$(".field-group-format-wrapper").css({'display':'none'});
});
... but that did not work either.
You can just use the toggle function:
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").toggle();
});
This will show the '.field-group-format-wrapper' elements if they are currently hidden and hide them if they're currently visible.
FYI the reason your code snippet in your question wasn't working is because you're only checking the visibility of the elements on dom ready, rather than on each click - so the event handler to show the elements will never be attached.
I guess your function is only being called on page load at which time all divs are hidden.
Why not check the visibility in the click event handler?
$('.field-group-format-toggler').click(function(){
var $wrapper = $('.field-group-format-wrapper'); //Maybe $(this).parent()?
if($wrapper.is(':visible'))
$wrapper.hide();
else
$wrapper.show();
As already mentioned, you can use the toggle function to achieve what you want.
To add a bit of extra information, when attaching events like you're doing, you're actually using a subscription model.
Registering an event puts it in a queue of events subscribed to that handler. In this case, when you add the second event to change the CSS, you're adding an event, not overwriting the first one.
Whilst thing isn't actually causing your problem, it's worth being aware of.

Categories

Resources