Блог

Привет, ребята

У меня возникли проблемы с передачей переменной ID для использования во всплывающем окне в HTML

это то, что я пытаюсь сделать

     <?php
    $sql = "select * from locations";
    $result = $conn->query($sql);
    
    while ($row = $result->fetch_assoc()){
    $locationID = $row['id'];
    
    <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal"> Show Listed Properties </button> 
// here i want to pass the locationID variable so that when the user clicks on the 
// button a pop up window appears displaying information based on the location id.
    
    }
    ?>
 

мое всплывающее окно выглядит следующим образом:

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                     
                      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                      Hi there, I am a Modal Example for Dashio Admin Panel.
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      
                    </div>
                  </div>
                </div>
              </div>
 

внутри всплывающего кода я буду выполнять SQL-запрос на основе переменной LocationID, а затем заполнять всплывающее окно результатами запроса.

в качестве альтернативы я мог бы просто создать новую страницу и передать идентификатор в качестве запроса get, но я чувствую, что это выглядит не так профессионально и требует больше времени.

может кто-нибудь указать мне правильное направление?

добавьте новый класс в кнопку и назовите его open-modal и используйте data-id следующим образом:

 <button type="button" class="btn btn-info btn-lg open-modal" data-toggle="modal" data-id="<?= $id; ?>" data-target="#myModal">Show Listed Properties</button>
 

в конце файла вы можете вызвать его следующим образом:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>    
<script>
    $(document).on("click", ".open-modal", function () {
         var id = $(this).data('id');
         alert(id) 

        /*
        proceed with rest of modal using the id variable as necessary 
        */
    });
    </script>
 

надеюсь, я хорошо понимаю вашу проблему.