We Keep Coding

JS and JQuery delay in event

I am trying to make a quantity feild in wordpress (woocommerce)...
It is working, but, i need to fire an event when i Press + or - beside Quantity,
that will "Update cart".
I did it as follows:
<script type="text/javascript">
jQuery('div.woocommerce')
.on('click', 'input.plus', //When I click on "input.plus
function funkca (){ // Run function
jQuery("[name='update_cart']").trigger("click"); //Click a button named update_cart
}
);
</script>
But the "function" (jQuery("[name='update_cart']").trigger("click")) needs to be fired cca. 1000ms after the initial click...
Anyone got any ideas?
Kind regards

Just put a timeout in, as so:
jQuery('div.woocommerce').on('click', 'input.plus', function(){ setTimeout(function (){
jQuery("[name='update_cart']").trigger("click");
}, 1000)});

you can use setTimeOut function like
function funkca (){ // Run function
setTimeout(function(){
jQuery("[name='update_cart']").trigger("click"); //Click a button named update_cart
}, 1000);
});
i hope it might help.

Javascript event triggering creating multiple button .on('click)

I'm using HTML slim for the code below.
.page
.paper
button.button.js-copier I copy things
- content_for :js_includes do
javascript:
var startingHtml = $('.page').html();
function initializePlugin() {
$('.js-copier').each(function () {
$(this).on('click', function () {
$('.page').append(startingHtml);
$(document).trigger('page-refreshed');
});
});
}
// Run it right away
initializePlugin();
$(document).on('page-refreshed', initializePlugin);
Is there a way to fix the fact that when I click on the "I copy things" button, it creates multiple copies of the button as it is iterating over all the button from the button that was selected?
Also, is there a better way to write this code. All I'm trying to do is duplicate the button anytime I click on any buttons(first and any new button created buttons)
-Anthony

First change this:
$('.js-copier').each(function () {
$(this).on('click', function () {
...
to this:
$('.page').on('click', '.js-copier', function () {
...
Read this to understand https://learn.jquery.com/events/event-delegation/#event-propagation
Then remove the 'page-refreshed' event because you don't need it:
$(document).trigger('page-refreshed');
...
$(document).on('page-refreshed', initializePlugin);
Demo solution:
var startingHtml = $('.page').html();
function initializePlugin() {
$('.page').on('click', '.js-copier', function () {
$('.page').append(startingHtml);
});
}
// Run it right away
initializePlugin();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="paper">
<button class="button js-copier"> I copy things</button>
</div>
</div>

Calling Javascript method defined above on page load

I am brand new to JavaScript so bear with me. I have a JavaScript function that is on my page:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
</script>
It works perfectly when I use it as an event:
<input type="button" onclick="popup.show()" value="Edit Theme" style="float: right; margin-right: 7.25em;" />
I want to call it on page load, inside the body tag I have the following code:
<script>
window.onload = popup.show;
</script>
The method does not appear to get called. What am I doing wrong?

Based on the documentation on Sys.Require, it seems that Sys.Require is called on load, which means that based on the ASP.Net page lifetime the script hasn't loaded when the onload event fires.
It looks like you can use Sys.onReady() instead:
Sys.onReady(function(){
popup.show();
})

You should write:
window.onload = popup.show;

window.load document read does not run

I have a simple html5 page that renders a table with several rows. On two of the rows I gave a button that I want to act as a toggle button to show/hide a couple of other rows each.
The table is rendered intitally will all rows then I have a function that hides the 4 columns and sets the buttons to have the correct symbol.
When I run the page all the rows are visible... the window.load function does not run. I even tried document.ready and no joy. The toggle buttons once the inital click hides the rows functions correctly.
My code is...
<script type="text/javascript">
function toggleRetail() {
if ($('#but_RToggle').val()=="+"){
$('#but_RToggle').val("-");
$('#qretail').show("slow");
$('#hretail').show("slow");
} else {
$('#but_RToggle').val("+");
$('#qretail').hide("fast");
$('#hretail').hide("fast");
}
}
function toggleWholesale() {
if ($('#but_WToggle').val() == "+") {
$('#but_WToggle').val("-");
$('#qwholesale').show("slow");
$('#hwholesale').show("slow");
} else {
$('#but_WToggle').val("+");
$('#qwholesale').hide("fast");
$('#hwholesale').hide("fast");
}
}
$(window).bind("load", function () {
$('#but_RToggle').val("+");
$('#qretail').hide();
$('#hretail').hide();
$('#but_WToggle').val("+");
$('#qwholesale').hide();
$('#hwholesale').hide();
});
</script>
Any help appreciated.

Make sure that the jquery script tag is before this script block.
For loading, any of these:
$(document).ready(function(){
//code
});
$(function(){
//code
});
window.addEventListener('load', function(){
//code
},false);

How to execute .click() code when previous click binding finishes

I am trying to use a Twitter Bootstrap button group with data-toggle="buttons-radio" in my site. Bootstrap markup as follows.
<div class="btn-group program-status" data-toggle="buttons-radio">
<button class="btn">All</button>
<button class="btn">Active</button>
<button class="btn">Planning</button>
<button class="btn">End of Life</button>
<button class="btn">Cancelled</button>
</div>
I need to redirect to the same page with query depending on the pressed button. I tried to use following jQuery code to achieve this.
<script>
var sParamStr = '';
function addToParamStr(str) {
sParamStr += str;
}
function redirectToUpdatedLocation() {
$('.program-status > .btn.active').each(function () {
addToParamStr( '?status=' + $(this).text());
});
console.log(sParamStr);
window.location.href = "program" + sParamStr;
}
$document.ready(function () {
$('.program-status > .btn').on('click', function (e) {
redirectToUpdatedLocation();
});
});
</script>
But the browser always redirects to {site}/program without the query string. By commenting out window.location.href = "program" + sParamStr; line, I managed to observe that second click onwards, sParamStr getting appended properly.
It seems that, my code tries to read the text of the pressed button before, .button('toggle') method form bootstrap.js finished. Code worked as intended when I changed function as follows.
$document.ready(function () {
$( '.program-status > .btn').on('click', function (e) {
$(this).addClass('active');
redirectToUpdatedLocation();
});
});
While this method works for me right now, I would like to know the proper way to achieve this. i.e How to execute my code after previous click binding finishes?
UPDATE:
I found this link in the Twitter Bootstrap forum. Seems it is a known issue.
https://github.com/twitter/bootstrap/issues/2380

I'm not sure what Bootstrap's .toggle is doing exactly, but it seems like it does some sort of animation that completes with the setting of the active class. You can try enqueing your code instead:
$( '.program-status > .btn').on('click', function (e){
$(this).queue(function (next) {
redirectToUpdatedLocation();
next();
});
});
For example, click the div as it is being toggled: http://jsfiddle.net/9HwYy/
It also seems a bit silly to me to update every href instead of just the one you clicked on since you are changing the window location anyway.

try
$('.program-status > .btn.active').each(function(i,v){
v = $(v);
addToParamStr( '?status=' + v.text());
});
since im not sure "this" is working in your case.