I want to Add new form below the existing form in my wordpress plugin settings page by adding the Add more form and remove button what should i do
i tried the on click funciton but did not get event the first alert of testing done
$(document).ready(function(){
$("#addmorebtn").click(function(){
alert("testing done");
$(".multipleforms .single-form:last-child").clone().appendTo(".multipleforms");
});
$(document).on('click','btn-remove',function(){
if($(".multipleforms .single-form").length > 1)
{
$(this).parents(".single-form").remove();
}
});
});
Related
Is there a way in prestashop to show a confirmation message before an item is removed from the cart in prestashop 1.7? I'd just like to be pointed to the file that contains this method so that I may be able to add a confirm dialog, since right now a user can just delete without confirmin
Yes, you can show confirm dialog before deleting item from cart. By default core.js and theme.js file handles all events and update cart accordingly on updateCart event. (Refer more on events here)
To overcome default behaviour adding js prior to theme.js will help us to prevent default click event. Follow below mentioned step by step guide to load you own js and add confirmation dialog on item delete.
1) Register your js in theme.yml (More details here) by adding below code under assets
themes/{your_theme}/config/theme.yml
assets:
js:
cart:
- id: cart-extra-lib
path: assets/js/cart-lib.js
priority: 30
2) Create file cart-lib.js under themes/{your_theme}/assets/js and add below code into it.
themes/{your_theme}/assets/js/cart-lib.js
function refreshDataLinkAction() {
$('[data-link-action="delete-from-cart"]').each(function(){
$(this).attr('data-link-action', 'confirm-remove-item');
});
}
$(document).on('click', '[data-link-action="confirm-remove-item"]', function(e) {
e.preventDefault();
if (confirm('Are you sure you want to remove product from cart?')) {
$(this).attr('data-link-action', 'delete-from-cart');
$(this).trigger('click');
}
return false;
});
$(document).ready(function () {
refreshDataLinkAction();
prestashop.on('updatedCart', function (event) {
refreshDataLinkAction();
});
});
3) Now, to load your js file you need to delete file config/themes/{your_theme}/shop1.json (Reference)
4) Add products to cart and check cart; delete items you will see confirmation message. Attaching image for reference.
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__));
}
I have a click function on a button that adds an item to my cart using the Minicart.js library from minicartjs.com. When the button is clicked items are being added to the cart however, the cart is not popping up as expected. I've tested this on up to date versions of Chrome and IE (ie 11).
Some things I've noticed:
In the debugger if I execute the show cart function
paypal.minicart.view.show() the cart displays fine. Even with the
items I've added.
When my add button is clicked "class" is appended to the body with no
actual class assigned:
When the cart is showing a class "minicart-showing" is appended to
the body.
The following script is at the end of a MVC partial View:
<script src="~/Scripts/minicart.js"></script>
<script>
$(".showcart").click(function () {
var data = $(this).attr("data-id");
paypal.minicart.cart.add(JSON.parse(data));
// $("#body").toggleClass("minicart-showing"); <---doesn't work
// paypal.minicart.view.show() <---- doesn't work
});
paypal.minicart.render();
</script>
After further reviewing the minicartjs examples in the author's repository. I found that using e.stopPropagation() within the click function resolves the issue.
$(".showcart").click(function (e) { // <--- added the e function
var data = $(this).attr("data-id");
e.stopPropagation(); // <--- And this line.
paypal.minicart.cart.add(JSON.parse(data));
});
Code Example From Author's GitHub Repo
I am new to JQM and I'm using Phongeap with JQM for a new project.
My javascript is in one single js file and I'm loading the views from multiple html files.
As the transitions of the siede panel are poor, when I change pages via <a href="page2.html"> I tried to to use event listeners for the Menuitems.
function setPanelListeners(){
$('#menu_search').click(function() {
switchPageTo('search.html');
});
$('#menu_schedule').click(function() {
switchPageTo('program.html');
});
$('#menu_news').click(function() {
switchPageTo('news.html');
});
}
I call this function on the pagebeforeshoe event of each page. To fix the transitions to the way I need it, I use this function
// Close Panel then change page
function switchPageTo(url){
$('#menupanel').panel('close');
setTimeout(function() {
$.mobile.changePage( url, { transition: 'fade'} );
},200);
}
So here is the Problem. It actually works fine on the first page. But on the second page the Menuitems won't work, I guess the event listers are not listening for the new panel, because in the html the panel is loaded twice! And the Event listeners only listen for the first panel (from the first page) which is not displayed on the second page.
Any help is appreciated!
Are you adding panel dynamically on the second page? In JQM 1.3 you have to add panel separately to each page, although this restriction will be removed in future versions.
Use event delegation for dynamic panels:
$(document).on('click' ,'#menu_search' function() {
switchPageTo('search.html')
});
using some date time picker plugins i am unable to rebind them after ajax update panel completion.
i used a control containing jquery plugins for date and time , inside page.
it works fine at first but when change drop down list, it's update panel rebind and don't bind jquery functionality again.
Problem is update panel refresh the dom and every child element inside update panel re-render when ajax request by update panel.
<script>
function rebindJqueryPlugins() {
jQuery('.example').datetimepicker();
}
if( typeof(Sys) != "undefined" )
{
prm = Sys.WebForms.PageRequestManager.getInstance();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){
//rebinding elements with jquery plugins once we get reponse from server
rebindJqueryPlugins();
});
}
else
{
//we have a problem with ScriptManager
}
//on page load calling jquery plugins to bind elements
jQuery (function(){
//console.log("najam is great");
rebindJqueryPlugins();
});
</script>