Question

Started messing around with Vimeo API in an attempt to create a clickable gallery like this (http://www.aideffectiveness.org/busanhlf4/vimeo/php-example.php). However, when I moved some of the code into a “script.js” file as a way to organize my code from the other parts of the site, the json callback keeps saying that the ’embedVideo’ function is not defined. Any ideas?

The “script.js” file is placed at the bottom of the page and has the following:

var NS = NS || NS;

NS = {

  videoInit: function() {

    var oEmbedUrl = 'http://vimeo.com/api/oembed.json';
    var oEmbedCallback = 'embedVideo';
    var videoid =  "";

    if(videoid == '' ){
        videoid = '23515961';
    }

    function embedVideo( video ) {
        var videoEmbedCode = video.html;
        document.getElementById('embed').innerHTML = unescape(videoEmbedCode);
    }

    function init() {
      loadScript(oEmbedUrl + '?url=http://vimeo.com/' + videoid + '&height=380&width=700&callback=' + oEmbedCallback);
    }

    function loadScript( url ) {
        var js = document.createElement('script');
        js.setAttribute('src', url);
       document.getElementsByTagName('head').item(0).appendChild(js);
    }

    init();
  }
}
$(function() {
   NS.videoInit();
});

The HTML:

<div id="wrapper">
    <div id="embed"></div>
</div>

Answer 1

embedVideo is a local (private) function inside of the init method. Nothing outside it can see it. That’s why your AJAX callback is throwing that error.

You can fix this by making embedVideo a proper method of NS, so that’s it’s visible to your ajax callback

NS = {
  embedVideo: function( video ) {
    var videoEmbedCode = video.html;
    document.getElementById('embed').innerHTML = unescape(videoEmbedCode);
  },

  videoInit: function() {

    var oEmbedUrl = 'http://vimeo.com/api/oembed.json';
    var oEmbedCallback = 'embedVideo';
    var videoid =  "";

    if(videoid == '' ){
        videoid = '23515961';
    }