如何从 laravel 视图将数据发送到模态？答案

【问题标题】：How do I send data to modal from laravel view?如何从 laravel 视图将数据发送到模态？
【发布时间】：2017-07-15 22:52:58
【问题描述】：

我正在尝试创建一个模式来输入针对发票的付款。我有一个发票页面，模式是引导程序。我需要将发票 ID 传递到要提交保存的模式中。我有下面的html

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

这是我的付款方式

                <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>

最后是我的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)
    });

我正在从 CDN 加载。 jquery/2.2.3/jquery.min.js twitter-bootstrap/3.3.6/js/bootstrap.min.js

【问题讨论】：

那么什么不起作用？有 js 错误吗？
将值放入右侧输入：modal.find('.modal-body input[name=invoice_id]').val(invoice_id)
不走运。字段显示为空。

标签： javascript jquery twitter-bootstrap laravel

【解决方案1】：

您可以使用数据属性吗？

你可以这样做：

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

然后像这样使用 jQuery 调用数据属性：

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

您还可以使用以下方式为这个隐藏的输入字段赋值：

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

您还可以使用 ajax 将数据发送到您的模态，可以使用$('[data-id="invoice_id"]').val().

希望这会有所帮助。

【讨论】：

这在我使用 JSFiddle 之类的东西时有效。但是我的应用程序中必须有一些东西阻止 invoice_id 填充到模式中。我一直不确定。有什么常见的检查吗？
你必须使用隐藏输入吗？目前在移动设备上，所以会尽快提供帮助
不，我不必使用它。我尝试将其更改为文本。这让我相信还有另一个错误导致未定义。
我使用过 console.log(invoice_id);查看返回但未定义的内容。
不要使用 var input_id，将 data 属性添加到输入中，然后尝试直接调用 data 属性，就像我对 var 显示的假设一样，或者尝试 invoice_id.val()

【解决方案2】：

把这个放在js中。这行得通。

$('#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)
    });

【讨论】：