CODEWITHSUNDEEP
jqueryoembed
Nathaniel Ford
Nathaniel Ford

Reputation: 21220

oembed link filled with 'undefined'

Using the following javascript/jquery code:

$embedDiv.oembed(url,{  //url is the actual url of the embedded media
    allowedProviders: ["flickr", "youtube", "vimeo"],
    embedMethod: "fill",
    maxWidth: frmWidth, 
    maxHeight: frmHeight,
    afterEmbed: function(oembedData) {                    
        $flagText.val("1");
        $url.removeData('thumbnail_url');
    },
    onProviderNotFound: function(oembedData){
        $embedDiv.html("");
    }
});

I'm getting the following output on my page:

<div class="embed">
  <iframe src="(some url)" width="425" height="349" allowfullscreen="true" allowscriptaccess="always" scrolling="no" frameborder="0" style="max-height: 125px; max-width: 222px;"></iframe>
</div>

At least, if the media url in question is good. If it uses a bad url, which nevertheless resolves to something (such as a link to media which is protected by some authentication scheme), then I'll get something like:

<div class="embed">
  <a href="(some url)">undefined</a>
</div>

Now, I don't mind the anchor tag being there, but the undefined is highly undesirable, since it displays instead of the media. By putting a watch expression on the div, I can clearly see that the callback into oembed is doing this. I'm looking for a way to prevent the oembed from placing this text in the anchor tag, or from placing the anchor tag in the first place.

Note that simply going back later and removing it fails to work: because it's an asyncronous callback I have no way knowing when this will be called. I can only avoid it or somehow hide it.

Upvotes: 1

Views: 269

Answers (1)

Nathaniel Ford
Nathaniel Ford

Reputation: 21220

TLDR: Providers cannot be trusted to provide good oembedData back.

It seems that this is a bug in the oembed code not checking for null values in data returned by providers:

$.fn.oembed.getGenericCode = function(url, oembedData) {
     var title = (oembedData.title !== null) ? oembedData.title : url,
         code = '<a href="' + url + '">' + title + '</a>';
     if (oembedData.html) code += "<div>" + oembedData.html + "</div>";
     return code;
}

I have submitted a fix:

var title = ((oembedData.title) && (oembedData.title !== null)) ? oembedData.title : url,

Upvotes: 1

Related Questions