How can I add a identification value to a modal box to identify which particular div the modal is being opened from - Jquery ajax

Swift
June 21, 2022
196 views
0 votes
2 Answers

I have three divs each looking like this

<div class="col-lg-6 col-md-6 col-sm-12 mb-4">
                    <div class="card">
                        <div class="card-body b-primary">
                            <div class="row justify-content-center">
                                <div class="col-md-5 col-sm-12">
                                    <img src="assets/images/gateway/61eedfd72289f1643044823.jpg" class="card-img-top w-100"
                                        alt="Stripe">
                                </div>
                                <div class="col-md-7 col-sm-12">
                                    <ul class="list-group text-center">
                                        <li class="list-group-item">Stripe</li>
                                        <li class="list-group-item">Limit : 50- 50000 USD</li>
                                        <li class="list-group-item"> Charge - 0 USD+ 0% </li>
                                        <li class="list-group-item">
                                            <button type="button" data-id="str"
                                                data-base_symbol="" class=" btn deposit cmn-btn w-100" data-toggle="modal"
                                                data-target="#exampleModal">
                                                Deposit</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

i have identified and differentiated each of the 3 divs using data-id now when the deposit button is clicked it opens up this modal below,

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-content-bg">
                <div class="modal-header">
                    <strong class="modal-title method-name text-white" id="exampleModalLabel">Input Deposit Amount</strong>
                    <a href="javascript:void(0)" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </a>
                </div>
                <form action=" {{ route('deposit_request') }}" method="post" class="register">
                   @csrf

                    <div class="modal-body">
                        <div class="form-group">
                           
                            <input type="hidden" name="method_code" class="edit-method-code" value="">
                            <x-jet-validation-errors class="mb-4" />
                            @include('flash-message')
                        </div>
                        <div class="form-group">
                            <label>Enter Amount:</label>
                            <div class="input-group">
                                <input id="amount" type="text" class="form-control form-control-lg" name="usdamt"
                                    placeholder="0.00" required="" autocomplete="off">
                                <div class="input-group-prepend">
                                    <span class="input-group-text currency-addon addon-bg">USD</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-md btn-danger" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn-md cmn-btn">Next</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

now my question is how do I get the data-id variable to the hidden input in the modal to be able to identify which particular payment method was/is been used to open the modal, I suppose it can be done with Ajax or JavaScript, but not being so diverse in this areas I can seem to get it sorted out and is there a better way to differentiate the divs without using data-id

Answers

Bootstrap provides events of their modals.

The event I used here is show.bs.modal. The event details has a property called relatedTarget which tells you what prompted the modal event.
From that element you can extract the data-id attribute.

$('#exampleModal').on('show.bs.modal', function (e) {
  var data_id = $(e.relatedTarget).data('id');
  console.log(data_id);
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-id="MAGIC" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

There could be multiple solutions, but you could implement event delegation here.

Move the click event handler up to the parent div element containing all these buttons.

In your event listener, you could do something like this:

let selectedPaymentMethod = "";

const paymentClickHandler = (event) => {
  // get the element
  const buttonClicked = event.target;
  // there are several to check if it's button, i'm using classList
  if (buttonClicked && buttonClicked.classList.contains("btn")) {
    // there are multiple ways to handle this
    // if (buttonClicked.classList.contains('stripe')) payingUsingStripe();
    // if (buttonClicked.dataset.paymentmethod === 'stripe') payingUsingStripe();
    // I would do something like below
    setPaymentMethod(buttonClicked.dataset.paymentmethod);
    displayModal();
  }
};

function setPaymentMethod(paymentMethod) {
  // do some checks to ensure valid value and then
  selectedPaymentMethod = paymentMethod;
}

CodeSandbox to demonstrate above.

Hope it helps.

Please signup or login to give your own answer.

Click here to cancel reply.

How can I add a identification value to a modal box to identify which particular div the modal is being opened from – Jquery ajax

Answers