4

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.

4
  • Controller returns an json array. In my console log it displays the array, So the problem is not in controller side Commented Dec 6, 2018 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. Commented Dec 6, 2018 at 10:18
  • @PrincePatel yes exactly, how can I solve this Commented Dec 6, 2018 at 10:21
  • @VigneshBala you can use KO Observable Variable
    – Sathish
    Commented Dec 6, 2018 at 10:41

1 Answer 1

1

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;
        }
    });
});
3
  • I will check this @Tuyen Nguyen Commented Dec 6, 2018 at 10:26
  • @VigneshBala Updated the answer Commented Dec 6, 2018 at 11:11
  • still the url not passed to template file, I guess this is async request issue Commented Dec 11, 2018 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.