Loading javascript after AJAX load

Question

I have a woocommerce site that uses light-box products with AJAX filters. To access the light box a quick-view button appears when you hover over the product.

When I load an AJAX filter the light-box quick-view button is no longer clickable. I need to add the code to the button after the AJAX load. Below is the function that the theme uses.

85: function(t, e) {
            "use strict";
            Flatsome.behavior("quick-view", {
                attach: function(t) {
                    jQuery(".quick-view", t).each(function(t, e) {
                        jQuery(e).hasClass("quick-view-added") || (jQuery(e).click(function(t) {
                            if ("" != jQuery(this).attr("data-prod")) {
                                jQuery(this).parent().parent().addClass("processing");
                                var e = jQuery(this).attr("data-prod"),
                                    i = {
                                        action: "flatsome_quickview",
                                        product: e
                                    };
                                jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
                                    jQuery(".processing").removeClass("processing"), jQuery.magnificPopup.open({
                                        removalDelay: 300,
                                        closeBtnInside: !0,
                                        autoFocusLast: !1,
                                        items: {
                                            src: '<div class="product-lightbox lightbox-content">' + t + "</div>",
                                            type: "inline"
                                        }
                                    }), setTimeout(function() {
                                        jQuery(".product-lightbox").imagesLoaded(function() {
                                            jQuery(".product-lightbox .slider").flickity({
                                                cellAlign: "left",
                                                wrapAround: !0,
                                                autoPlay: !1,
                                                prevNextButtons: !0,
                                                adaptiveHeight: !0,
                                                imagesLoaded: !0,
                                                dragThreshold: 15
                                            })
                                        })
                                    }, 300), jQuery(".product-lightbox form").hasClass("variations_form") && jQuery(".product-lightbox form.variations_form").wc_variation_form(), jQuery(".product-lightbox form.variations_form").on("show_variation", function(t, e) {
                                        e.image.src ? (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image.src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0)) : e.image_src && (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image_src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0))
                                    }), jQuery(".product-lightbox .quantity").addQty()
                                }), t.preventDefault()
                            }
                        }), jQuery(e).addClass("quick-view-added"))
                    })
                }
            })
        }

Jason O. Jensen · Accepted Answer · 2017-08-18 17:12:31Z

1

If you can edit the theme, write the code directly into the success callback:

jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
  // Code you want to run
  // Other code. i.e. jQuery(".processing").removeClass ... etc.
});

Or define the function and call it inside your success() callback.

var myFunction = function() {
  // Code to run after success
}
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
   myFunction();
   // Other code
});

answered Aug 18, 2017 at 17:12

Jason O. Jensen

3112 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Over a year ago

Thanks exactly what I needed, problem is I really am not sure what code I have to run, working on it!

Collectives™ on Stack Overflow

Loading javascript after AJAX load

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related