Update Cart Page by Ajax on quanity 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 following code m able to update cart table but m not getting a solution to update "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 Aug 29 '17 at 13:16

St3phan

1,9231136

asked Aug 29 '17 at 12:17

Magecode

392218

bumped to the homepage by Community♦ yesterday

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

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 Aug 29 '17 at 13:16

St3phan

1,9231136

asked Aug 29 '17 at 12:17

Magecode

392218

bumped to the homepage by Community♦ yesterday

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

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 Aug 29 '17 at 13:16

St3phan

1,9231136

asked Aug 29 '17 at 12:17

Magecode

392218

<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 Aug 29 '17 at 13:16

St3phan

1,9231136

asked Aug 29 '17 at 12:17

Magecode

392218

edited Aug 29 '17 at 13:16

St3phan

1,9231136

asked Aug 29 '17 at 12:17

Magecode

392218

edited Aug 29 '17 at 13:16

St3phan

1,9231136

edited Aug 29 '17 at 13:16

St3phan

1,9231136

edited Aug 29 '17 at 13:16

St3phan

1,9231136

asked Aug 29 '17 at 12:17

Magecode

392218

asked Aug 29 '17 at 12:17

Magecode

392218

asked Aug 29 '17 at 12:17

Magecode

392218

bumped to the homepage by Community♦ yesterday

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

bumped to the homepage by Community♦ yesterday

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

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

2,5821733

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-quanity-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

2,5821733

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

2,5821733

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

2,5821733

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

2,5821733

answered Oct 20 '17 at 17:25

Harry Alive

487

edited Oct 20 '17 at 23:23

Aasim Goriya

2,5821733

edited Oct 20 '17 at 23:23

Aasim Goriya

2,5821733

edited Oct 20 '17 at 23:23

Aasim Goriya

2,5821733

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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

搜尋此網誌

Mfrhtyj