title: Sidebar with bootstrap modal do not update
body: <p>I am new to ruby on rails, I have been recommended to using a sidebar so that on most pages it will show what I want. I currently have an application on its own page called Todo List. It simply let you create a task and displays the tasks. It runs on its own page. Now I want to move that app and let it function in my sidebar. I have implemented my sidebar as follow. </p>
  
  <pre><code>/views/layouts/application (in body)
  &lt;%= yield :sidebar %&gt;
  
  /views/myapp1/index
  &lt;% content_for(:sidebar) do %&gt;
   &lt;% render :partial =&gt; "layouts/sidebar" %&gt;
  &lt;% end %&gt;
  
  
  /views/layouts/_sidebar
   &lt;% if logged_in? %&gt;
    &lt;div id="mySidenav" class="sidenav"&gt;
  
    &lt;div class="row", id="container_todo_lists"&gt;
     &lt;%= render @todo_lists %&gt;
    &lt;/div&gt;
  
    &lt;div class="links" data-toggle="modal" data-target="#mynewtodo_list"&gt;
     &lt;%= link_to('New Todo List', 'javascript:;', :id =&gt; :random) %&gt;
    &lt;/div&gt;
  
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;×&lt;/a&gt;
   &lt;/div&gt;
  
  &lt;span style="font-size:30px;cursor:pointer" onclick="openNav()"&gt;☰ Todo List&lt;/span&gt;
  &lt;script&gt;
   function openNav() {document.getElementById("mySidenav").style.width = "250px";}
  
   function closeNav() {document.getElementById("mySidenav").style.width = "0";}
  &lt;/script&gt;
  
  &lt;% end %&gt; 
  
  &lt;!-- Modal  create action --&gt;
    &lt;%= form_for(@todo_list, remote: true) do |f| %&gt;
    &lt;div class="modal fade" id="mynewtodo_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&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-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
            &lt;h4 class="modal-title" id="myModalLabel"&gt;Todo&lt;/h4&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-body"&gt;
            &lt;div class="field"&gt;
              &lt;%= f.label :title %&gt;&lt;br&gt;
              &lt;%= f.text_area :title, class: "form-control todo_list_title" %&gt;
            &lt;/div&gt;
            &lt;div class="field"&gt;
              &lt;%= f.label :description %&gt;&lt;br&gt;
              &lt;%= f.text_area :description, class: "form-control todo_list_content" %&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="modal-footer"&gt;
            &lt;%= submit_tag "Create", class: "btn btn-primary" %&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal" id="mynewtodo_listclose"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;% end %&gt;
  &lt;!-- Modal --&gt;
  
  
  /views/todo_lists/_todo_list.html.erb
  &lt;div class="text-center" id="todo_list_&lt;%= todo_list.id %&gt;"&gt;
  
                  &lt;h3 class="panel-title"&gt;&lt;%= todo_list.title %&gt;
                    &lt;sup style="color: #3BB2D6; position: absolute; top: 5px; right: 15px; text-align:right;"&gt;
                        (&lt;%= time_ago_in_words(todo_list.created_at) %&gt;)
                    &lt;/sup&gt;
                  &lt;/h3&gt;
  
                  &lt;p&gt;&lt;%= todo_list.description %&gt;&lt;/p&gt;
  
                  &lt;div class="row" role="group"&gt;
                      &lt;div class="links1" data-toggle="modal" data-target="#myupdatetodo_list_&lt;%= todo_list.id %&gt;"&gt;
                        &lt;%= link_to('Edit', 'javascript:;', :id =&gt; :random) %&gt;
                      &lt;/div&gt;
  
                      &lt;div class="links1" data-toggle="modal" data-target="#myitemtodo_list_&lt;%= todo_list.id %&gt;"&gt;
                        &lt;%= link_to('Show', 'javascript:;', :id =&gt; :random) %&gt;
                      &lt;/div&gt;
  
                      &lt;div class="links1"&gt;
                        &lt;%= link_to 'Destroy', todo_list, method: :delete, remote: true %&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>        &lt;!-- Modal - update posts --&gt;
                &lt;%= form_for(todo_list, :method =&gt; :put, remote: true) do |f| %&gt;
                &lt;div class="modal fade" id="myupdatetodo_list_&lt;%= todo_list.id %&gt;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&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-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                      &lt;h4 class="modal-title" id="myModalLabel"&gt;Edit&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
  
                    &lt;div class="field"&gt;
                      &lt;%= f.label :title %&gt;&lt;br&gt;
                      &lt;%= f.text_area :title, class: "form-control" %&gt;
                    &lt;/div&gt;
                    &lt;div class="field"&gt;
                      &lt;%= f.label :description %&gt;&lt;br&gt;
                      &lt;%= f.text_area :description, class: "form-control" %&gt;
                    &lt;/div&gt;
  
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                      &lt;button type="button" id="myupdatebutton_&lt;%= todo_list.id %&gt;" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;%= submit_tag "Update", class: "btn btn-primary" %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;% end %&gt;
          &lt;!-- Modal --&gt;
  
          &lt;!-- Modal - item posts --&gt;
                &lt;%= form_for(todo_list, :method =&gt; :put, remote: true) do |f| %&gt;
                &lt;div class="modal fade" id="myitemtodo_list_&lt;%= todo_list.id %&gt;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&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-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                      &lt;h4 class="modal-title" id="myModalLabel"&gt;Items&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
  
  
  
                    &lt;h3&gt;&lt;%= todo_list.title %&gt;&lt;/h3&gt;
                    &lt;p&gt;&lt;%= todo_list.description %&gt;&lt;/p&gt;
  
  
  
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                      &lt;button type="button" id="myitembutton_&lt;%= todo_list.id %&gt;" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;%= submit_tag "Add Item", class: "btn btn-primary" %&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;% end %&gt;
          &lt;!-- Modal --&gt;
  </code></pre>
  
  <p>I had a gray screen problem where my modal is in a div narbar class and that cause the screen to only display the backgroup screen. So I found a solution on </p>
  
  <p><a href="https://stackoverflow.com/questions/21126617/bootstrap-3-modal-disappearing-below-backdrop-when-using-a-fixed-sidebar/21127348#21127348">Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar</a></p>
  
  <p>so I added the script to the views/layouts/</p>
  
  <pre><code> var checkeventcount = 1,prevTarget;
  $('.modal').on('show.bs.modal', function (e) {
      if(typeof prevTarget == 'undefined' || (checkeventcount==1 &amp;&amp; e.target!=prevTarget))
      {  
        prevTarget = e.target;
        checkeventcount++;
        e.preventDefault();
        $(e.target).appendTo('body').modal('show');
      }
      else if(e.target==prevTarget &amp;&amp; checkeventcount==2)
      {
        checkeventcount--;
      }
   });
  </code></pre>
  
  <p>So now the screen pops out and I can view the tasks. However, I cannot update the tasks. I tried 4 hours working around the problem and I think what happens now is that the update modal is not catching my update.js.erb file so it cannot edit the todo list. I think it has to do with being added to the "body" and somehow it is not making the connection to the js file in the todo list folder. I think I have to alter the script above somehow but not sure what. Any help is greatly appreciated thanks! </p>