Ruby on Rails jQuery: Toggle not working

Question

Я пытаюсь создать кнопку, которая показывает/скрывает div. Это выглядит относительно легко, но всякий раз, когда я нажимаю эту кнопку, он просто обновляется, и когда я все время нажимаю на него, он скрывает большую часть моей страницы. Вот что я до сих пор. Кроме того, я не знаю, если это имеет значение, но я использую основу для большинства CSS

application.js

$(function() { 
    $(document).foundation(); 
}); 

$(document).ready(function() { 

    $('#message_button').click(function() { 
     $("#messages").toggle(); 
    }); 

}); 

_userindex.html

<div class="row"> 
     <div class="small-12 columns new-button"> 
     <%= link_to 'New Job', new_job_path, class: 'button' %> 
     </div> 
    </div> 

    <div class="section-container auto" data-section> 
     <section> 
     <p class="title" data-section-title><a href="#panel1">Active Jobs</a></p> 
     <div class="content" data-section-content> 
      <% if @active.present? %> 
      <ul> 
       <% @active.each do |job| %> 
       <li class='panel'> 

        <div class="row"> 
        <div class="small-12 columns"> 
         <div class="row"> 
         <div class="large-6 columns"> 
          <span id="location"><strong>location</strong>: <%= job.location %></span> 
         </div> 
         <div class="large-6 columns"> 
          <span id="status"><strong>status</strong>: <%= job.status %></span> 
         </div> 
         </div> 
         <div class='light panel bottom'> 
         <strong>job: <%= link_to job.name, job %></strong><br> 
         <%= job.description %> 
         </div> 
        </div> 
        </div> 

        <div class="row job-buttons"> 
        <div class="small-6 columns"> 
    MESSAGES BUTTON -->>> <%= link_to 'messages', '', class: 'button small secondary', id: "message_button" %> 
        </div> 
        <div class="small-6 columns"> 
         <%= link_to 'cancel', job, method: :delete, data: {confirm: 'Are you sure?'}, class: 'button small alert' %> 
        </div> 
        </div> 

        <br /> 


I WANT TO HIDE THIS ENTIRE DIV ---->>>> <div id="messages"> 
        <div class="row"> 
         <div class="small-12 columns"> 
         <div class="panel"> 
          <%= form_for(@message) do |f| %> 
          <%= f.label :body, "Description" %> 
          <%= f.text_area :body %> 
          <%= f.hidden_field :job_id, value: job.id %> 
          <%= f.submit 'Create message', class: 'button small secondary' %> 
          <% end %> 
         </div> 
         </div> 
        </div> 

        <% jobs_messages = job.messages %> 
        <% if jobs_messages.present? %> 
         <ul> 
         <% jobs_messages.each do |m| %> 
         <% if m.user_id.present? %> 
          <% user = m.user %> 
         <% else %> 
          <% user = m.runner %> 
         <% end %> 
          <li class='panel'> 
          <div class='row'> 
           <div class='small-12 columns'> 
           <p> From: <%= user.login %> </p> 
           <p> Body: <%= m.body %> 
           </div> 
          </div> 
          </li> 
         <% end %> 
         </ul> 
        <% else %> 
         <div class="empty panel"> 
         <p>no messages at the moment</p> 
         </div> 
        <% end %> 
        </div> 

       </li> 
       <% end %> 
      </ul> 
      <% else %> 
      <div class="empty panel"> 
       <p>no active jobs at the moment</p> 
      </div> 
      <% end %> 
     </div> 
     </section> 
     <section> 
     <p class="title" data-section-title><a href="#panel2">Completed Jobs</a></p> 
     <div class="content" data-section-content> 
      <% if @completed.present? %> 

      <% else %> 
      <div class="empty panel"> 
       <p>no completed jobs yet</p> 
      </div> 
      <% end %> 
     </div> 
     </section> 
    </div> 

Я пытаюсь к $() .click к кнопке link_to с id "message_button". Всякий раз, когда нажимается эта кнопка/ссылка, я хочу, чтобы она отображала/скрывала div-сообщения.

Я новичок в jQuery, рельсах и фундаменте, поэтому я оставил большую часть кода на всякий случай. Но я отметил message_button и div div, чтобы помочь вам лучше найти его.

Answer 1

2 проблемы:

1. Она смотрит на меня, как будто у вас есть плохой случай из «нескольких идентификаторов»!
2. Вы не предотвращаете поведение ссылки по умолчанию. (поэтому, когда вы нажимаете на нее, страница обновляется или перемещается)

Проблема №2 проста: позвоните по телефону preventDefault() (пример использования ниже).

Проблема № 1 немного сложнее ...

