CODEWITHSUNDEEP
javascript
James
James

Reputation: 1460

Sencha Touch: How to set a variable in JsonP request

I'm new to sencha touch 2. I'm unable to set my qrCodeHtml variable and use it outside of the JsonP request. I know all of this code works except being able to set the qrCodeHtml variable. Please help me accomplish this:

    onMyProfileCommand: function () {
    var api_username = "o_xxxxx";
    var api_key = "R_xxxxxxxxxx";
    var long_url = "http://google.com";
    var qrCodeHtml = '';

    Ext.data.JsonP.request({
        url: 'https://api-ssl.bitly.com/v3/shorten',
        callbackKey: 'callback',
        params: {
            login: api_username,
            apiKey: api_key,
            longUrl: long_url
        },
        success: function (result, request) {
            var shortUrl = result.data.url;
            qrCodeHtml = '<div style="font-size:15px; margin-bottom:5px;">Friends can scan this to <a href="' + shortUrl +
                             '" style="color:inherit; text-decoration:none; font-weight:bold;">view your profile!</a></div><img src="' +
                             shortUrl + '.qrcode" style="height:110px; width:110px;" />';
        }
    });

    this.getLblQrCodeHtml().setData({ QrCodeHtml: qrCodeHtml });
    Ext.Viewport.animateActiveItem(this.getProfileView(), this.slideLeftTransition);
}

Upvotes: 1

Views: 387

Answers (2)

James
James

Reputation: 1460

Thanks Goyuix, just what I needed! Here's the solution:

    onMyProfileCommand: function () {
var api_username = "o_xxxxx";
var api_key = "R_xxxxxxxxxx";
var long_url = "http://google.com";
var controller = this;

Ext.data.JsonP.request({
    url: 'https://api-ssl.bitly.com/v3/shorten',
    callbackKey: 'callback',
    params: {
        login: api_username,
        apiKey: api_key,
        longUrl: long_url
    },
    success: function (result, request) {
        var shortUrl = result.data.url;
        var qrCodeHtml = '<div style="font-size:15px; margin-bottom:5px;">Friends can scan this to <a href="' + shortUrl +
                         '" style="color:inherit; text-decoration:none; font-weight:bold;">view your profile!</a></div><img src="' +
                         shortUrl + '.qrcode" style="height:110px; width:110px;" />';

        controller.getLblQrCodeHtml().setData({ QrCodeHtml: qrCodeHtml });
    }
});

Ext.Viewport.animateActiveItem(controller.getProfileView(), this.slideLeftTransition);

}

Upvotes: 1

Goyuix
Goyuix

Reputation: 24330

The JsonP request will be made asynchronously - perhaps you just need to move the last two statements inside of the success event handler? Otherwise, the request will be queued up and issued, and the last two lines will be immediately issued before the qrCodeHtml variable has been set to the HTML you are trying to generate.

You will need to capture the this variable from your outer function, to use inside your success handler, so somewhere near the top where you other variables are defined:

var that = this;

then update your success handler to use the that variable to perform the update once your request comes back:

success: function (result, request) {
  var shortUrl = result.data.url;
  qrCodeHtml = '<div style="font-size:15px; margin-bottom:5px;">Friends can scan this to <a href="' + shortUrl +
                         '" style="color:inherit; text-decoration:none; font-weight:bold;">view your profile!</a></div><img src="' +
                         shortUrl + '.qrcode" style="height:110px; width:110px;" />';
  that.getLblQrCodeHtml().setData({ QrCodeHtml: qrCodeHtml });
  Ext.Viewport.animateActiveItem(this.getProfileView(), this.slideLeftTransition);
    }
});

Upvotes: 0

Related Questions