How to transmit a Rails variable to the jQuery function?

I'm making very simple ROR (rails 2.3.5) application and using jQuery plugin jRails. The idea is to lunch modified in jQuery youtube player, which will play random videos from ror's controller's list.

controller.rb

    def show
    @clip = Video.find(:all, :select =>'link', :order => 'RANDOM()', :limit => 1).map(&:link)
    respond_to do |format|
      format.html 
     end
  end

show.html.erb

<di开发者_运维知识库v id="random">
<%=@clip%>
</div>

The link here is just a random youtube link for example. The question for lame me is how to get this variable in this jQuery function?

application.js

 $(document).ready(function(){
    $('#player').youTubeEmbed("http://www.youtube.com/watch?v=ZDFlmxmBne8")

});

Would be very thankful for any help.

Leave your rails code as is and in jQuery use:

$(document).ready(function(){
  $('#player').youTubeEmbed($('#random').text())
});

For enhanced accessibility I'd change the erb to:

<div id="random">
<%=link_to h(@clip), h(@clip) %>
</div>

and then the js:

$(document).ready(function(){
  $('#player').youTubeEmbed($('#random a').attr('href'));
  $('#random').hide();
});

Assuming that the variable contains the URL, like this:

$(document).ready(function(){
    $('#player').youTubeEmbed("<%=escape_javascript(@clip)%>");
});

(Sorry, missed the fact that the JavaScript was not in the same file as the HTML -- as well it shouldn't be!)

Assuuming the variable contains the URL, if you don't want the URL shown, you can embed it in a page variable like so (replace the div code in show.html.erb with the following):

<script type='text/javascript'>
window.myStuff = {
    clipUrl: "<%=escape_javascript(@clip)%>"
};
</script>

...(or

<script type='text/javascript'>
var myStuff = {
    clipUrl: "<%=escape_javascript(@clip)%>"
};
</script>

...which is very nearly the same thing).

...and then you can use it like this:

$(document).ready(function(){
    $('#player').youTubeEmbed(window.myStuff.clipUrl);
});

When outputting a variable's value in this way, you need to ensure that what gets written out ends up being valid JavaScript. So for instance, if the @clip variable contains a " or a \, you'll need to ensure that the " is turned into \" and that any lone backslash is turned into \\. Jakub Hampl helpfully pointed out the escape_javascript function for this, which I've edited into the code examples.

Doing this that means we're putting a new symbol on window. I made our new symbol an object so that if we need to do this with other things, we can include them in that same object so we don't end up with symbols all over the place (creating lots of global symbols — which is to so, window properties — tends to become a maintenance issue, best avoided). So for instance, if you had two clips:

<script type='text/javascript'>
window.myStuff = {
    someNiftyClip:      "<%=escape_javascript(@clip)%>",
    someOtherNiftyClip: "<%=escape_javascript(@anotherClip)%>"
};
</script>

Off-topic: In the line calling youTubeEmbed, note I added a semicolon at the end. Best not to rely on JavaScript's semicolon insertion.

You could put the variable in a hidden field, then you could use it in the function like $('#hiddenFieldID').val();