We Keep Coding

jQuery Ajaxstop inside of click event fired multiple times

On the woocommerce cart page I would like to add a notice if you use the quantity plus button and it is reaching the max stock. But I have an auto update on the cart, so I have to wait until the ajax load finishes to show the notice. What I realised using my script that the more you press the button after each ajax call the more times it is fired and the notice will be displayed more and more times. How to handle this? Thank you.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var inputval = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').val();
var inputmax = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').attr('max');
if(inputval==inputmax){
jQuery( document ).ajaxStop( function($) {
alert("TeSZT");
jQuery('.woocommerce-notices-wrapper').html('<div class="woocommerce-info"><div class="woocommerce-info-text">Sajnos ebből a termékből jelenleg nincs több raktáron</div><span class="close-message"></span></div>');
});
}
});

You can try to disable to element to prevent multiple clicks. Enable this once ajaxStop is triggered for future use.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var $this = $(this);
$this.prop( "disabled", true );
...
jQuery( document ).ajaxStop( function() {
$this.prop( "disabled", false );
});
...
})

jQuery Trigger mouseenter on a element without actually real mouse entering element

I have a web page with elements that when mouse hover over element, text appears inside the element.
I want to generate the "Mouse hover"/"mouseenter" to show the text even without the mouse actually hover over the element.
Code for example:
HTML
<div>
<span id="hover_to_show_text">Hover here to show hidden text</span>
<span id="hidden_text" style="display:none">Hidden text</span>
</div>
JS
$( "#hover_to_show_text" ).mouseenter(function() {
$( #hidden_text ).show();
});
$( "#hover_to_show_text" ).mouseleave(function() {
$( #hidden_text ).hide();
});
I want to generate the "mouseenter" that's triggers the "$( "#hover_to_show_text" ).mouseenter(function() {" in jQuery, and leave to "mouseenter" there for a N seconds.
I tried (separately):
$("#hover_to_show_text").hover();
$("#hover_to_show_text").trigger('mouseover');
$("#hover_to_show_text").trigger('mouseenter');
Didn't work. Is there a way to do it?
Thanks.

Should work. The events are triggered almost immediately. So you might not have seen the difference.
Encase the tiggering of mouseleave inside a setTimeout to see the difference.
$( "#hover_to_show_text" ).mouseenter(function() {
$('#hidden_text').show();
});
$( "#hover_to_show_text" ).mouseleave(function() {
$('#hidden_text').hide();
});
$("#hover_to_show_text").trigger('mouseover');
setTimeout(function() {
$("#hover_to_show_text").trigger('mouseleave');
}, 1500);
Check Fiddle
Update
// Just triggering the click event will not work if no
// click handler is provided.
// So create one first
$("#btn").on('click', function () {
// trigger the mouse enter event
$("#hover_to_show_text").trigger('mouseenter');
setTimeout(function () {
$("#hover_to_show_text").trigger('mouseleave');
}, 1500);
});
Update Fiddle

jquery slidetoggle how to set if mouse click other, close slidetoggle

I using jquery slidetoggle to show a DIV
but I need set if mouse click not in div.list go close this slideToggle
$( "#list_button" ).click(function() {
$( ".list" ).slideToggle( "fast" );
});
I only found if mouseout.... I cant find how to set if click any "anywhere on the page" to close this toggle
for testing : http://jsfiddle.net/sdgwbyv8/

$( "body" ).click(function( event ) {
if(
event.target.className!='list' && event.target.parentNode.parentNode.className!="list"
) {
$( ".list" ).slideToggle('fast');
}
});
Demo: http://jsfiddle.net/sdgwbyv8/9/ One possible solution, i guess there are better ones....

You can do it by event.stopPropagation():
$("#list_button").click(function (event) {
if ($(".list").is(":hidden")) {
event.stopPropagation();
$(".list").slideToggle("fast");
}
});
$('body').click(function () {
$(".list").hide();
});
$(".list").click(function (event) {
event.stopPropagation();
});
Working Fiddle

DIV - toggle up

I need help with div' showing up.
I know, that code:
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
will make my leftDiv dissappear (when I click Button), but what should I do to set my div default-hided(toggled down?) so that after I click Button, leftDiv should toggle up (appear)?

If you want the div hidden when the page loads, then .hide() it first:
$('#leftDiv').hide();
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});

If you want the div to be hidden on load, you would do something like:
function load() {
document.getElementById("leftDiv").style.visibility="hidden";
}
<body onload="load"></body>
Would that not work?

var $leftDiv = $('#leftDiv');
var $button = $("#Button");
$leftDiv.hide();
$button.on('click', function() {
$leftDiv.toggle(2000);
});

How do I fire click event if element in array is clicked?

I have an array of DOM elements. If the fourth one is clicked I want to hide the search box. If any of the other ones are clicked I want to show it. How would I do this? I currently have:
var app = {
config: {
tabs: [$("#tab1"), $("#tab2"), $("#tab3"), $("#tab4")],
search: $("#search")
},
showHideSearch: function () {
// Here I need to test if the fourth tab was clicked on then hide();
// else if tabs one through three were clicked show
}
}
app.showHideSearch();
Any help is appreciated. Thank you.

You don't need an array to do this.
$( "#tab4" ).click( function() {
app.config.search.hide();
// $( "#search" ).hide();
});
$( "#tab1, #tab2, #tab3" ).click( function() {
app.config.search.show();
// $( "#search" ).show();
});

$.each(app.config.tabs, function(i, v) {
v.bind('click', function(){
$('#searchbox').show();
if(i==3)
$('#searchbox').hide();
});
});