model 揭示了基礎 zurb 中 ajax 調用的問題

Question

我正在嘗試在我的應用程序中顯示 ajax 調用 model 。

能夠在 url 中傳遞動態 ID，但每次點擊時它只顯示最后一個 model（沒有 ajax 調用）

我用 ajax-all 嘗試了以前的解決方案Reveal Modal 揭示了循環迭代中的最后一個值 Foundation-zurb 問題

但我無法在 javasript 文件中傳遞動態 id。

model 顯示參考鏈接：- https://codepen.io/sujayjaju/pen/akAYzP?editors=1010

當前代碼在每次顯示單擊時顯示一個 model 我也嘗試了最后一個解決方案（提到的網址），但它不適用於 ajax 調用。

應用程序.js

  $(document).on('open.zf.reveal', "#exampleModal1", function (e) {
var $modal = $(this);
var ajax_url = $modal.data("ajax-url");
if (ajax_url) {
  $modal.html("Now Loading: "+ajax_url);
  $.ajax(ajax_url).done(function (response) {
    $modal.html(response);
  });
}
});

索引.html.erb

<% @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 data-ajax-url="http://0.0.0.0:3000/project_sites/<%= project_site.id %>/attendances/">

         <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 %>

Answer 1

您可以從我的應用程序中引用這個特定的提交，這很好。

Javascript 代碼

$(document).on('turbolinks:load', function() {
  $(document).foundation();
  $('[data-open="ajax-reveal"]').on('click', function(e) {
    e.preventDefault();
    $.ajax({
      url: $(this).data('url'),
      success: function(result) {
        $(".reveal-content").html(result);
      },
      error: function(result) {
        $(".reveal-content").html('Error loading content. Please close popup and retry.');
      }
    });
  });
});

HAML 代碼

          #ajax-reveal.reveal{'data-reveal': true, 'aria-labelledby':"modalTitle", 'aria-hidden': true, role: "dialog"}
            .reveal-content
            %button.close-button{'aria-label': "Close modal", type: :button, data: {close: true}}
              %span{'aria-hidden': true} ×

我的鏈接看起來像這樣

<% @project.project_sites.where(submission_status: true).order("created_at desc").each do |project_site| %>
  <%- 'YOUR OTHER CODE' %>
  <%= link_to 'View', 'javascript:void(0)', class: 'button OTHER-CLASSES', data: {open: 'ajax-reveal', url: project_site_path(project_site)} %>
<% end %>

我用來顯示的一些方便的助手是

  def close_reveal_button(text = 'Cancel')
    content_tag(:div, text, class: 'button warning', data: {close: ''})
  end
  def link_to_reveal(content, url, classes)
    link_to content, 'javascript:void(0)', class: classes, data: {open: 'ajax-reveal', url: url}
  end

你可以在這里推薦更多的助手

Answer 2

剛剛找到了解決這個問題的簡單方法：-（使用內部 jquery）

索引.html.erb

<% @project.project_sites.where(submission_status: true).order("created_at desc").each do |project_site| %>
  <tr>
       <td>
           <% site_modal_id = "site_modal_#{project_site.id}" %>

                  <div class="full reveal" id="<%= site_model_id %>" data-reveal data-ajax-url="http://0.0.0.0:3000/project_sites/<%= project_site.id %>/attendances/">

              <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>

<script>
$(document).on('turbolinks:load', function() {
  $(function(){ $(document).foundation(); });

  $(document).on('open.zf.reveal', "#<%= site_modal_id %>", function (e) {
    var $modal = $(this);
    var ajax_url = $modal.data("ajax-url");
    if (ajax_url) {
    $modal.html("Now Loading: "+ajax_url);
    $.ajax(ajax_url).done(function (response) {
      $modal.html(response);
    });
    }
  });

});
</script>
<%end %>