i am trying to make ajax call with model reveal in my application.
able to pass dynamic id in url but it reveals only last model (without ajax-call) on each click
i tried previous solution with ajax-all Reveal Modal is revealing last value in loop iteration Foundation-zurb issue
but i am not able to pass dynamic id in javasript file.
model reveal reference link:- https://codepen.io/sujayjaju/pen/akAYzP?editors=1010
current code reveals one model on each reveal click i tried last solution as well(url mentioned) but it doesn't worked with ajax-call.
application.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">×</span>
</button>
</div>
<p><button class="button small warning button-margin-top fi-eye" data-open="exampleModal1"> View</button></p>
</td>
</tr>
<%end %>
You can refer this particular commit from my application which is well.
Javascript Code
$(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 Code
#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} ×
My Links look like this
<% @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 %>
Some handy helpers that I use for reveal are
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
You can refer more helpers here
just found easy solution to this problem that worked:- (with internal 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">×</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 %>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.