I'm trying to display a message that the user has clicked Delete button when he/she clicks on it. This is what I'm doing:
<script>
$('#button_del').on('click',function(e){
alertify.error('You have clicked on Delete!');
});
</script>
But no message appears when I click on the button. What am I doing wrong?
There are only four possibilities here:
You don't load your libraries correctly: jQuery and alertify.
There is no element with the button_del ID, or there are markup errors involving it.
You're not actually clicking #button_del.
4. the most likely one:
You need to attach the click handler when the document is loaded, otherwise #button_del is probably not available/loaded yet!
$(document).ready(function() {
$('#button_del').on('click',function(e){
alertify.error('You have clicked on Delete!');
});
});
Even if the first three conditions are met, you'd still have to change this.
Related
I have a modal and after pressing the password update button, the modal should close and an alert box should appear on my homepage. however, the alert box will not appear when the page is first opened. how can I do it? Do you have any examples you can share?
If you are using the alerts provided by the browser, you have to add a EventListener to your button like:
yourCloseButton.addEventListener("click", () => {
alert("The modal has been closed!");
});
Complementing Apollo79's answer, you can also use an inline event listener, but this is no longer recommended. There are some specific cases for this, but if you really don't need one, use Apollo79's answer instead.
<button id="urButton" onclick="alertAndDisappear()">
or
yourCloseButton.onclick = function(){}
which is equivalent to the first one.
Again, only use these if you really need them
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 */
});
I have a div inside my html with the id pageContent. When users click various buttons, it will load the appropriate content. When a user clicks the javaQuestions button it loads, javaQuestions.html into the div just fine. However, inside, the javaQuestions.html, I have a collapsible list, and I can't figure out a way to "bind" the li collapse/uncollapse without having the user to click TWICE. Right now what I have is:
$("#pageContent").on('click', 'li', function (){
$('.collapsible').collapsible();
});
So I guess what happens is, first the user clicks on the button, and it loads content. Then, the user clicks on any li, and it enables the "collapsible()" function, but does not uncollapse/collapse the content. Only when the user clicks a second time does it works fine. I tried adding the line $('.collapsible').collapsible(); into the event that loads the javaQuestions.html content, but it doesn't do anything. Kind of at a roadblock, any ideas?
EDIT: Here is the code that loads the content:
$("#pageContent").on('click', '#javaQuestions', function (e) {
fadeIn("#pageContent", "../java-questions/javaQuestions.html", 50);
fadeIn("#commentsContent", "../comments/comment-section.html", 500);
});
I also really want to know how this will function once I figure it out. But as you can see, the above function loads the javaquestions.html, and I can't seem to find a way to ALSO bind 'li' to be collapsible in one swoop.
Have you tried using jQuery bind method? You can bind your handler to, say, body and then you don't have to care about loading and attaching a handler after it.
Update: may be this will help:
$(document).ready(function() {
$("body").on('click', '#pageContent li', function (){
$('.collapsible').collapsible();
});
});
Use this DOCUMENT because it is dynamically loaded
$(document).on("click","li #pageContent",function(){
$('.collapsible').collapsible();
});
I'm using the bootstrap editor jquery plugin. I'm trying to set an event listener to the add hyperlink button, but it only gets triggered when the text input next to it is empty, otherwise it does not fire. Here's my jsfiddle. My code:
$('.dropdown-menu button').on('click', function () {
alert("ADD clicked");
});
To test the jsfiddle, simple select some text and press add without inputting a URL.
Then, select the text again, input a URL and press add, no alert() will be shown.
Any ideas why this is happening?
Something in this line is changing the behaviour for a reason I can't see right now:
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
If you remove it, seems work, so, something in dropdown (i guess) is doing something wrong for you
I have the following code:
$( "#check-button" ).on( "click", function() {
$("#button_cart").click();
$('.checkout-button').click();
});
I have this jQuery click event. What I want to do is, on clicking the check-button, the first line inside the function is updating the cart (which reloads the page) and then the second line inside the function is the checkout button, which takes me to the next (checkout) page.
But here only the first event is firing. Is this because the page is reloaded on "button-cart" clicking? How do I solve it?
That's correct. The second click actually could be working but in some kind of limbo between the click and the load and you wont see it.
The solution is to "handle" the reload event, I put it between "" because this event can't be handled ( as far as I know) but you can make some hacks.
First, why is reloading the page? Are you adding new content?
In this case just call the click in the content added with a load handler like $(document).ready();
Here is how i did it: Using localstorage.
Just saved the value of someVariable on check-button click ( along with button-cart click) and on page reload i checked if the value is set. If it is set, i unset it and clicked the next button.
Here is the link
This was really great help from SO. Thank u SO