How to add muitple same ID with Javascript on click event for multiple buttons with same class

Question

I'm new with JQuery. I'm using the Silverstripe PHP. I've managed to get the on click event with multiple divs with the same classes but if I want have different image in the second button with same class and from the same ID. What is the solution for this problem?

I'm aware that it has to be different IDs for it to work but the each button as loop function so it has to be the same ID.

file.ss:

<div class="PosterButton">
   <button class="posterBtn button" id="myBtn" value="$ClassPosterID">
       <i class="fas fa-image"></i> View poster
   </button>
</div>
<div class="myModal modal" id="myModal">
   <div class="modal-content">
       <span class="close">&times;</span>
       <img src="image-1.jpg" class="modal-content" />
   </div>
</div>

<div class="PosterButton">
   <button class="posterBtn button" id="myBtn" value="$ClassPosterID">
       <i class="fas fa-image"></i> View poster
   </button>
</div>
<div class="myModal modal" id="myModal">
   <div class="modal-content">
       <span class="close">&times;</span>
       <img src="image-2.jpg" class="modal-content" />
   </div>
</div>

main.css:

.modal {
   display: none;
   position: fixed;
   z-index:9999;
   padding-top:60px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
}
.modal-content {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
}
.modal-content {
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
}

jQuery.js:

    var modal = document.getElementById('myModal');
    var span = document.getElementsByClassName("close")[0];
    $(document).ready(function() {
        $('.posterBtn').click(function(event) {
        event.preventDefault();
            modal.style.display = "block";
            });
    });
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }

The first button i clicked on is working fine when pops up with the first image but when i clicked on the second button, it works fine but pops up the same first ID with the first image. It should be showing the second ID with the second image.

What's the right way to get this working? am i doing it all wrong?

Mohamed-Yousef · Accepted Answer · 2019-05-02T10:15:35.650

If you decided to use jquery so use jquery don't combine pure javascript with jquery
Id should be unique so even if its from loop you can add id="myModal+' i '+" to add a number to the id .. if the loop in php use id="myModal.' i '."
The problem is you define the myModal by id and each time will catch the same/first modal .. you need to refer the modal to the button you clicking on

$(document).ready(function() {
   $('.posterBtn').click(function(event) {
       //event.preventDefault();
       var GetModal = $(this).closest('.PosterButton').next('.modal'); // get the next modal
       GetModal.show();  // show the next modal
   });
   $('.modal span.close').on('click', function(){  // modal close span
      $('.modal').hide(); // hide modal
   });

   // To close modal
   // when modal click close the modal
   $('.modal').on('click' , function(){
     $(this).hide();
   });
   // prevent the modal to close when clicking on the modal content div
   $('.modal-content').on('click' , function(e){
    e.stopPropagation();
   });
});

$(document).ready(function() {
   $('.posterBtn').click(function(event) {
       //event.preventDefault();
       var GetModal = $(this).closest('.PosterButton').next('.modal'); // get the next modal
       GetModal.show();  // show the next modal
   });
   $('.modal span.close').on('click', function(){  // modal close span
      $('.modal').hide(); // hide modal
   });
   
   // To close modal
   // when modal click close the modal
   $('.modal').on('click' , function(){
     $(this).hide();
   });
   // prevent the modal to close when clicking on the modal content div
   $('.modal-content').on('click' , function(e){
    e.stopPropagation();
   });
});

.modal {
   display: none;
   position: fixed;
   z-index:9999;
   padding-top:60px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
}
.modal-content {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   background : #fff;
}
.modal-content {
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="PosterButton">
   <button class="posterBtn button" id="myBtn" value="$ClassPosterID">
       <i class="fas fa-image"></i> View poster 1
   </button>
</div>
<div class="myModal modal" id="myModal-1">
   <div class="modal-content">
       <span class="close">&times;</span>
       <div>Poster 1</div>
       <img src="image-1.jpg" class="modal-content" />
   </div>
</div>

<div class="PosterButton">
   <button class="posterBtn button" id="myBtn" value="$ClassPosterID">
       <i class="fas fa-image"></i> View poster 2
   </button>
</div>
<div class="myModal modal" id="myModal-2">
   <div class="modal-content">
       <span class="close">&times;</span>
       <div>Poster 2</div>
       <img src="image-2.jpg" class="modal-content" />
   </div>
</div>

oh awesome, thanks so much for the explanation, and i have tried your code and it works how i want it to be. Took me ages to work it out but you have managed to make this so easy. Thank you. — SUTHERLANDesign, May 02 '19 at 10:03
@SUTHERLANDesign You can also read my updated answer I added the part to close the modal when click on it and prevent the click on the modal content .. Have a great day :-) — Mohamed-Yousef, May 02 '19 at 10:05
Oh didn't see the extra code when i commented at first. I've tested that code, doesn't work but that is okay as it works fine with out the extra code for to close the modal. Have a good evening. :D — SUTHERLANDesign, May 02 '19 at 10:13

score 1 · Answer 2 · answered May 02 '19 at 10:29

1

First of all an ID should be unique on the page.

As for the modals, the easiest way if you have the trigger and modal one after the other is by using next() that will get the immediately following sibling.

To know the exact button that has been clicked (received the event action) we will use this. In pseudo-code it will be, when we click on this button find the next element and show it.

I'v made an working example below based on your code:

https://jsfiddle.net/ahentea/8vjten5L/1/

answered May 02 '19 at 10:29

Andrei

535
6
10

Thanks for your answer, it seems it doesn't work for me when i've tried it, even though you've made an working example which works great. It needs to have
...
. Mohamed-Yousef's answer works for me for my website. I'll keep that in mind for next time. – SUTHERLANDesign May 02 '19 at 10:56
simply replace '.posterBtn' with '.PosterButton' – Andrei May 02 '19 at 15:44
My pleasure, glad to help :D – Andrei May 05 '19 at 22:09

score 0 · Answer 3 · answered May 02 '19 at 09:35

0

Since you are using JQuery, you can easily create a select that will point to your second PosterButton without having to deal with ids.

answered May 02 '19 at 09:35

Raphael St

661
8
23

How to add muitple same ID with Javascript on click event for multiple buttons with same class

3 Answers3