CustomerData Messages Section is not showing up

Question

What I am trying to do: Normally you have to click "Update Shopping Cart" button to update cart when you change the quantity. With this following code, you do not need to reload cart but it will automatically reload card when you change item qty using AJAX.

define([
'jquery',   
'Magento_Checkout/js/action/get-totals',
'Magento_Customer/js/customer-data',
'Magento_Ui/js/model/messageList', // added component
'mage/translate', // for support translation
'jquery/jquery-storageapi',
'domReady!'
], function ($, getTotalsAction, customerData, messageList, $t) {

$(document).on('change', 'input[name$="[qty]"]', function(){
    var form = $('form#form-validate');
    $.ajax({
        url: form.attr('action'),
        data: form.serialize(),
        showLoader: true,
        success: function (res) {
            var parsedResponse = $.parseHTML(res);
            var result = $(parsedResponse).find("#form-validate");

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

            //reload minicart
            var sections = ['cart'];
            console.log("invalidate");
            customerData.invalidate(sections);
            console.log("reload");
            customerData.reload(sections, true);
            console.log("tot sum");
            //reload total summary
            var deferred = $.Deferred();
            getTotalsAction([], deferred);
            console.log("done");

            //for testing purpose - it returns null
            //var customerMessages = customerData.get('messages');
            var messages_section = ['messages'];
            //customerData.invalidate(messages_sections);
            customerData.reload(messages_section);
            
            //Display error if found after jquery
            var messages = $.cookieStorage.get('mage-messages');
            if (!_.isEmpty(messages)) {
                customerData.set('messages', {messages: messages});
                $.cookieStorage.set('mage-messages', '');
            }
            console.log(messages);
            //location.reload();

        },
        error: function (xhr, status, error) {
            console.log("test");
            var err = eval("(" + xhr.responseText + ")");
            console.log(err.Message);
        }
    });
  });

});

Right now, I am trying to show error message. My error message only shows up after page reload.

//Display error if found after jquery
            var messages = $.cookieStorage.get('mage-messages');
            if (!_.isEmpty(messages)) {
                customerData.set('messages', {messages: messages});
                $.cookieStorage.set('mage-messages', '');
            }

I was able to see the error in the messages variable, but how does customerData message section show up in frontend? It is still now showing up in frontend. Should it show up in /vagrant/www/vendor/magento/module-theme/view/frontend/templates/messages.phtml section?

Am I missing something here? Shouldn't the message section shows up?

Answer 1

Finally was able to fix issue. I just had to reload the message after setting CustomerData message section.

//Display error if found after jquery
            var messages = $.cookieStorage.get('mage-messages');
            if (!_.isEmpty(messages)) {
                customerData.set('messages', {messages: messages});
                $.cookieStorage.set('mage-messages', '');
            }

            //reload messages section
            var messages_section = ['messages'];
            //customerData.invalidate(messages_sections);
            customerData.reload(messages_section);