Вы создаете <li> содержание в пределах цикла, внутри каждой из этих <li> тегов есть элементы с идентификаторами #messages и #message_button. Несколько экземпляров идентификатора на той же странице: не разрешено. Если вы хотите, вы можете использовать class es вместо id, так как вы можете иметь несколько экземпляров класса.

Однако переход от идентификаторов к классам не будет устранять вашу проблему, как если бы вы использовали классы, вы просто будете переключаться со всеми сообщениями при нажатии любой кнопки сообщения.

Ссылаясь на этот вопрос here, вы можете легко получить индекс петли в шаблоне рельсов:

<% @active.each do |job, index| %> 
    Your template/html code here 
<% end %> 

Это открывает новую переменную index, которую можно использовать для украшения каждого из ваших сообщений и кнопок с индексом, чтобы затем указать, какое сообщение вы хотите показать.

---

Примечание: Я не уверен, если это лучший подход, но это должно работать. Прошло некоторое время с тех пор, как я использовал Rails, поэтому могут быть ошибки. Я включил этот код только для демонстрации возможных решений:

application.js:

$(function() { 
    $(document).foundation(); 
}); 

$(document).ready(function() { 

    //NOTE that I am selecting on a class here 
    $('.message_button').click(function(e) { 
     //You also need to prevent the default behaviour of 
     //the link. That is why the page keeps refreshing. 
     e.preventDefault(); 

     //get the index value I appended to this elements ID 
     var msgButtonIndex = $(this).attr("id").replace("message_button_",""); 

     //select and toggle the respective message 
     $("#messages_" + msgButtonIndex).toggle(); 
    }); 

}); 

_userindex.html:

<div class="row"> 
    <div class="small-12 columns new-button"> 
    <%= link_to 'New Job', new_job_path, class: 'button' %> 
    </div> 
</div> 

<div class="section-container auto" data-section> 
    <section> 
    <p class="title" data-section-title><a href="#panel1">Active Jobs</a></p> 
    <div class="content" data-section-content> 
     <% if @active.present? %> 
     <ul> 
      <% @active.each do |job,index| %> 
      <li class='panel'> 

       <div class="row"> 
       <div class="small-12 columns"> 
        <div class="row"> 
        <div class="large-6 columns"> 
         <span id="location"><strong>location</strong>: <%= job.location %></span> 
        </div> 
        <div class="large-6 columns"> 
         <span id="status"><strong>status</strong>: <%= job.status %></span> 
        </div> 
        </div> 
        <div class='light panel bottom'> 
        <strong>job: <%= link_to job.name, job %></strong><br> 
        <%= job.description %> 
        </div> 
       </div> 
       </div> 

       <div class="row job-buttons"> 
       <div class="small-6 columns"> 
        <%# Adding a "message_button" class and a decorated "message_button_{index}" ID! %> 
        <%= link_to 'messages', '', class: 'button small secondary message_button', id: "message_button_" + index.to_s %> 
       </div> 
       <div class="small-6 columns"> 
        <%= link_to 'cancel', job, method: :delete, data: {confirm: 'Are you sure?'}, class: 'button small alert' %> 
       </div> 
       </div> 

       <br /> 

       <%# decorating this ID too %> 
       <div id="messages_<%= index.to_s %>"> 
       <div class="row"> 
        <div class="small-12 columns"> 
        <div class="panel"> 
         <%= form_for(@message) do |f| %> 
         <%= f.label :body, "Description" %> 
         <%= f.text_area :body %> 
         <%= f.hidden_field :job_id, value: job.id %> 
         <%= f.submit 'Create message', class: 'button small secondary' %> 
         <% end %> 
        </div> 
        </div> 
       </div> 

       <% jobs_messages = job.messages %> 
       <% if jobs_messages.present? %> 
        <ul> 
        <% jobs_messages.each do |m| %> 
        <% if m.user_id.present? %> 
         <% user = m.user %> 
        <% else %> 
         <% user = m.runner %> 
        <% end %> 
         <li class='panel'> 
         <div class='row'> 
          <div class='small-12 columns'> 
          <p> From: <%= user.login %> </p> 
          <p> Body: <%= m.body %> 
          </div> 
         </div> 
         </li> 
        <% end %> 
        </ul> 
       <% else %> 
        <div class="empty panel"> 
        <p>no messages at the moment</p> 
        </div> 
       <% end %> 
       </div> 

      </li> 
      <% end %> 
     </ul> 
     <% else %> 
     <div class="empty panel"> 
      <p>no active jobs at the moment</p> 
     </div> 
     <% end %> 
    </div> 
    </section> 
    <section> 
    <p class="title" data-section-title><a href="#panel2">Completed Jobs</a></p> 
    <div class="content" data-section-content> 
     <% if @completed.present? %> 

     <% else %> 
     <div class="empty panel"> 
      <p>no completed jobs yet</p> 
     </div> 
     <% end %> 
    </div> 
    </section> 
</div>