Click here to Skip to main content
14,873,856 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi everyone!

I have been struggling with this Bootstrap modal for a few days now. I would like the toggle button to cast user id in url and to open a modal with the data for the user. So far I could either cast user id in url with the toggle button when I set the button type to "submit", or open a modal with the user data after writing the id in url manually, when changing the button type to "button".

<form action = "admin_usersearch.php?id='.$row['id'].'" method="POST">
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">class="fas fa-user-edit"></button>
</form>


<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Edit user</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

MODAL CONTENT
....
<script type="text/javascript">
  var myModal = document.getElementById('myModal')
  var myInput = document.getElementById('myInput')

  myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
  })
</script>

I really don't understand what I'm doing in terms of javascript, I'm very new to it. I'm not sure what other code is relevant to this issue. If anything is missing, just let me know, and I'll paste it here.

Any help is greatly appreciated!

What I have tried:

Searched the internet for solution for hours.
I have tried to wrap the button with type "button" in tag, which just cast id in url.
I tried to add javascript onclick event with a link, which didn't work either (solution also found online).
Posted
Updated 30-Mar-21 3:38am

1 solution

I found a solution I was looking for!

I removed the form tag from around the button, added #userModal id to the modal, and added data-id to the modal toggle button:

<button type="button" class="btn btn-primary userinfo" data-id='."$id".'>class="fas fa-user-edit"></button>


and used following javascript:

<script type="text/javascript">
$(document).ready(function(){
  $('.userinfo').click(function(){
    var id = $(this).data('id');

    $.ajax({
      url: 'admin_useredit.php',
      type: 'post',
      data: {id: id},
      success: function(response){
        $('.modal-body').html(response);

        $('#userModal').modal('show');
      }
    });
  });
});

</script>


where
admin_useredit.php
contains the dynamic output I'd like to see in the modal.

I used Bootstrap JS and jQuery libraries.
   
v4

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900