#347 ✓ checked-in
Steven W

Allow Popcorn.getJSONP to remember context for async calls

Reported by Steven W | February 16th, 2011 @ 11:03 AM | in 0.4

As part of #281, I'm working on eliminating the jQuery dependency from the Flickr plugin. There is a bit of a difference in behaviour of jQuery's getJSON function that would be nice to have in Popcorn's getJSONP function. Using getJSONP for multiple asynchronous calls from the setup function of the Flickr plugin, only the last-specified track is changed. Using equivalent code with JQuery's getJSON, the xhr callback function is applied to the closure scope as given at the time setup is called (changes are applied to all tracks).

See the below code snippets. Aside from calling getJSON or getJSONP, they differ only by the url flag specifying the callback function (Flickr's API expects 'jsoncallback', getJSONP expects 'callback').

Current code (jQuery)
var url = "http://api.flickr.com/services/feeds/photos_public.gne?id=35034346917@N01&lang=en-us&format=json&jsoncallback=?";
Popcorn.xhr.getJSONP(
  uri,
  function( data ) {
    options.container.innerHTML = "
" + data.title + ""; Popcorn.forEach( data.items, function ( item, i ) { if ( i < count ) { var link = document.createElement('a'); link.setAttribute( 'href', item.link ); link.setAttribute( "target", "_blank" ); var image = document.createElement( 'img' ); image.setAttribute( 'src', item.media.m ); image.setAttribute( 'height', height ); image.setAttribute( 'width', width ); image.setAttribute( 'style', 'border:' + border + ';padding:' + padding ); link.appendChild( image ); options.container.appendChild( link ); } else { return false; } }); } ); Popcorn-style code var url = "http://api.flickr.com/services/feeds/photos_public.gne?id=35034346917@N01&lang=en-us&format=json&callback=jsonFlickrFeed"; Popcorn.xhr.getJSONP( uri, function( data ) { options.container.innerHTML = "
" + data.title + ""; Popcorn.forEach( data.items, function ( item, i ) { if ( i < count ) { var link = document.createElement('a'); link.setAttribute( 'href', item.link ); link.setAttribute( "target", "_blank" ); var image = document.createElement( 'img' ); image.setAttribute( 'src', item.media.m ); image.setAttribute( 'height', height ); image.setAttribute( 'width', width ); image.setAttribute( 'style', 'border:' + border + ';padding:' + padding ); link.appendChild( image ); options.container.appendChild( link ); } else { return false; } }); } );

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

Referenced by

Pages