2

I have a knouckout js to return data to html template. But I can't able to return values from ajax call done function.

My knouckout js like below,

define(
    [
        'jquery',
        'mage/url',
        'mage/storage'
    ],
    function ($, urlBuilder, storage) {
        'use strict';
        var url = null;
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/test'
            },
            getUrl: function () {
                var serviceUrl = urlBuilder.build('module/index/index');
                var res = storage.post(
                    serviceUrl,
                    ''
                ).done(
                    function (response) {
                        /* here get results bot logs prinited in console */
                        console.log(response);
                        console.log(response.url);
                        url = response.url;
                    }
                ).fail(
                    function (response) {
                        alert(response);
                    }
                );
                /* But here url is null */
                console.log(url);
                return url;
            }
        });
    }
);

And my template is,

<a tittle="test" class="test-click" data-bind="attr: {'href': getUrl()}">Click</a>

From ajax call response I get the result, but that value not binds to my html template. Please help me someone to done this.

  • Controller returns an json array. In my console log it displays the array, So the problem is not in controller side – Vignesh Bala Dec 6 '18 at 9:58
  • You need to return url in done() and fail() becuase when you call getUrl() function it will call ajax and run next statement which is return url and this url variable contains initialization value instead of ajax response value. – Prince Patel Dec 6 '18 at 10:18
  • @PrincePatel yes exactly, how can I solve this – Vignesh Bala Dec 6 '18 at 10:21
  • @VigneshBala you can use KO Observable Variable – Sathish Dec 6 '18 at 10:41
0

Try to init the variable url in a knockout observer as below, then on the response of ajax request, set the url back.

define(
[
    'jquery',
    'ko',
    'mage/url',
    'mage/storage'
],
function ($, ko, urlBuilder, storage) {
    'use strict';

    var url = ko.observable(null),
        getUrl = ko.observable(url() != null);

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/test'
        },

        url: url,

        getUrl: function () {
            var self = this,
                serviceUrl = urlBuilder.build('module/index/index'),
                returnUrl = '';
            var res = storage.post(
                serviceUrl,
                ''
            ).done(
                function (response) {
                    /* here get results bot logs prinited in console */
                    console.log(response);
                    console.log(response.url);
                    returnUrl = response.url;
                    url(returnUrl); // Could try self.url(returnUrl);
                }
            ).fail(
                function (response) {
                    alert(response);
                }
            );
            /* But here url is null */
            console.log(returnUrl);
            return returnUrl;
        }
    });
});
  • I will check this @Tuyen Nguyen – Vignesh Bala Dec 6 '18 at 10:26
  • @VigneshBala Updated the answer – Tuyen Nguyen Dec 6 '18 at 11:11
  • still the url not passed to template file, I guess this is async request issue – Vignesh Bala Dec 11 '18 at 11:44

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.