Laravel和jQuery的 - 使用動態模板

Question

添加表單字段我使用Laravel和我有了一個與一個Service許多關係的Booking模型。所以預訂可以有很多服務。

我已經建立了模型中的所有關係和它的工作正常。

在我的預約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

，因爲一個是服務器端，另一個是客戶端，你不能用JavaScript混合laravel PHP刀片。

在這種情況下，你能做些什麼來解決這個問題，這將是讓你的刀模板來評估所有的時間，但你可以添加一個類的部分從用戶隱藏。在這種情況下，您將使用JavaScript/JQuery將其顯示給您的用戶，只要您想要它。

其他可能的解決方案也可以是您創建做一個AJAX查詢檢索您從數據庫所需的數據，並添加您的部分在您的網頁JavaScript或jQuery函數。

這裏沒有代碼，我們對此深感抱歉，但你需要弄清楚什麼是最適合你的解決方案第一。

Answer 2

如果有人仍在積極尋找答案，首先， 只需將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>