title: How to render partial on bootstrap modal using ajax
body: <p>I want to display sign in form on bootstrap modal when we click on the button in nav bar.Here is my code </p>
  
  <p>Here is my new.js.erb</p>
  
  <pre><code>$("#myModal").before("&lt;%= escape_javascript(render "new", :formats =&gt; [:html]) %&gt;");
  $("#myModal").modal('show');
  </code></pre>
  
  <p>Here is my _top_nav.html.erb</p>
  
  <pre><code>&lt;li&gt;&lt;%= link_to 'LOGIN', new_user_session_path, remote: true %&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Here is my _new.js.erb</p>
  
  <pre><code>&lt;!-- Button trigger modal --&gt;
  &lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
   Launch demo modal   
  &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby= "myModalLabel" aria-hidden="true" id="login"&gt;
  &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;times;&lt;/button&gt;
      &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
     &lt;div class="container"&gt;
      &lt;div class="well"&gt;
   &lt;div class="row"&gt;
         &lt;div class="col-lg-10"&gt;
        &lt;%= simple_form_for(resource, :as =&gt; resource_name, :url =&gt; session_path(resource_name), html: { class: 'form-horizontal', role: 'form' }) do |f| %&gt;
        &lt;h1 id="h1id"&gt;Member Login&lt;/h1&gt;
       &lt;legend&gt;
       &lt;h4&gt;If you are not a member yet please become a member &lt;%= link_to 'here', new_user_registration_path %&gt; to Sign In&lt;/h4&gt;&lt;/legend&gt;
      &lt;%= f.input :email, :required =&gt; false, :autofocus =&gt; true, placeholder: ' Email', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'}  %&gt;
  
      &lt;%= f.input :password, :required =&gt; false, placeholder: 'Password', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'}  %&gt;
      &lt;%= f.button :submit, "Sign in", style:"margin-left:17%", class:"btn btn-primary"  %&gt;
  
  &lt;% end %&gt;
     &lt;/div&gt;
     &lt;div class="col-lg-2"&gt;
       &lt;%= image_tag('logolatinfoods-01.png', size: '300x70', class: 'logo-style') %&gt;
     &lt;/div&gt; 
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-default"   data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.modal-content --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I am unable to understand where i am making mistake.Ajax call is working but modal is not displaying.I am new to ajax.Can any one explain what went wrong here.</p>