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

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

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

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

@ -16,19 +16,19 @@
</div>
<div class="call" data-user-id="<%= contact.id %>">
<!-- 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>
<% end %>
</div>
</div>
<!-- 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="modal-dialog vertical-align-center">
<div class="modal-content modal-color">
<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>
<% end %>
<div class="container">