【问题标题】:Reveal Modal is revealing last value in loop iteration Foundation-zurb issueReveal Modal 揭示了循环迭代 Foundation-zurb 问题中的最后一个值
【发布时间】:2020-08-10 10:33:36
【问题描述】:

我在 index#action 中使用 .each in rails project_site 基础模型显示在每一行但是

问题是模型显示仅在每个模型显示中显示最后一个 project_site 的 ID。我想透露应该透露当前project_site的ID。

<% @project.project_sites.where(submission_status: true).order("created_at desc").each do |project_site| %>
  <tr>
      <td><%= project_site.user.name %></td>

       <td>

          <div class="full reveal" id="exampleModal1" data-reveal>
              <%= project_site.id %>
              <button class="close-button" data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
              </button>
           </div>

            <p><button class="button small warning button-margin-top fi-eye" data-open="exampleModal1"> View</button></p>


        </td>
  </tr>

<% end %>

【问题讨论】:

  • @dbugger 这是有问题的拼写错误。问题仍然相同,最后一个project_site id 在每个模型上都显示出来

标签: css ruby-on-rails zurb-foundation zurb-reveal


【解决方案1】:

每个模态都有相同的 id,所以最后一个总是获胜。更改视图,使每一行的模式都有自己的 id,打开按钮调用正确的...

<% @project.project_sites.where(submission_status: true).order("created_at desc").each do |project_site| %>
  <tr>
      <td><%= project_site.user.name %></td>

       <td>
          <% site_modal_id = "site_modal_#{project_site.id}" %>
          <div class="full reveal" id="<%= site_modal_id %>" data-reveal>
              <%= project_site.id %>
              <button class="close-button" data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
              </button>
           </div>

            <p><button class="button small warning button-margin-top fi-eye" data-open="<%= site_modal_id %>"> View</button></p>


        </td>
  </tr>

<% end %>

请注意,如果您有很多项目站点,您的页面会变慢,最好使用单一模式来传递 cick 上的数据。

【讨论】:

  • 我可以通过 ajax 调用大量 project_site 来做到这一点,或者可以在模型显示上呈现页面
  • 这取决于你。你可以重定向到一个完整的页面,直接打开一个模态,或者通过 ajax。
猜你喜欢
  • 1970-01-01
  • 2014-12-15
  • 2020-12-01
  • 2013-08-30
  • 2014-02-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多