Question

I make this call in my application.js file but it doesn’t seem to return a dynamically generated embedded video from the link the user inputs:

$("#new_video").bind('submit', function(e){
        e.preventDefault();
        var q = $(this).find('#video_video_url').val();
        if (q == '')
            return false;

        $.embedly(q, {maxWidth: 500, wrapElement: 'div' }, function(oembed, dict){
            if (oembed == null)
                $(".video").html('<p class="text"> Not A Valid URL </p>');
            else 
                $(".video").html(oembed.code);
        })
    });

I’m not exactly sure what’s supposed to go where 'submit' is, so that may be whats causing me trouble.

My id of the form that the user inputs the url into is #new_video, the field’s id is #video_video_url, and the class video is generated from my video partial:

<%= div_for video do %>
<% end %>

This is rendered in my index view, where I’d like to display all the embedded videos. This is all there is in my index view where I want all the videos to be embedded:

<div id ='video_div'>
  <%= render @videos %>
</div>

however, it’s not working. No video is being embedded. What am I doing wrong? Bear in mind that I not only want to embed the video once the url is submitted, but I store the url and want to display the embedded videos indefinitely into the future.

Here’s the HTML of the form that the browser sees in the new view:

<div id="dialog" class="window" style="top: 237px; left: 435px; display: block; ">
<form accept-charset="UTF-8" action="/videos" class="new_video" id="new_video" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
    <input name="authenticity_token" type="hidden" value="h/yzzD0lWsp7nc89WPmDRXWs5ahdfUc3ZvY5IukX2fQ=">
</div>
<div class="field">
   <label for="video_video_url">Video url</label><br>
   <input id="video_video_url" name="video[video_url]" size="30" type="text">
</div>
<div class="actions">
  <input id="video_submit" name="commit" type="submit" value="Create Video">
</div>
</form>
<a href="#" class="close">Cancel</a>
</div>

UPDATE:

I get this error in the console:

 Started GET "/jquery.embedly.js" for 127.0.0.1 at Thu Mar 17 00:09:29 -0700 2011

ActionController::RoutingError (No route matches "/jquery.embedly.js"):

 Rendered /Library/Ruby/Gems/1.8/gems/actionpack-3.0.4/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (1.1ms)

I include jquery.embedly.js in my application layout though…

Answer 1

It looks like the error is that it’s not loading the Embedly jQuery script. Is that resolved? Alternatively you can load the Embedly jQuery script from our hosted http://scripts.embed.ly/jquery.embedly.js page.