CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrapmodal-dialog
Stian Instebo
Stian Instebo

Reputation: 652

Can't use one modal with multiple buttons

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:

enter image description here

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?

Upvotes: 1

Views: 5813

Answers (1)

nyedidikeke
nyedidikeke

Reputation: 7618

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.

Upvotes: 1

Related Questions