Update Cart Page by Ajax on quantity change

I have to update the main cart on change of quantity by Ajax without click on "Update Cart Button" and without reloading the page.

By the following code, I'm able to update cart table but m not getting a solution to update the "Cart Summary" block.

<script>

require(['jquery', 'Magento_Customer/js/customer-data',

    'jquery/jquery-storageapi'], function ($) {

    // $("#submitbutton").hide();

    var form = $('form#form-validate');

    var qtyfields = $('input.qty');

    $('.page.messages').each(function () {

        var thismessage = $(this);

        thismessage.attr('id', 'messages');

    });



    form.find(qtyfields).each(function (e) {

        var thisfield = $(this);

        $(this).change(function () {

            console.log('change detected');

            form.submit();

        });



    });

    form.on('submit', function (e) {

        e.preventDefault();

        $.ajax({

            url: form.attr('action'),

            data: form.serialize(),

            type: 'post',

            success: function (res) {

                var parsedResponse = $.parseHTML(res);

                var result = $(parsedResponse).find("#form-validate");

                $("#form-validate").replaceWith(result);

                //console.log(result);

                //location.reload();

            },

            error: function () {

                console.log('error');

            }

        });

        console.log('form submitted');

    });

});

</script>

Please give me some solution.

edited 22 mins ago

magefms

1,588225

asked Aug 29 '17 at 12:17

Magecode

519421

add a comment |

<script>

require(['jquery', 'Magento_Customer/js/customer-data',

    'jquery/jquery-storageapi'], function ($) {

    // $("#submitbutton").hide();

    var form = $('form#form-validate');

    var qtyfields = $('input.qty');

    $('.page.messages').each(function () {

        var thismessage = $(this);

        thismessage.attr('id', 'messages');

    });



    form.find(qtyfields).each(function (e) {

        var thisfield = $(this);

        $(this).change(function () {

            console.log('change detected');

            form.submit();

        });



    });

    form.on('submit', function (e) {

        e.preventDefault();

        $.ajax({

            url: form.attr('action'),

            data: form.serialize(),

            type: 'post',

            success: function (res) {

                var parsedResponse = $.parseHTML(res);

                var result = $(parsedResponse).find("#form-validate");

                $("#form-validate").replaceWith(result);

                //console.log(result);

                //location.reload();

            },

            error: function () {

                console.log('error');

            }

        });

        console.log('form submitted');

    });

});

</script>

Please give me some solution.

edited 22 mins ago

magefms

1,588225

asked Aug 29 '17 at 12:17

Magecode

519421

add a comment |

<script>

require(['jquery', 'Magento_Customer/js/customer-data',

    'jquery/jquery-storageapi'], function ($) {

    // $("#submitbutton").hide();

    var form = $('form#form-validate');

    var qtyfields = $('input.qty');

    $('.page.messages').each(function () {

        var thismessage = $(this);

        thismessage.attr('id', 'messages');

    });



    form.find(qtyfields).each(function (e) {

        var thisfield = $(this);

        $(this).change(function () {

            console.log('change detected');

            form.submit();

        });



    });

    form.on('submit', function (e) {

        e.preventDefault();

        $.ajax({

            url: form.attr('action'),

            data: form.serialize(),

            type: 'post',

            success: function (res) {

                var parsedResponse = $.parseHTML(res);

                var result = $(parsedResponse).find("#form-validate");

                $("#form-validate").replaceWith(result);

                //console.log(result);

                //location.reload();

            },

            error: function () {

                console.log('error');

            }

        });

        console.log('form submitted');

    });

});

</script>

Please give me some solution.

edited 22 mins ago

magefms

1,588225

asked Aug 29 '17 at 12:17

Magecode

519421

<script>

require(['jquery', 'Magento_Customer/js/customer-data',

    'jquery/jquery-storageapi'], function ($) {

    // $("#submitbutton").hide();

    var form = $('form#form-validate');

    var qtyfields = $('input.qty');

    $('.page.messages').each(function () {

        var thismessage = $(this);

        thismessage.attr('id', 'messages');

    });



    form.find(qtyfields).each(function (e) {

        var thisfield = $(this);

        $(this).change(function () {

            console.log('change detected');

            form.submit();

        });



    });

    form.on('submit', function (e) {

        e.preventDefault();

        $.ajax({

            url: form.attr('action'),

            data: form.serialize(),

            type: 'post',

            success: function (res) {

                var parsedResponse = $.parseHTML(res);

                var result = $(parsedResponse).find("#form-validate");

                $("#form-validate").replaceWith(result);

                //console.log(result);

                //location.reload();

            },

            error: function () {

                console.log('error');

            }

        });

        console.log('form submitted');

    });

});

</script>

Please give me some solution.

cart ajax magento-2.1.7

edited 22 mins ago

magefms

1,588225

