Twitter Bootstrap Question posted in

How do I send data to modal from laravel view? – Twitter bootstrap

I am trying to create a modal to enter a payment against an invoice. I have an invoice page and the modal is bootstrap. I need the invoice id to be passed into the modal to be submitted for saving. I have the below html

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#paymentsModal" data-invoice="{{ $invoice->id }}">

Here is my payments modal

                <div class="modal fade" id="paymentsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                  </div>
                  <div class="modal-body">
                    <form action="{{ route('payment.store') }}" role="form" id="paymentEvent" method="POST">
                    {{ csrf_field() }}

                    <input type="hidden" name="invoice_id" value=""> //field I want to populate with invoice_id

                      <div class="form-group">        
                        <label for="payment_amount" class="control-label">Amount:<span class="symbol required"></span></label></label>
                        <input type="text" class="form-control" id="payment_amount" name="payment_amount">
                      </div>
                      <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                      </div>
                    </form>
                </div>
              </div>
            </div>

Finally here is my js. 

        $('#paymentsModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var invoice_id = button.data('invoice')  // 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('.modal-body input').val(invoice_id)
    });

I am loading from CDN.
jquery/2.2.3/jquery.min.js
twitter-bootstrap/3.3.6/js/bootstrap.min.js

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Placed this in the js. This works.

    $('#paymentsModal').on('show.bs.modal', function (event) {
     var invoice_id = ($('[data-invoice]').val());  // Extract info from data-* attributes
     var modal = $(this)
     modal.find('.modal-body input[name=invoice_id]').val(invoice_id)
    });

  2. 0

    Are you able to use a data-attribute?

    That way you could do:

     <input type="hidden" data-id="invoice_id" name="invoice_id" value="123">

    Then call the data-attribute using jQuery like so:

    console.log($('[data-id="invoice_id"]').val());
or
alert($('[data-id="invoice_id"]').val());

    You can also assign a value to this hidden input field using something like:

    $('[data-id="invoice_id"]').val('My new value')

    You can also send data to your modal using ajax can use the $('[data-id="invoice_id"]').val().

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search