8

I am working on ajaxscroll product but when i got response below script not initialize

<script type="text/x-magento-init">
        {
            "[data-role=tocart-form], .form.map.checkout": {
                "catalogAddToCart": {}
            }
        }

</script>

Can anyone help me to initialize script after response.

7
  • 1
    which ajaxscroll extension have you used? Commented Jun 23, 2016 at 11:19
  • I am creating my own. In first page product ajax addto cart working but in ajax response it is not working Commented Jun 23, 2016 at 11:23
  • I got same issue, did you solve this problem?
    – skynetch
    Commented Jul 20, 2016 at 14:54
  • Yes I have solved this issue by adding addtocart require function in my page it is not a proper way but it's temporary solution for me Commented Jul 21, 2016 at 5:06
  • @Dmitry I have resolved issue try with it. It is working for me. Commented Jul 30, 2016 at 13:03

4 Answers 4

14

I have the same issue and I resolved it by calling catalogAddToCart after the ajax call.

Here is the code snippet

$.ajax({
    dataType: 'html',
    type: 'GET',
    url:url,
    success: function(data){
        var data =  $($.parseHTML(data));
        var productList = data.find('.products.list').html(); 
        productWrapper.append(productList);
        // this solved the problem
        $( "form[data-role='tocart-form']" ).catalogAddToCart(); 
    },
});
7
  • 1
    Thanks it work for me. $( "form[data-role='tocart-form']" ).catalogAddToCart(); Commented Apr 14, 2017 at 12:05
  • It's give me error TypeError: $(...).catalogAddToCart is not a function
    – Magecode
    Commented Sep 11, 2017 at 8:26
  • make sure you are using catalogAddToCart() after it is defined. Commented Sep 11, 2017 at 12:36
  • @ArunKarnawat, Where to add this code? In which file? I am using infinite scroll, Commented Feb 4, 2019 at 14:32
  • Wow u saved my day and thanks for this code $( "form[data-role='tocart-form']" ).catalogAddToCart(); Really helpful. Commented Jan 28, 2020 at 5:37
9

I have resolved this issue using below code:

htmlObject=jQuery("#custom_search_autocomplete").html(result);  

htmlObject.find('[data-role=autocompletesearch-tocart-form], .form.map.checkout').attr('data-mage-init', JSON.stringify({'catalogAddToCart': {}}));             
htmlObject.trigger('contentUpdated');
1
  • I am also facing the same issue, how did you resolve this issue? I need to re-init add to cart function Commented Feb 4, 2019 at 14:23
2

From the accepted answer I made this generic solution which is a bit easier to understand:

$(document).ajaxComplete(function() {

    $('[data-mage-init]').each(function() {
        var mageInit = $(this).attr('data-mage-init');

        if (typeof mageInit !== 'undefined') {
            var script = document.createElement("script");
            script.type = "text/x-magento-init";
            script.text = '{"*":' + mageInit.trim() + '}';
            $(this)[0].appendChild(script);
            $(this).trigger('contentUpdated');
            $(this).removeAttr('data-mage-init');
        }
    });

});
1
  • What is element? it's not working. is your code complete?
    – Magecode
    Commented Sep 8, 2017 at 12:15
1

Example below:

$.ajax({
    dataType: 'html',
    type: 'GET',
    url:url,
    success: function(data){
..............
**$('body').trigger('contentUpdated');**
    },
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.