Magento – How to refresh shipping and billing address after checkout page load just like shipping Rates refresh using Knockout Js magento 2

addressajaxcheckoutknockoutjsmagento2.3

Hi guys, i want to refresh shipping and billing address after checkout
page load using Knockout Js magento 2.

If you guys have any idea please guide me.

Please check the code i tried below

app\code\Vendor\Module\view\frontend\web\js\view\shipping-address\address-renderer\default.js

 /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */

    define([
        'jquery',
        'ko',
        'uiComponent',
        'Magento_Checkout/js/action/select-shipping-address',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/shipping-address/form-popup-state',
        'Magento_Checkout/js/checkout-data',
        'Magento_Customer/js/customer-data',
        'Magento_Checkout/js/model/shipping-rate-registry'

    ], function ($, ko, Component, selectShippingAddressAction, quote, formPopUpState, checkoutData, customerData,rateRegistry) {
        'use strict';

        var countryData = customerData.get('directory-data');

        return Component.extend({
            defaults: {
                template: 'Vendor_Module/shipping-address/address-renderer/default'
            },

            /** @inheritdoc */
            initObservable: function () {
                this._super();
                this.isSelected = ko.computed(function () {
                    var isSelected = false,
                        shippingAddress = quote.shippingAddress();

                    if (shippingAddress) {
                        isSelected = shippingAddress.getKey() == this.address().getKey(); //eslint-disable-line eqeqeq
                    }

                    return isSelected;
                }, this);

//My code start here
                var address = quote.shippingAddress();

                address.trigger_reload = new Date().getTime();

                rateRegistry.set(address.getKey(), null);
                rateRegistry.set(address.getCacheKey(), null);

                quote.shippingAddress(address); 
                console.log("shipping address renderer");
//My code end here
                return this;
            },

            /**
             * @param {String} countryId
             * @return {String}
             */
            getCountryName: function (countryId) {
                return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
            },

            /** Set selected customer shipping address  */
            selectAddress: function () {
                selectShippingAddressAction(this.address());
                checkoutData.setSelectedShippingAddress(this.address().getKey());
            },

            /**
             * Edit address.
             */
            editAddress: function () {
                //formPopUpState.isVisible(true);
                //this.showPopup();
                this.redirectUrl();
            },

            /**
             * redirect to Cpp address edit page click on addredd edit button.
             */
            redirectUrl: function () {
                window.location.href = '';
            },

            /**
             * Show popup.
             */
            showPopup: function () {
                $('[data-open-modal="opc-new-shipping-address"]').trigger('click');
            }
        });
    });

Best Answer

I am facing similar issue and did not able to solve it. I guess you can try to update the address renderer's data:elems.

update and data: elems in shipping-address/list.html

I am not able to understand it. If you solved, you may post your updated code here. The link you try is not working because the address is not saving to quote at that step. Guessing it will save when you go to payment step. Please correct me if i am wrong.