paoda
/
polyglot
mirror of https://github.com/beatriceo/polyglot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fixed issue where calling modal was only appeared for the first contact in list

This commit is contained in:
Beatrice Olivera 2018-09-01 20:23:53 +01:00
parent 1b7a58e4bf
commit 6a1992a29f
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/components/modal.js
View File

@ -1,12 +1,15 @@
const triggerModalEvent = () => { const triggerModalEvent = () => {
const btn = document.getElementById("modalTrigger");
const modal = document.getElementById("myModal");
const buttons = document.querySelectorAll(".modalTrigger");
buttons.forEach(btn => {
if (btn) { if (btn) {
btn.addEventListener('click', function(event) { btn.addEventListener('click', function(event) {
$('#myModal').modal('show'); const btnId = btn.getAttribute('data-user-id')
$("#myModal"+`${btnId}`).modal('show');
}); });
} }
})
} }
export { triggerModalEvent } export { triggerModalEvent }

6
app/views/pages/_contact.html.erb
View File

@ -16,19 +16,19 @@
</div> </div>
<div class="call" data-user-id="<%= contact.id %>"> <div class="call" data-user-id="<%= contact.id %>">
<!-- Calls establish_call in pages_controller --> <!-- Calls establish_call in pages_controller -->
<%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do %> <%= link_to establish_call_path(contact.id), remote: true, class: "modalTrigger", data: {'user-id': contact.id } do %>
<i class="fas fa-phone"></i> <i class="fas fa-phone"></i>
<% end %> <% end %>
</div> </div>
</div> </div>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal fade" id="myModal<%= contact.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper"> <div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center"> <div class="modal-dialog vertical-align-center">
<div class="modal-content modal-color"> <div class="modal-content modal-color">
<div class="modal-header"> <div class="modal-header">
<%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal" do %> <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do %>
<i class="fas fa-times-circle"></i> <i class="fas fa-times-circle"></i>
<% end %> <% end %>
<div class="container"> <div class="container">