Possible bug in fullcalendar's eventClick? - javascript

Here is the code snippet in question:
eventClick: function(calEvent) {
if(user != calEvent.modified_by && calEvent.modified_by != 0){
$('.antoconfirm').css("display", "inline-block");
}
$('#fc_edit').click();
$('#title2').val(calEvent.title);
//-----------Submit button click-------------------
$(".antosubmit2").on("click", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
calEvent.title = $("#title2").val();
calEvent.confirm = 0;
calEvent.backgroundColor = '#ddbd39';
dbTitle = calEvent.title;
//ajax goes here, works fine
calendar.fullCalendar('updateEvent', calEvent);
$(".antosubmit2").off("click");
$('.antoclose2').click();
});
//---------------------------------------------------
//-----------Close button click-------------------
$(".antoclose2").on("click", function() {
console.log(calEvent.title);
$(".antoclose2").off("click");
});
//---------------------------------------------------
return false;
},
$('#fc_edit').click(); calls the modal in which the editing is done. There are two buttons with the classes "antosubmit2" and "antoclose2". You click on an event, the modal comes up, you change the title, click submit, the modal goes away and voila, the title is changed(from "new1" to "new3" in this example):Test events, title change
When ONLY the submit button is used, everything works fine, you can change one event after the other without incident. On the other hand, when you use the close button on one event and try to change the title on another, the first event will be changed:Test events, title change after close
Now at the "ajax goes here, works fine" part is an ajax POST, that sends the correct data despite what the calendar shows and after a page reload everything is edited the way it should be.
Is this a bug with fullcalendar's event rendering or does my code fail somewhere?

I think you need to run .off against all your button click handlers whenever any of your buttons is used. At the moment you only remove the handler for the button that was actually clicked. If you don't remove them, those handlers will remain and get used again if the other button is clicked in future. This is exactly the scenario you have run into.
In the case you described, I suspect because when you closed the first event, you didn't remove the "click" handler related to the "submit" button that went with that event. Then, when you changed the title of the second event, it ran the "click" handler for both events, because you never removed the first handler. Hence why the title for the first event gets changed when it shouldn't.

Related

Stop Woocommerce redirect if apply discount button on checkout clicked with jquery

To explain the scenario, When I manually/in person click "apply discount" button on the checkout page it applies the discount and stays on the checkout page. But if I click "apply discount" button with jquery on the checkout page ,it applies the discount but it redirects me to the cart page if clicked with jquery. How can I click the button on checkout page with jquery and not get redirected to another page?
jquery I am using to click button :
if (location.search === '?477236546456456465465') {
jQuery(".wc_points_rewards_apply_discount").click()
}
})
First, you are missing a ; (semicolon) after the click() method. This may throw an error. I am not entirely sure if you are looking for something to simulate a click (a user does not actually click on the button) or use an event listener to wait for a click on the button, I'll go with the first from how your code looks.
As far as I know, jQuery's .click() method is a shortcut for the method .on('click', handler) - which is essentially an event listener that is waiting for a physical click on an element.
According to jQuery's .click() documentation here, "The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released."
With all of that being said, here is some code that may work using a jQuery method preventDefault(). This will prevent the default action of the clicking the element from occurring. However, the click() method will not simulate a click. Good Luck!
jQuery(document).ready(function() {
if (location.search === '?477236546456456465465') {
jQuery(".wc_points_rewards_apply_discount").click(function(e) {
e.preventDefault();
//do some cool stuff
});
}
});
Edit: My original answer will wait until all DOM content has loaded. However,
to wait until all Window content has loaded (included images, etc.), you can try putting your code in the following:
jQuery(window).on('load', function() {
//do stuff after the window has fully loaded
});
In order to wait until all ajax processes have stopped, you can try adding code to the following:
jQuery(document).ajaxStop(function() {
/*do stuff after all ajax has stopped. This will be called even if
an ajax event occurs after the page loaded */
});

Code inside eventListener isn't called immediately?

