如何在Rails的局部中使用Javascript？

Question

I am trying to put a slider a popup that I am creating by rendering a partial in rails with AJAX. The popup is working just fine, but my Javascript does not seem to be having any effect.

This is essentially the code I have.

javascript

$(document).ajaxSuccess(function(event, xhr, settings) {
    $(xhr.responseText).appendTo('body').modal();
});
$('.flexslider').flexslider({
    animation: "slide"
});

popup

.col-md-6
    .flexslider
        %ul.slides
            %li
                %img(src="http://g-ecx.images-amazon.com/images/G/01/kindle/dp/2013/KT/feature-cs._V355642982_.jpg")
            %li
                %img(src="http://g-ecx.images-amazon.com/images/G/01/kindle/dp/2013/KT/feature-camera._V355723652_.jpg")
            %li
                %img(src="http://g-ecx.images-amazon.com/images/G/01/kindle/dp/2013/KT/feature-wifi._V355643083_.jpg")
            %li
                %img(src="http://g-ecx.images-amazon.com/images/G/01/kindle/dp/2013/KT/feature-cs._V355642982_.jpg")

controller

render partial: 'product', locals: {product: @product}, layout: false if request.xhr?

Answer 1

I think your JS may need to be called from a dom ready block in order to work.

This is what I do to include js in a convenient way. In my layout i yield to two code blocks: one for javascript tags and one for code to run in the dom ready block. So my layout looks like this:

#at the bottom of the body tag (inside it)

<%= yield :javascript_includes %>

<script type="text/javascript">
  $(function() {
     <%= yield :jquery_ready %> 
  });   
</script>   

This enables me to do add JS to my partials and templates like so:

<% content_for :javascript_includes do %>
  <% javascript_include tag "someLibrary.js" %>
<% end %>

and/or

<% content_for :jquery_ready do %>
  $("#foo").click(function(){ doStuff()});
<% end %>

These includes can be done anywhere in the templates/partials but my convention is to always put them at the top, to make them more obvious.