Question

我正在使用Laravel，我有一个与Booking有一对多关系的Service模型。所以预订可以提供很多服务。

我已经在模型中建立了所有关系并且工作正常。

在我的预订create视图文件中，我有一个面板，我希望允许用户动态添加服务。

{{ Form::open(array('url' => 'bookings')) }}


    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">Services</h3></div>  
        <div class="panel-body" id="newServices">                 
            <a href="#" id="addService" class="btn btn-default pull-right">Add Service</a>
        </div>
    </div>

    {{ Form::submit('Create Booking', array('class' => 'btn btn-primary btn-vostra')) }}

{{ Form::close() }}

我有一个模板视图文件bookings.service，它有一些输入元素：

@extends('layouts.app')

@section('content')

            <div class="form-group">
                    {{ Form::label('customer_name', 'Customer Name') }}
                    {{ Form::text('customer_name',  Input::old('customer_name'), array('class' => 'form-control')) }}
            </div>

            <div class="form-group">
                    {{ Form::label('customer_address_line_1', 'Address Line 1') }}
                    {{ Form::text('customer_address_line_1', Input::old('customer_address_line_1'), array('class' => 'form-control')) }}
            </div>

            <div class="form-group">
                    {{ Form::label('customer_address_line_2', 'Address Line 2') }}
                    {{ Form::text('customer_address_line_2', Input::old('customer_address_line_2'), array('class' => 'form-control')) }}
            </div>

@endsection

我的问题是如何将services视图模板文件动态添加到bookings视图文件中？

这是我到目前为止所得到的，但不完整：

$('#addService').click(function(e) {
        e.preventDefault();
        var html = {};
        $('#newServices').append(html);
});

Answer 1

如果有人仍在积极寻找答案，首先，只需将js代码放在laravel页面的底部，就在@endsection之前。但请确保您还要编写对app.js的引用，因为您需要将javascript添加到您的页面（如果您愿意，还需要jquery）

这是它的外观

@extends('layouts.app')

@section('content')

            <div class="form-group">
                    {{ Form::label('customer_name', 'Customer Name') }}
                    {{ Form::text('customer_name', Input::old('customer_name'), array('class' => 'form-control')) }}
            </div>

            <div class="form-group">
                    {{ Form::label('customer_address_line_1', 'Address Line 1') }}
                    {{ Form::text('customer_address_line_1', Input::old('customer_address_line_1'), array('class' => 'form-control')) }}
            </div>

            <div class="form-group">
                    {{ Form::label('customer_address_line_2', 'Address Line 2') }}
                    {{ Form::text('customer_address_line_2', Input::old('customer_address_line_2'), array('class' => 'form-control')) }}
            </div>
            
<script>{{ asset('js/app.js') }}</script>
<script>
    $(document).ready(function(){
    $('#addService').click(function(e) {
        e.preventDefault();
        var html = {};
    $('#newServices').append(html);
    });
});
</script>

@endsection

现在好了，如何动态添加表单，老实说，我真的不知道如何使用你的例子。但如果它可以帮助，我就是这样做的

<table id="add-me" class="table table-bordered">
<thead>
                     <tr>
                      <th>Quantity</th>
                      <th>Item</th>
                      <th>Selling Price</th>
                      <th>Actions</th>
                    </tr>
                 </thead>
                 <tbody >
@foreach($invoice_items as $item)
           <tr>
             <td id="quantity" class="col-md-2"><input onkeypress='return event.charCode >= 48 && event.charCode <=57'
               type="text" value="{{ $item->quantity }}" name="quantity[]" class="form-control" autofocus="" /></td>
             <td class="col-md-7"><select class="form-control" id="item" name="item[]">

               @foreach($products as $product)
               @if($product->item == $item->item && $product->price == $item->price)
                <option selected value={{$product->id}}>{{$product->item}} - {{$product->price}}</option>
               @endif
                 <option value={{$product->id}}>{{$product->item}} - {{$product->price}}</option>
               @endforeach
             </select></td>
             <td class="col-md-3"><input type="text" value="{{ $item->price }}" name="price[]" class="form-control" /></td>
             <td class="col-md-2">
                 <button type="button" class="btn btn-danger">
                 Delete</button>
             </td>
           </tr>
           @endforeach
       </tbody>
           </table>
                    </div>
                    <div class="action-buttons">
                        <button id="add-form" type="button" class="btn btn-default">Add New Form</button>
                        <button type="submit" class="btn btn-success">Add Invoice</button>
                    </div>
                    
                    <script>
        $(document).ready(function(){

    var i = 1;
        $('#add-form').click(function() {
              i++;
              $('#list').replaceWith('<input type="hidden" id="list" name="list" value='+i+'></input>');
              $('#add-me').append(
                 '<tbody id="row'+i+'"><tr>'+
                   '<td class="col-md-2">'+
                      '<input id="quantity" onkeypress="return event.charCode >= 48 && event.charCode <=57" type="text" name="quantity[]" class="form-control"/>'
                  +'</td>'
                  +'<td class="col-md-7">'
                      +'<select class="form-control" id="item" name="item[]">'
                        +'@foreach($products as $product)'
                          +'<option value={{$product->id}}>{{$product->item}} - {{$product->price}}</option>'
                        +'@endforeach'
                      +'</select>'
                  +'</td>'
                  +'<td class="col-md-3">'
                      +'<input type="text" name="price[]" class="form-control" />'
                  +'</td>'
                  +'<td class="col-md-2">'
                      +'<button id="+i+" type="button" class="btn btn-danger delegated-btn">Delete</button>'
                  +'</td>'
              +'</tr></tbody>'
              );
        });

        });

        </script>

Answer 2

你不能将laravel php刀片与javascript混合，因为一个是服务器端而另一个是客户端。

在这种情况下，您可以采取哪些措施来解决此问题，它将使您的刀片模板始终进行评估，但您可以在您的部分中添加一个类以将其隐藏起来。在这种情况下，您将使用javascript / JQuery随时向您的用户显示它。

其他可能的解决方案是，您可以创建一个javascript或JQuery函数，执行AJAX查询以从数据库中检索所需的数据，并在页面中添加您的部分。

这里没有代码，对不起，但你需要先弄清楚什么是最好的解决方案。

Laravel＆amp; jQuery - 使用模板

2 个答案: