Can't Append HTML from Instagram using JQuery

Question

I am attempting to get an embedded version of Instagram posts in my HTML. I get the HTML that I want to use through an ajax call.

My ajax call is working and I am getting the HTML since I see it in my console.log however nothing appears and no errors are shown when I load up the page.

Here is the ajax call:

function getIFrame(url) {
    var embedUrl =  "http://api.instagram.com/oembed?url=" + url;
    $.ajax({
        type: "GET",
        url: embedUrl,
        crossDomain: true,
        headers: { 'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, POST, PUT' },
        async: true,
        dataType: "jsonp",
        success: function (data) {
            console.log(data.html);
            return data.html;
        }
    });
}

and here is a snippet of what is using it.

...
$('<div>', { "style" : "padding-top: 10px;"})
    .append($('<span>').addClass('bold').text("User Website: "))
    .append(getIFrame(urlIG)),
...

The console.log outputs the HTML fine to the console but it does not show up in the HTML.

For reference here is where I got the embed information: https://instagram.com/developer/embedding/

and here is a sample of the JSON (same example as the API): http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/

`'Access-Control-Allow-Origin': '*',` useless on the clientside...that is set on the server.... — epascarello, Jun 22 '15 at 19:17
@epascarello Hmmm it does seem to do nothing. However, with or without it the embed still is not appearing. — user3684399, Jun 22 '15 at 19:20

score 0 · Accepted Answer · answered Jun 22 '15 at 19:19

0

This happens because when this code runs getIframe(urlIG) does not return anything so you don't see anything appended.

$('<div>', { "style" : "padding-top: 10px;"})
.append($('<span>').addClass('bold').text("User Website: "))
.append(getIFrame(urlIG)),

answered Jun 22 '15 at 19:19

Mohit

569
2
8

The function `getIFrame(urlIG)` calls the ajax call. This returns `data.html` and the `console.log` before it shows that it is appearing. – user3684399 Jun 22 '15 at 19:23
1

You ordered a pizza on the phone and you are trying to eat it before it gets to your house. It is impossible to return from an asynchronous call. Read the duplicate post for more details. – epascarello Jun 22 '15 at 19:25
You need to append the div in the success of ajax call.This would solve your problem – Mohit Jun 22 '15 at 19:27

Can't Append HTML from Instagram using JQuery

1 Answers1