I added ajax to single product page using that way and it (ajax)works, but I still have no reaction on
jQuery(document).ready(function($){
$('body').on( 'added_to_cart', function(){
alert("testing!");
});
});
I want to make popup visible after adding product to cart. The popup is standard - with options go cart link or stay there and close popup. What can be wrong? No reaction on that trigger at all
Try this code:
(function ( $ ) {
$( document ).ready( function () {
$( document.body ).on( 'added_to_cart', function () {
alert( "testing!" );
} );
} );
})( jQuery );
I'm using this as well and on my page it works.
If it don't works, be sure your JS script get's loaded by opening the console and check the sources. You can also add an alert to your ready function as well.
Related
I have a webpage that runs a python script with the command shell_exec. I'd like for a loading spinner, the 'Please wait while this page loads' sort of message, to show while the python script is running, then after it is done for the rest of the echo'd HTML to show.
I found what seems like a good solution at https://stackoverflow.com/a/68503/4630491
but I am so new to ajax that I don't know how to use the solution. I tried doing
<div id="loadingDiv">Please wait while this page loads.</div>
<script>var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
</script>
but this did not work. Do I need to call ajax to execute the ajaxStart? How would I call it? Should I wrap the shell_exec in ajax code?
Thanks a bunch.
Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event.
Have a loading gif image like shown below
<div id="loading">
<img src="loading.gif" />
</div>
First hide this loading div(because loading image have to be shown when ajax request is about to sent).
<script>
var $loading = $('#loading').hide();
//Attach the event handler to any element
$(document)
.ajaxStart(function () {
//ajax request went so show the loading image
$loading.show();
})
.ajaxStop(function () {
//got response so hide the loading image
$loading.hide();
});
</script>
For more see at jQuery documentation
Do I need to call ajax to execute the ajaxStart? How would I call it?
Yes when you triggered a ajax request then only ajaxStart will get triggered automatically.
For ajax there are multiple ways with jquery, below I am giving with load function.
$( ".result" ).load( "some_file.py" );
some_file.py output will inserted into div with class name result.
To trigger the load event you can use button click or any other as need.
$( ".trigger" ).click(function() {
$( ".result" ).load( "some_file.py" );
});
In my woocommerce-based store, I have combined cart and checkout pages into one, it works well, but there is an issue when I try to remove a coupon. The coupon removes from the cart with AJAX processing, so when removal is complete - the page doesn't reload, and the coupon still displaying as applied (but actually it's removed).
So I need to disable AJAX for applying/removing coupon function.
I tried to add this code into my theme's functions.php:
function disable_checkout_script() {
wp_dequeue_script( 'wc-checkout' );
}
add_action( 'wp_enqueue_scripts', 'disable_checkout_script' );
It solves my problem, but this code disables ALL AJAX at the checkout page, and I would like to disable ajax only for applying/removing coupons and to save another ajax processing like verification for billing/shipping fields.
Please help, unfortunately, I'm not a JS expert.
Regards!
In your JS file you need to remove a couple of event handlers. There's an event fired when pressing the remove coupon button and also when the coupon form is submit.
The relevant lines are 381 - 383 of woocommerce/assets/js/frontend/checkout.js (WooCommerce loads a minified version of this file).
$( document.body ).on( 'click', 'a.showcoupon', this.show_coupon_form );
$( document.body ).on( 'click', '.woocommerce-remove-coupon', this.remove_coupon );
$( 'form.checkout_coupon' ).hide().submit( this.submit );
You need to remove 2 and 3.
Add the following code to your JS file:
$( document.body ).off( 'click', '.woocommerce-remove-coupon', wc_checkout_coupons.remove_coupon );
$( 'form.checkout_coupon' ).off( 'submit' );
For anyone else looking for a solution to disable AJAX and force a refresh of the checkout page and came across this post, here's what I found worked for me without having to edit any core function files within the WooCommerce plugin. Note, however it does not actually disable AJAX, but it successfully refreshes the full checkout page upon removal.
jQuery code: This forces a page refresh 400ms after clicking the remove button to ensure that the AJAX removal command goes through first.
jQuery(document).on('click', '.woocommerce-remove-coupon', function () {
setTimeout(
function () {
window.location.href = window.location.href;
}, 400);
});
Then hook the .js file to the checkout page (add to your theme's functions.php or create a plugin).
I did it this way:
add_action( 'woocommerce_after_checkout_form', 'remove_coupon');
function remove_coupon() {
wp_enqueue_script('remove-coupon', plugins_url('remove-coupon.js', __FILE__));
}
How to check if a button is clicked or not in prototype JavaScript?
$('activateButton').observe('click', function(event) {
alert(hi);
});
The code above is not working.
With this button:
<button id="mybutton">Click Me</button>
Use this:
$('mybutton').observe('click', function () {
alert('Hi');
});
Tested and works, here.
You might want to encase it in a document.observe('dom:loaded', function () { }) thingy, to prevent it executing before your page loads.
Also, just an explanation:
The single dollar sign in Prototype selects an element by its id. The .observe function is very similar to jQuery's .on function, in that it is for binding an event handler to an element.
Also, if you need it to be a permanent 'button already clicked' thingy, try this:
$('mybutton').observe('click', function () {
var clicked = true;
window.clicked = clicked;
});
And then, if you want to test if the button has been clicked, then you can do this:
if (clicked) {
// Button clicked
} else {
// Button not clicked
}
This may help if you are trying to make a form, in which you don't want the user clicking multiple times.
How one may do it in jQuery, just for a reference:
$('#mybutton').on('click', function () {
alert('Hi');
});
Note that, the jQuery code mentioned above could also be shortened to:
$('#mybutton').click(function () {
alert('Hi');
});
jQuery is better in Prototype, in that it combines the usage of Prototype's $ and $$ functions into a single function, $. That is not just able to select elements via their id, but also by other possible css selection methods.
How one may do it with plain JavaScript:
document.getElementById('mybutton').onclick = function () {
alert('Hi');
}
Just for a complete reference, in case you need it.
$('body').delegate('.activateButton', 'click', function(e){
alert('HI');
});
I have a really annoying issue with jQuery and/or the jQuery UI Dialog Box.
After clicking on a special link a modal dialog will pop up with some loaded content (ajax) and inside this loaded content are new links/buttons that load their url inside the same div Box, so the dialog still is loaded, but with new content then. The Problem is, that if you link on that link (inside a fresh loaded dialog box and on a recently reloaded website) it works as it should, but with the second click it loads the url twice, with the third it loads 4 times ... It growing exponentially with every new link loaded inside the dialog. I testet this with a counter stored inside $_SESSION.
This is the Javascript Code:
var somedialog = $('<div></div>').dialog({
autoOpen: false,
resizable: false,
modal: true,
/*show: 'fade',
hide: 'puff',*/
closeOnEscape: true,
close: function(){
}
});
function openInDialog(url, title, width, height)
{
somedialog.empty();
somedialog.dialog("option", "width", width);
somedialog.dialog("option", "height", height);
somedialog.dialog("option", "title", title);
somedialog.load(url,{},function (responseText, textStatus, XMLHttpRequest)
{
somedialog.dialog('open');
}
);
//somedialog.load(url,{},function (responseText, textStatus, XMLHttpRequest){
// dialogdiv.somedialog('open');
//});
}
$('a.ajaxBuyItemDialog').on('click',function(){
openInDialog(this.href, this.title, 400, 300);
//prevent the browser to follow the link
return false;
});
There seemed to bee other people with this issue, but that was not a very effective discussion: https://stackoverflow.com/questions/6471360/jquery-load-after-load-repeated-results-problem
Thanks for your help!
EDIT:
This is part of the code which is located in the loaded script:
$("#_BUYITEM_FORM").live('submit', function(){
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response){ // on success..
$("#_BUYITEM_CONTENT").html('<p class="AjaxLoaderImg"><span>Einen Moment bitte...</span></p>');
$("#_BUYITEM_CONTENT").html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});
Without it I can't get it to refresh the dialog box with new content.
It seems that your javascript code is replicated in every $('a.ajaxBuyItemDialog') destination page clicked. Adding that script to the dialog again at every click causes event to be triggered more than once.
If you reload the script numerous times it will add a new submit handler to form each time since you are using live().
live() will delegate the handler to the document and thus should either only be called once or you need to call die() before script loads each time.
if you were to get rid of using live() you could move the submit handler to the success callback of load() and use submit() rather than live(). If the original form is replaced...the original submit() event handler will also be gone
"Dirty" solution
function watchBuyItemForm(){
$("#_BUYITEM_FORM").submit(function(){
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response){ // on success..
somedialog.html(ajaxLoader);
somedialog.html(response); // update the DIV
watchBuyItemForm();
}
});
return false; // cancel original event to prevent form submitting
});
}
There is a link that, when clicked, toggles between loading HTML into a div and emptying the div. When the div is clicked to load the html, I use the jQuery ajax load() function. When the text is loading, I want to display "Please wait...", so I tried using the jQuery ajaxStart() and ajaxStop() methods, but they only seemed to work the first time the load() function was called. So I switched to ajaxSend() and ajaxSuccess, but that also only seems to work the first time the load function is called. What's wrong?
HTML:
<p id="toggleDetail" class="link">Toggle Inspection Detail</p>
<p id="wait"></p>
<div id="inspectionDetail"></div>
jQuery:
$(
function(){
$('#toggleDetail').click(function(){
if($.trim($('#inspectionDetail').text()).length)
{
$('#inspectionDetail').empty();
}
else
{
$('#inspectionDetail').load('srInspectionDetailFiller.cfm');
}
});
}
);
$(
function(){
$('#wait').ajaxSend(function() {
$(this).text('Please wait...');
});
}
);
$(
function(){
$('#wait').ajaxSuccess(function() {
$(this).text('');
});
}
);
You should put up the 'Please wait...' message in your click function, then clear the message upon successful completion of your load:
$('#toggleDetail').click(function(){
if($.trim($('#inspectionDetail').text()).length)
{
$('#inspectionDetail').empty();
}
else
{
$('#wait').text('Please wait...');
$('#inspectionDetail').load('srInspectionDetailFiller.cfm', function() {
$('#wait').text('');
});
}
});
Edit: Although ajaxSend should technically work here, I don't recommend it. With ajaxSend, "All ajaxSend handlers are invoked, regardless of what Ajax request is to be sent". It seem overkill to me to hook all Ajax requests on the page which you're really only trying to deal with this single click.