passing values to bootstrap modal

Question

I am trying to pass values to my modal in html using JQUERY.

I have this:

<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#clientStatus" data-clientCurrentStatus="inactive">Change Client Status</a>
<script>
    $(function() {
        $('#clientStatus').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var clientCurrentStatus = button.data('clientCurrentStatus'); // Extract info from data-* attributes

            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            modal.find('#clientCurrentStatus').val(clientCurrentStatus);
        });
    });
</script>

and what I am trying to do is inside data-clientCurrentStatus i am passing the value. and then inside my modal I have this:

<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Current Status:</p>
              <input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
              <a href="/logout" class="btn btn-primary">Logout</a>
            </div>
          </div>
        </div>
      </div>

so as you can see, the id matches, and everything matches. I am not sure why it isn't working. I am importing the jquery tag like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

but nothing is working. how can i fix this?

Answer 1

I think there are some issues with what you can use for attribute names:

http://html5doctor.com/html5-custom-data-attributes/

    $(function() {
        $('#clientStatus').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var client_current_status = button.data('client_current_status');
            var modal = $(this);
            modal.find('#clientCurrentStatus').val(client_current_status);
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Current Status:</p>
              <input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
              <a href="/logout" class="btn btn-primary">Logout</a>
            </div>
          </div>
        </div>
      </div>
<button type = "button" class="btn btn-primary"  data-toggle="modal" data-target="#clientStatus" data-client_current_status="inactive">Change Client Status</button>