Can't use one modal with multiple buttons

Question

I'm working on a webpage where I have a table, which is populated by JSON.

On the right side of the table I have three (3) call to action buttons as seen in the screenshot below:

When I click on the "vis" button on the first row, it opens its corresponding modal.

However, when I click on the subsequent "vis" buttons (second row downwards), nothing happens.

Below is my code (PHP loop so as to adding more rows depending on available data from MySql DB):

<tr>
    <td><? echo $row['filename']; ?></td>
    <td><? echo $row['cat']; ?></td>
    <td><? echo $row['size']; ?></td>
    <td><? echo $row['usr']; ?></td>
    <td><? echo $row['date']; ?></td>
    <td width="18%">
        <a href="#" class="btn btn-primary" id="openItem" data-toggle="modal" href="#show-dialog" onclick="window.location.hash = '<? echo $row['id'];?>';">Vis</a>
        <a href="#" class="btn btn-success" id="downloadItem" download="">Last ned</a>
        <a href="#" class="btn btn-danger" id="deleteItem" data-toggle="modal" href="#error-dialog" onclick="window.location.hash = '1';">Slett</a>
    </td>
</tr>

My modal (HTML code):

<div class="modal fade" id="show-dialog" style="height: auto; max-height: 500px;">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">x</a>
            <h3>video_raw01.raw</h3>
        </div>
        <div class="modal-body">
            <video width="100%" controls>
                <source src="mov_bbb.mp4" type="video/mp4">
                <source src="mov_bbb.ogg" type="video/ogg">
                Your browser does not support HTML5 video.
            </video> <br>
            <table>
                <tr>
                    <td><a href="#">url:path/to/video/raw</a></td>
                </tr>
            </table>

        </div>
        <div class="modal-footer" style="position: absolute; bottom: 0; float: right; width: 100%;">
            <a href="#" class="btn btn-success btn-modal btn-cancel"  data-dismiss="modal">Last ned</a>
            <a href="#" class="btn" data-dismiss="modal">Lukk</a>
        </div>
    </div>

And my JavaScript code (using the jQuery library):

<script>
    $(document).ready(function(){

        $("#openItem").on("click", function(){ $("#show-dialog").modal();});
        $("#deleteItem").on("click", function(){ $("#error-dialog").modal();});
        $('#show-dialog').on('show.bs.modal', function(e) {
            var hash = window.location.hash;   
            console.log("LOG: "+hash);

        });
</script>

Is there any reason why click actions on subsequent row buttons won't open their respective corresponding modals?

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

TL;DR

Is there any reason why click actions on subsequent row buttons won't open their respective corresponding modals?

Yes; because ids MUST be unique.

In case of several occurrences of the same id (which shouldn't be), only the very first one will be usable and available for manipulations.

Use classes instead of id to resolve it as in: class="openItem" in place of id="openItem".

Subsequently, your scripts should be edited as well to reference the appropriate modals as such as captured below:

<script>
    $(document).ready(function(){

        $(".openItem").on("click", function(){ $("#show-dialog").modal();});
        $(".deleteItem").on("click", function(){ $("#error-dialog").modal();});
        $('.show-dialog').on('show.bs.modal', function(e) {
            var hash = window.location.hash;   
            console.log("LOG: "+hash);

        });
</script>

Take a look at this answer, and further, this one too for a good insight on the difference between a class and an id so as to understand the nature of the challenge you are facing: only the first occurence of the id gets affected.

edited May 23 '17 at 12:24

Community

1
1

answered Jan 10 '17 at 10:09

nyedidikeke

6,899
7
44
59

That wont work, since im already using a class to define the styles. I tried changing it to a class, didnt work – Stian Instebo Jan 10 '17 at 10:11
@StianInstebo: you should use a different class then. **ID**s supposed to be unique. It should definitely work. Let me know the outcome. – nyedidikeke Jan 10 '17 at 10:14
Thank you, that worked, well, then i need to find a new way to bootstrap theme my links. Thanks :) – Stian Instebo Jan 10 '17 at 10:18
@StianInstebo: just updated my answer with a reference for an insight into the nature of the challenge you are facing. – nyedidikeke Jan 10 '17 at 10:21
Thanks, what i did was: 'class="openItem btn btn-primary"', this worked – Stian Instebo Jan 10 '17 at 10:34

Can't use one modal with multiple buttons

1 Answers1