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.

  • 1
    which ajaxscroll extension have you used? – Rakesh Jesadiya Jun 23 '16 at 11:19
  • I am creating my own. In first page product ajax addto cart working but in ajax response it is not working – Prashant Valanda Jun 23 '16 at 11:23
  • I got same issue, did you solve this problem? – Mike Jul 20 '16 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 – Prashant Valanda Jul 21 '16 at 5:06
  • @Dmitry I have resolved issue try with it. It is working for me. – Prashant Valanda Jul 30 '16 at 13:03
10

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(); 
    },
});
  • 1
    Thanks it work for me. $( "form[data-role='tocart-form']" ).catalogAddToCart(); – Jalpesh Patel Apr 14 '17 at 12:05
  • It's give me error TypeError: $(...).catalogAddToCart is not a function – Magecode Sep 11 '17 at 8:26
  • make sure you are using catalogAddToCart() after it is defined. – Arun Karnawat Sep 11 '17 at 12:36
  • @ArunKarnawat, Where to add this code? In which file? I am using infinite scroll, – jafar pinjar Feb 4 at 14:32
6

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');
  • I am also facing the same issue, how did you resolve this issue? I need to re-init add to cart function – jafar pinjar Feb 4 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');
        }
    });

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

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.