I am using Laravel and I have a Booking model that has a one to many relationship with a Service. So a booking can have many services.
I have set up all the relationships in the models and its working fine.
In my bookings create view file I have a panel where I want to allow users to dynamically add services.
{{ 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() }}
I have a template view file bookings.service which has some input elements:
@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
My question is how do I dynamically add the services view template file into the bookings view file?
Here is what I have so far but its incomplete:
$('#addService').click(function(e) {
e.preventDefault();
var html = {};
$('#newServices').append(html);
});
You can't mix the laravel php blade with javascript because one is server side and other is client side.
In this case What you can do to workaround this issue it will be to make your blade template to evaluate all the time but you can add a class to your section to hide it from the user. In this case your will use javascript/JQuery to show it to your user whenever you want it.
Other possible solution it can be that you create a javascript or JQuery function that do an AJAX query to retrieve the data that you want from your database and add your section in your page.
No code here, sorry about that but you need to figure out what is the best solution for you first.
in case someone is still actively looking for the answer, first of all, just put the js code at the bottom of your laravel page, right before @endsection. But make sure you also write the reference to app.js cause you need it to add javascript to your page (and jquery if you want to)
here is how it will looks
@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>
@endsectionokay now for how to dynamically add form, honestly, i can't really tell how using your example. But if it can help, here is how i did it
<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></div>