asked Aug 29 '17 at 12:17

Magecode

519421

edited 22 mins ago

magefms

1,588225

asked Aug 29 '17 at 12:17

Magecode

519421

edited 22 mins ago

magefms

1,588225

edited 22 mins ago

magefms

1,588225

edited 22 mins ago

magefms

1,588225

asked Aug 29 '17 at 12:17

Magecode

519421

asked Aug 29 '17 at 12:17

Magecode

519421

asked Aug 29 '17 at 12:17

Magecode

519421

add a comment |

2 Answers
2

active

oldest

votes

Thank you for your Answer, but this code only will submit once if call the

$("#form-validate").replaceWith(result);

And Ajax returning a whole HTML page for the result, is there any way to just get back small string of a JSON data set instead?

edited Oct 20 '17 at 23:23

Aasim Goriya

3,9671938

answered Oct 20 '17 at 17:25

Harry Alive

487

add a comment |

use this one. its works fine for me

var parsedResponse = jQuery.parseHTML(res);

var result = jQuery(parsedResponse).find(".subtotal");

var result1 = jQuery(parsedResponse).find(".message");

jQuery(".subtotal").replaceWith(result);

jQuery(".message").replaceWith(result1);

answered Dec 14 '17 at 6:31

Hansu

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f191045%2fupdate-cart-page-by-ajax-on-quantity-change%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Thank you for your Answer, but this code only will submit once if call the

$("#form-validate").replaceWith(result);

And Ajax returning a whole HTML page for the result, is there any way to just get back small string of a JSON data set instead?

edited Oct 20 '17 at 23:23

Aasim Goriya

3,9671938

answered Oct 20 '17 at 17:25

Harry Alive

487

add a comment |

Thank you for your Answer, but this code only will submit once if call the

$("#form-validate").replaceWith(result);

And Ajax returning a whole HTML page for the result, is there any way to just get back small string of a JSON data set instead?

edited Oct 20 '17 at 23:23

Aasim Goriya

3,9671938

answered Oct 20 '17 at 17:25

Harry Alive

487

add a comment |

Thank you for your Answer, but this code only will submit once if call the

$("#form-validate").replaceWith(result);

And Ajax returning a whole HTML page for the result, is there any way to just get back small string of a JSON data set instead?

edited Oct 20 '17 at 23:23

Aasim Goriya

3,9671938

answered Oct 20 '17 at 17:25

Harry Alive

487

Thank you for your Answer, but this code only will submit once if call the

$("#form-validate").replaceWith(result);

And Ajax returning a whole HTML page for the result, is there any way to just get back small string of a JSON data set instead?

edited Oct 20 '17 at 23:23

Aasim Goriya

3,9671938

answered Oct 20 '17 at 17:25

Harry Alive

487

edited Oct 20 '17 at 23:23

Aasim Goriya

3,9671938

edited Oct 20 '17 at 23:23

Aasim Goriya

3,9671938

edited Oct 20 '17 at 23:23

Aasim Goriya

3,9671938

answered Oct 20 '17 at 17:25

Harry Alive

487

answered Oct 20 '17 at 17:25

Harry Alive

487

answered Oct 20 '17 at 17:25

Harry Alive

487

add a comment |

use this one. its works fine for me

var parsedResponse = jQuery.parseHTML(res);

var result = jQuery(parsedResponse).find(".subtotal");

var result1 = jQuery(parsedResponse).find(".message");

jQuery(".subtotal").replaceWith(result);

jQuery(".message").replaceWith(result1);

answered Dec 14 '17 at 6:31

Hansu

add a comment |

use this one. its works fine for me

var parsedResponse = jQuery.parseHTML(res);

var result = jQuery(parsedResponse).find(".subtotal");

var result1 = jQuery(parsedResponse).find(".message");

jQuery(".subtotal").replaceWith(result);

jQuery(".message").replaceWith(result1);

answered Dec 14 '17 at 6:31

Hansu

add a comment |

use this one. its works fine for me

var parsedResponse = jQuery.parseHTML(res);

var result = jQuery(parsedResponse).find(".subtotal");

var result1 = jQuery(parsedResponse).find(".message");

jQuery(".subtotal").replaceWith(result);

jQuery(".message").replaceWith(result1);

answered Dec 14 '17 at 6:31

Hansu

use this one. its works fine for me

var parsedResponse = jQuery.parseHTML(res);

var result = jQuery(parsedResponse).find(".subtotal");

var result1 = jQuery(parsedResponse).find(".message");

jQuery(".subtotal").replaceWith(result);

jQuery(".message").replaceWith(result1);

answered Dec 14 '17 at 6:31

Hansu

answered Dec 14 '17 at 6:31

Hansu

answered Dec 14 '17 at 6:31

Hansu

answered Dec 14 '17 at 6:31

Hansu

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Kdjykuj