title: Reloading page partially in Rails
body: <p>I'm developing a music website in Rails. The landing page is divided and has a search form where you can look up bands stored in the DB. Inside the other division I embedded a player reproducing some random videos. I want the search results being displayed on the same landing page. </p>
  
  <p>When I submit the form the page reloads and the player reloads also and starts playing a different video. What I actually want to achieve is that the player doesn't get interrupted while the search form is submitted. </p>
  
  <p>Don't know if and how this is possible the way I want it. If I got it right <a href="http://mrdanadams.com/2011/partials-ajax-form-submit-rails/" rel="nofollow">this link</a> describes one way to do that but I didn't get it to work.</p>
  
  <p>home controller</p>
  
  <pre><code>def index
    @bands = Band.search(params[:search]).order("name ASC")
    @random_band = Band.order("RANDOM()").limit(1) 
  end
  
  def preview
    @bands = Band.search(params[:search]).order("name ASC")
    render :partial =&gt; 'preview', :content_type =&gt; 'text/html'
  end
  </code></pre>
  
  <p>_preview.html.erb</p>
  
  <pre><code>&lt;table class="table"  
    &lt;tr&gt;
      &lt;th&gt;Title&lt;/th&gt;
      &lt;th&gt;Year&lt;/th&gt;
    &lt;/tr&gt;
    &lt;% @bands.each do |f| %&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;%= f.name %&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;% end %&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>home#index</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
  
      &lt;form class="navbar-form navbar-left" role="search"&gt;
        &lt;%= form_tag({:action =&gt; 'preview'}, id: "search-form", :remote =&gt; true, :'data-update-target' =&gt; 'update-container') do %&gt;
        &lt;%= text_field_tag :search, params[:search], placeholder: "Search Bands" %&gt;
        &lt;%= submit_tag "Search" %&gt;
        &lt;% end %&gt;
       &lt;/form&gt;
  
  
  
  &lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
  
      &lt;div id="update-container"&gt;
        &lt;%= @random_band.first.name %&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
        &lt;%= video_tag("#{@random_band.first.name}.mp4", size: "460x390",
          controls: true, autobuffer: true, autoplay: true) %&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>application.js</p>
  
  <pre><code>$(function() {
  /* Convenience for forms or links that return HTML from a remote ajax call.
  The returned markup will be inserted into the element id specified.
   */
  $('form[data-update-target]').live('ajax:success', function(evt, data) {
      var target = $(this).data('update-target');
      $('#' + target).html(data);
    });
  });
  </code></pre>
  
  <p>First problem: The form doesn't seem to find the preview action. </p>
  
  <p>Second problem: If I change the content of the index with the preview action it does find the preview action obviously but it doesn't render the search results inside the update-container. Instead it renders them as a whole new page.</p>
  
  <p>By the way, I know my way around Rails a bit but I've got absolutely no experience with Ajax.</p>