CODEWITHSUNDEEP
jquerygetgoogle-visualization
wootscootinboogie
wootscootinboogie

Reputation: 8695

Get request for Google QR code API jQuery

I'm just getting into using Google APIs (exciting stuff). I have an image tag on my page whose source attribute I want to get form the google charts API. I haven't fiddled around with this stuff before so I've come up with: 

  //root URL
    var qrURL = 'https://chart.googleapis.com/chart?'
    //text to make QR code
    var qrText = 'hello world';
    //parameters 
    var qrOptions = {
        cht: 'qr',
        chs: '300x300',
        ch1: qrText
    }
    $.get(qrURL + qrOptions, function () {

    });
    $('#img').attr('src', qrURL);

In the console this returns a bunch of wingding like characters which I assume is a text version of the QR code's picture. What I would like to do, though, is actually dynamically get that image on my page. What do I need to do to dynamically get the source attribute set like I want?

EDIT: I added this: $('#img').attr('src', qrURL + $.param(qrOptions)); but this gives me a QR code that when scanned contains no actual text (but it does let a QR code appear on the page).

Upvotes: 0

Views: 449

Answers (1)

Brian North
Brian North

Reputation: 1398

Your line, $.get(qrURL + qrOptions, function... is malformed: you cannot simply add an object to a string and expect a url-encoded string back. qrURL + qrOptions results in the string "https://chart.googleapis.com/chart?[object Object]" - not what you want. The proper parameters for $.get are ( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

The proper form for your get request is thus:

$.get(qrURL, qrOptions, function( reply ) { /* ... */ } );

You then proceed to use reply in your success function to handle Google's response.

Upvotes: 1

Related Questions