[英]model reveal issue with ajax call in foundation-zurb
我正在尝试在我的应用程序中显示 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">×</span>
</button>
</div>
<p><button class="button small warning button-margin-top fi-eye" data-open="exampleModal1"> View</button></p>
</td>
</tr>
<%end %>
您可以从我的应用程序中引用这个特定的提交,这很好。
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
你可以在这里推荐更多的助手
刚刚找到了解决这个问题的简单方法:-(使用内部 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">×</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 %>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.