I am trying to understand this code but it is not making any sense.
When #open_help button is clicked he is calling the handleOpen() which calls showHelp(), which calls jQuery function to show the help div, but if you see below that he is adding and removing an event listener and he also calls hideHelp(). Why is he doing that?
Is he just doing that to encapsulate hideHelp so it would wait for the button to be clicked?
// listen to "help" button
$('#open_help').bind("click",handleOpenHelp);
function handleOpenHelp(evt) {
if (!$("#help").is(":visible")) {
evt.preventDefault();
evt.stopPropagation();
showHelp();
}
}
function showHelp() {
$("#help").show();
document.addEventListener("click",function __handler__(evt){
evt.preventDefault();
evt.stopPropagation();
evt.stopImmediatePropagation();
document.removeEventListener("click",__handler__,true);
hideHelp();
},true);
}
function hideHelp() {
$("#help").hide();
}
Let's simplify the code to the bare minimum and re-arrange it a bit to see what's going on:
$("#help").show(); // Show the help dialog
// If user clicks ANYWHERE (the whole document)
document.addEventListener("click",function __handler__(evt){
hideHelp(); // Hide the help dialog
// Remove myself from the event listener so that this function
// will not be called again when user clicks anywhere:
document.removeEventListener("click",__handler__,true);
},true);
So basically it's grabbing all click events anywhere on anything (button, text, link, blank space.. literally anywhere) and execute a function to hide the help dialog. After doing that (before in the original code) it removes itself from the click event handler so that other things on the page can get clicks again.
If you'll notice hide help is basically part of "Click" event listener that is being appended onto the document element after a person clicks help. this means once the help info is shown, all you have to do is click anywhere on the page and what was shown will once again be hidden.
stoppropigation and stopImmediatePropogation are just insurance that nothing else will happen accept what he wants. It stops all eventhandlers and parent eventhandlers in their tracks.
He then removes the "Click" event listener that was added when the show event was fired. It will be added again once help is clicked.
then finally he hides the help element and waits for help to be clicked again.
Hope this answers your question.

Focusing a Bootstrap button for keyboard enter

I have a Bootstrap 3.0 button on a web page. The button is not part of a form. When this page renders, I would like for the button to be clicked if the user hits return on the keyboard. I have a Marionette event listener set up to handle the click event.
Here is my button:
<button class="btn btn-primary js-new pull-right">New facility</button>
How do I do this?
I have tried several things - including what I thought was the obvious solution: executing $(".js-new").first().focus(). This does not work.
If I understand correctly, you'd like to trigger the click handler for a certain button when "return" is hit. If that's the case, this ought to work; $(".js-new").first().click();, assuming your selector is correct.
You can check whether or not your selector is finding an element by using either alert or console.log to display the length of the selector: console.log($(".js-new").length);.
Once you have verified that you have found the correct element, you can trigger whatever click handler(s) are bound to the element by simply calling the .click() function; if no arguments are passed to it, it executes whatever triggers are already on the element.
--
Edit: if you'd simply like to trigger the click handler when enter is pressed, you could bind an event to the return key:
$(document).keypress(function(e) {
if(e.which === 13) {
// enter has been pressed, execute a click on .js-new:
$(".js-new").first().click();
}
});

alert if nothing happens on click

essentially I am wondering if it is possible to write a function so that if any item inside a specific container is clicked and nothing happens, it will alert that the feature has not been made available yet.
explanation:
what I mean by nothing happens is that the DOM or site does not change. So if a javascript or jquery function is called on click, it would not alert. if the item is a link to another site, it would not alert. but if nothing happens on the click event of an item inside a specified container, then it would alert.
The closest you could come would be to:
bind a click event handler to the container that would check if the event target was a link to another site and, if not, display the alert
make sure you stopPropagation() on all your event handlers.
Like this?
jsFiddle
$('a').on('click', function() {
if ($(this).attr('href') == '#') {
alert('the feature has not been made available yet.');
return false;
} else {
return true;
}
});

Question regarding jQuery click() function

$('document').ready(function(){
$('[name=mycheckbox]').live('click', function(){
if($(this).is(':checked'))
{
alert('it is checked');
}
else
{
alert('it is not checked');
}
});
$('[name=mycheckbox]').click();
});
If the checkbox is checked and you click it, the alert box says, "it is not checked", but when the page runs and the click event is fired (with the checkbox checked), the alert box says, "it is checked". Why? Is the state of the checkbox not effected by the click event? Is it mousedown that changes the state?
Instead of click you should use the change event here, like this:
$('[name=mycheckbox]').live('change', function(){
And invoke it with the same trigger, like this:
$('[name=mycheckbox]').change();
The click is separate from the change, if you want the event to fire when the check actually has finished changing, then you want change, not click. Alternately, if you want to toggle it from it's initial state still, do this:
$('[name=mycheckbox]').click().change();
Instead of the live event (which I've found to be buggy at best) try binding a normal click even instead. I've done something similar which works fine with a .click event not .live("click",
I hope that helps :S
What is happening is quite subtle.
I have a button and checkbox linked to the following code:
$("#chkbx").click(function() {
if ($(this).is(':checked')) {
alert('checked');
}
else {
alert('unchecked');
}
});
$("#MyButton").click(function() {
$("#chkbx").click();
});
When I click on the checkbox, everything is displayed as you would expect.
When I click on the button, the reverse is true.
What is happening, is that when you click on the checkbox, it is firing the default click event before executing your code, and thus you code is taking the status from the aftermath of the default click event.
When you call the click method directly on the element, it is actually calling your click function and then executing the default event.
I'm not why this should be. or if this is intentional, or a bug.

Categories