模型揭示了foundation-zurb中的ajax调用问题

Posted

技术标签:

【中文标题】模型揭示了foundation-zurb中的ajax调用问题【英文标题】:model reveal issue with ajax call in foundation-zurb 【发布时间】:2020-12-01 19:22:57 【问题描述】:

我正在尝试在我的应用程序中使用模型显示进行 ajax 调用。

能够在 url 中传递动态 id,但每次点击时只显示最后一个模型(没有 ajax 调用)

我用 ajax-all Reveal Modal is revealing last value in loop iteration Foundation-zurb issue尝试了以前的解决方案

但我无法在 javasript 文件中传递动态 ID。

模型揭示参考链接:-https://codepen.io/sujayjaju/pen/akAYzP?editors=1010

当前代码在每次显示点击时显示一个模型我也尝试了最后一个解决方案(提到了网址),但它不适用于 ajax-call。

应用程序.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);
  );

);

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

【问题讨论】:

请检查下面的答案,如果它不能解决问题,请告诉我:) 【参考方案1】:

您可以从我的应用程序中引用这个particular commit,这很好。

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 &times;

我的链接看起来像这样

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

您可以参考更多帮助者here

【讨论】:

你用过所有的sn-ps吗?因为它是一个工作代码。它在我的现场直播网站上使用。仅使用部分 sn-p 将不起作用。无论如何,很高兴你得到了解决方案【参考方案2】:

刚刚找到了解决这个问题的简单方法:-(使用内部 jquery)

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

【讨论】:

以上是关于模型揭示了foundation-zurb中的ajax调用问题的主要内容,如果未能解决你的问题,请参考以下文章

网络模型揭示物种进化的秘密

当支持向量机遇上神经网络:这项研究揭示了SVMGANWasserstein距离之间的关系

新的数学模型揭示,如何才能打出最牢的结

新的数学模型揭示,如何才能打出最牢的结

网络模型揭示社区防控与出行限制为什么有效

揭示宇宙的奥秘的公式: 标准模型 The Standard Model: The Most Successful Scientific Theory Ever...