title: Form has the wrong action when created by an ajax partial - Ruby
body: <p>I have a form that gets loaded by an ajax partial. When it gets swapped in, the form that loads on that ajax partial is targeting the wrong controller/url. I attempted to target the correct controller in a variety of ways, but it was always over-written to the same, incorrect controller/url.</p>
  
  <p>Additionally, the form loads correctly if it is loaded on page refresh - only when it is loaded by ajax does it target the incorrect controller.</p>
  
  <p>Here is what the form html looks like when it loads incorrectly:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form class="new_prediction" id="new_prediction" action="/predictions" accept-charset="UTF-8" data-remote="true" method="post"&gt;&lt;input name="utf8" type="hidden" value="✓"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is what the form html should look like, and what it does look like after page refresh: 
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form class="new_predictionend" id="new_predictionend" action="/predictionends" accept-charset="UTF-8" data-remote="true" method="post"&gt;&lt;input name="utf8" type="hidden" value="✓"&gt;</code></pre>
  </div>
  </div>
  
  My question is, why does the form target an incorrect controller "/predictions" when the form is loaded by ajax? The partial clearly shows that a new "Predictionend" model is the object for the form, and so should be targeting "/predictionends" like it does correctly when the page is refreshed.</p>
  
  <p>Here is the form partial that loads for both the page refresh and the ajax load:
  </p>
  
  <pre><code>&lt;%= form_for(Predictionend.new, remote:true) do |f| %&gt;
    &lt;div class="sidebar-open-close-comment-div"&gt;
     &lt;%= f.text_area :comment, placeholder: "Make a closing comment", class: "close-comment-textarea" %&gt;
    &lt;/div&gt; 
  
    &lt;div class="sidebar-close-button"&gt;
      &lt;%= f.submit "SUBMIT", class: "btn" %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  
  
  <p>This is the ajax file that loads the form:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.stockpage-sidebar-prediction').first().html("&lt;%= j render partial: 'predictions/prediction_end', locals: {prediction: @prediction} %&gt;");</code></pre>
  </div>
  </div>
  </p>
  
  <p>Controller that loads the ajax:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>class PredictionsController &lt; ApplicationController
  
    def create
  
      @prediction = @user.predictions.build(prediction)
      @prediction.save
                                                     
      respond_to do |f|
        f.js { 
          if invalid_start
           render 'shared/_error_messages.js.erb'
          else 
            render "predictions/create.js.erb"
          end
        }
      end
    end
  end                                               
                                                     </code></pre>
  </div>
  </div>
  </p>
  
  <p>Routes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  post    'predictions'                  =&gt;   'predictions#create'
    get     'predictions/:id'              =&gt;   'predictions#show'
    get     'predictions/hover/:id'        =&gt;   'predictions#hover'
  
  
    post    'predictionends'               =&gt;   'predictionends#create'
  
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be very much appreciated.</p>