7

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? 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 Jun 23, 2016 at 11:23
  • I got same issue, did you solve this problem?
    – skynetch
    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 Jul 21, 2016 at 5:06
  • @Dmitry I have resolved issue try with it. It is working for me. Jul 30, 2016 at 13:03

4 Answers 4

12

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(); Apr 14, 2017 at 12:05
  • It's give me error TypeError: $(...).catalogAddToCart is not a function
    – Magecode
    Sep 11, 2017 at 8:26
  • make sure you are using catalogAddToCart() after it is defined. Sep 11, 2017 at 12:36
  • @ArunKarnawat, Where to add this code? In which file? I am using infinite scroll, Feb 4, 2019 at 14:32
  • Wow u saved my day and thanks for this code $( "form[data-role='tocart-form']" ).catalogAddToCart(); Really helpful. 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 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
    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, privacy policy and cookie policy

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