Laravel＆jQuery - テンプレートを使用してフォームフィールドを動的に追加します。

Question

私はLaravelを使用しており、Serviceと1対多の関係を持つモデル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 

を私の質問はどのように私は動的にbookingsビュー・ファイルにservicesビュー・テンプレート・ファイルを追加するのですか？ここで

は、私がこれまでになく、その不完全持っているものです。

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

Answer 1

1は、サーバ側であり、他は、クライアント側であるので、あなたはJavaScriptでlaravel PHPのブレードを混在させることはできません。

この場合、この問題を回避するには、ブレードテンプレートを常に評価することができますが、セクションにクラスを追加してユーザーから隠すことができます。この場合、javascript/JQueryを使用して、必要に応じてユーザーに表示します。

データベースから必要なデータを取得し、ページにセクションを追加するAJAXクエリを実行する、JavascriptまたはJQuery関数を作成することもできます。

ここにコードはありません。ご迷惑をおかけしますが、何が最善の解決策であるかを把握する必要があります。

Answer 2

誰かがまだ積極的に答えを探している場合は、まず @lectionの直前に、larvelページの一番下にjsコードを入れてください。 しかし、あなたはまた、あなたが（あなたがしたい場合やjqueryの）それはあなたのページにJavaScriptを追加する必要が原因app.jsするための基準を作成することを確認してください

ここではそれが

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