Question 229132 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JQuery: multiple div's to show in single modal on specific ID from table

I created multiple paragraphs to show in single modal on specific Class from button inside the table. I created class "dugme_${kurs.id}" in json append and that works fine. Every button have their own unique class name.

<td><button id="` + kurs.details + `" class="btn button_kurs dugme_${kurs.id}">
        Details</button></td>

Here’s code for function:

 $(document).ready(function() {
                let m1 = document.querySelector("#modal1text");
                let m2 = document.querySelector("#modal2text");
                let m3 = document.querySelector("#modal3text");
                let m4 = document.querySelector("#modal4text");
                let m5 = document.querySelector("#modal5text");
                let m6 = document.querySelector("#modal6text");

                $('.dugme_1').click(function() {
                    $(m1).css('display','block');
                });
                $('.dugme_2').click(function() {
                    $(m2).css('display','block');
                });
                $('.dugme_3').click(function() {
                    $(m3).css('display','block');
                });
                $('.dugme_4').click(function() {
                    $(m4).css('display','block');
                });
                $('.dugme_5').click(function() {
                    $(m5).css('display','block');
                });
                $('.dugme_6').click(function() {
                    $(m6).css('display','block');
                });
                $('#modalInfo').on('hidden.bs.modal', function () {
                    $('#modal1text, #modal2text, #modal3text, #modal4text, #modal5text, #modal6text').css('display','none');
                  })
            });

Style is applied on every paragraf style="display:none;"
For some reason text is not displayed from #modal1text on first click when open modal. Only on second. I’m still learning to code and I got stuck on this. Tried to google answer but nothing like this that I can found.

Tags:

2

Answers


  1. 0

    Give each a unique ID or use data-attribute to target the modal. You can even have one modal and change the content but we need to see more HTML to decide on that

    Also be consistent. Why use document.getElementById AND $("#…") – EITHER use jQuery OR use plain JS.

    $('#modalInfo').on('hidden.bs.modal', () =>  $(".dugme").hide())

$(".dugme").on("click", function() {
  $(`#${this.dataset.target}`).show()
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="btn button_kurs dugme" data-target="modal1text">Details M1</button>
<button class="btn button_kurs dugme" data-target="modal2text">Details M2</button>
<button class="btn button_kurs dugme" data-target="modal3text">Details M3</button>

<div id="modal1text" hidden>M1 Details</div>
<div id="modal2text" hidden>M2 Details</div>
<div id="modal3text" hidden>M3 Details</div>

    Actually if you are using bootstrap modals, then your code should look different since they have built-in support to target the relevant modal from code in the button
    https://getbootstrap.com/docs/5.3/components/modal/

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can try this (i commented my code)

    $(document).ready(function() {
    // get the click event on all elements with class name starting by "dugme"
    $('button[class*=dugme]').click(function() {
      // get the current number present in class name
      var getBtnClassID = $(this).attr('class').match(/d+/); 
      // display the associated modal
      $("#modal" + getBtnClassID + "text").css('display','block');
    });

    $('#modalInfo').on('hidden.bs.modal', function () {
        // hide all modal
        $('[id*=modal]').css('display','none');
    })
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td><button id=".dugme_1" class="btn button_kurs dugme_1">Details</button></td>
<td><button id=".dugme_2" class="btn button_kurs dugme_2">Details</button></td>
        
<div id="modal1text" style="display:none">modal1text</div>
<div id="modal2text" style="display:none">modal2text</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search