Laravel 5.6, How To Return Two Views From One Function
I'm using Laravel 5.6 with Ajax for CRUD operations.
My question is a little hard to explain but i will try to vivid. I've got an AssetController with an assign function. This function has one return statement which is:
return view('/assets/unassigned_asset_ajax', compact('asset_categories', 'asset_received','assets', 'manufacturers', 'departments', 'staffs', 'unassigned_assets', 'assigned_assets'));
and this replaces the table in the Unassigned Tab with the current data from the database (This is to avoid reloading upon submit and is working perfectly fine) BUT i want to return two different HTML files (unassigned_asset_ajax & assigned_asset_ajax
) which will replace the tables in the Assigned and Unassigned Tabs, with one function (assign function) why because i'm working with Tabs in my view so the moment i assign an unassigned asset, the assets should move from the UNASSIGNED TAB to the ASSIGNED TAB with reloading the page.
How do i get this done, returning two views from one function?
AssetController.php
public function assign(Request $request){
$rules = array(
'assignment_id' => '',
'asset_id' => 'required',
'staff_id' => 'required',
'department_id' => 'required',
'date' => 'required',
'status' => 'required',
);
$validator = Validator::make($request->all(), $rules);
if ($validator->fails())
return response::json([
'fail' => true,
'errors' => $validator->errors()
]);
else{
$assignments = new Assignment;
$assignments ->assignment_id = $request->assignment_id;
$assignments ->staff_id = $request->staff_id;
$assignments ->asset_id = $request->asset_id;
$assignments ->department_id = $request->department_id;
$assignments ->date = $request->date;
$assignments ->status = $request->status;
$asset = Asset::where('asset_id', '=' ,$assignments->asset_id = $request->asset_id)->
where('status', '=' ,'Unassigned')->first();
$asset->status = 'Assigned';
$asset->save();
$assignments ->save();
$asset_categories = Asset_category::all();
$asset_received = Asset_received::all();
$assets = Asset::all();
$unassigned_assets = Asset::all();
$assigned_assets = Assignment::select('asset_id')->groupBy('asset_id')->get();
$manufacturers = Manufacturer::all();
$departments = Department::all();
$staffs = Staff::all();
return view('/assets/unassigned_asset_ajax', compact('asset_categories', 'asset_received',
'assets', 'manufacturers', 'departments', 'staffs', 'unassigned_assets', 'assigned_assets'));
}
}
The JS File that does the replacing of the Table.
$(document).on('click', 'button.assign-asset', function() {
$.ajax({
type: 'post',
url: '/assignUnassigned',
data: {
'_token': $('input[name=_token]').val(),
'asset_id': $('input[name=un_asset_id]').val(),
'staff_id': $("#staff_id option:selected").val(),
'department_id': $("#department_id option:selected").val(),
'date': $('input[name=unassigned_date]').val(),
'status': $("#unassigned_status option:selected").val(),
},
success: function(data) {
if((data.errors)){
$('#edit-error').removeClass('hidden');
$('#edit-error').text(data.errors.tag_id);
$('#edit-error').text(data.errors.staff);
$('#edit-error').text(data.errors.department);
$('#edit-error').text(data.errors.date);
$('#edit-error').text(data.errors.status);
}else{
$('#edit-error').remove();
$('#unassigned').html(data);
}
}
});
});
index.blade.php (View)
<div class="tab-pane" id="assigned">
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><b>ASSIGNED ASSETS</b></h4>
<table id="assigned-asset-table" class="table table-borderless" data-page-size="7">
<thead>
<tr>
<th>Tag ID</th>
<th>Category</th>
<th>Colour</th>
<th>Serial Number</th>
<th>Model Number</th>
<th>No Of Times Assigned</th>
</tr>
</thead>
<tbody>
@foreach($assigned_assets->all() as $assigned)
<tr>
<td>{{ $assigned->asset['tag_id'] }}</td>
<td>{{ $assigned->asset->asset_categories['category'] }}</td>
<td>{{ $assigned->asset['colour'] }}</td>
<td class="serial">{{ $assigned->asset['serial_number'] }}</td>
<td>{{ $assigned->asset['model_number'] }}</td>
<td>{{ $assigned->count }}</td>
<div class="button-list">
<td>
<a href='{{ url("/update_assignment/{$assigned->assignment_id}") }}' class="label label-success">Update</a> |
<a href='' class="label label-success" data-toggle="modal" data-target="#custom-width-modal-{{ $assigned->asset['asset_id'] }}">View Assignments</a>
<a href='' class="label label-inverse" data-toggle="modal" data-target="#myModal-{{-- $user_support->asset['asset_id'] --}}">View Repairs</a>
<a href='' class="label label-success" data-toggle="modal" data-dismiss="modal" data-target="#addsupport-modal-{{ $assigned->asset['asset_id'] }}">Add Support</a>
<a href='{{ url("/reassign/{$assigned->assignment_id}") }}' class="label label-success">Reassign</a> |
<a href=' {{ url("/delete_assignment/{$assigned->assignment_id}") }}' class="label label-danger">Delete</a>
</td>
</div>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="unassigned">
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><b>UNASSIGNED Asset Details</b></h4>
<table id="unassigned-asset-table" class="table table-borderless" data-page-size="7">
<thead>
<tr>
<th>Tag ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Serial Number</th>
<th>Model Number</th>
<th>Colour</th>
</tr>
</thead>
<tbody>
@foreach($unassigned_assets->where('status', '=' ,'Unassigned') as $unassigned)
<tr class="unassigned_asset{{$unassigned->asset_id}}">
<td>{{ $unassigned->tag_id}}</td>
<td>{{ $unassigned->asset_categories['category']}}</td>
<td>{{ $unassigned->manufacturers['manufacturer']}}</td>
<td>{{ $unassigned->serial_number}}</td>
<td>{{ $unassigned->model_number}}</td>
<td>{{ $unassigned->colour}}</td>
<td>
<a href='#' class="assign-unassigned label label-success" data-asset-id="{{$unassigned->asset_id}}"
data-tag-id="{{$unassigned->tag_id}}">
<span class="glyphicon glyphicon-edit"></span> Assign
</a>
|<button class=" btn btn-inverse" data-toggle="modal" data-target="#listrecorded{{--$asset_receive->asset_received_id--}}">
<span id="r-footer_action_Btn" class="glyphicon glyphicon-eye-open"></span> View
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
This is how the index.php looks like
The HTML File being Returned (unassigned_asset_ajax)
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><b>UNASSIGNED Asset Details</b></h4>
<table id="unassigned-asset-table" class="table table-borderless" data-page-size="7">
<thead>
<tr>
<th>Tag ID</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Serial Number</th>
<th>Model Number</th>
<th>Colour</th>
</tr>
</thead>
<tbody>
@foreach($unassigned_assets->where('status', '=' ,'Unassigned') as $unassigned)
<tr class="unassigned_asset{{$unassigned->asset_id}}">
<td>{{ $unassigned->tag_id}}</td>
<td>{{ $unassigned->asset_categories['category']}}</td>
<td>{{ $unassigned->manufacturers['manufacturer']}}</td>
<td>{{ $unassigned->serial_number}}</td>
<td>{{ $unassigned->model_number}}</td>
<td>{{ $unassigned->colour}}</td>
<td>
<a href='#' class="assign-unassigned label label-success" data-asset-id="{{$unassigned->asset_id}}"
data-tag-id="{{$unassigned->tag_id}}">
<span class="glyphicon glyphicon-edit"></span> Assign
</a>
|<button class=" btn btn-inverse" data-toggle="modal" data-target="#listrecorded{{--$asset_receive->asset_received_id--}}">
<span id="r-footer_action_Btn" class="glyphicon glyphicon-eye-open"></span> View
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
The other HTML File To be returned (assigned_asset_ajax)
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><b>ASSIGNED ASSETS</b></h4>
<table id="assigned-asset-table" class="table table-borderless" data-page-size="7">
<thead>
<tr>
<th>Tag ID</th>
<th>Category</th>
<th>Colour</th>
<th>Serial Number</th>
<th>Model Number</th>
<th>No Of Times Assigned</th>
</tr>
</thead>
<tbody>
@foreach($assigned_assets->all() as $assigned)
{{[email protected]($assignment)--}}
<tr>
<td>{{ $assigned->asset['tag_id'] }}</td>
<td>{{ $assigned->asset->asset_categories['category'] }}</td>
<td>{{ $assigned->asset['colour'] }}</td>
<td class="serial">{{ $assigned->asset['serial_number'] }}</td>
<td>{{ $assigned->asset['model_number'] }}</td>
<td>{{ $assigned->count }}</td>
<div class="button-list">
<td>
<a href='{{ url("/update_assignment/{$assigned->assignment_id}") }}' class="label label-success">Update</a> |
<a href='' class="label label-success" data-toggle="modal" data-target="#custom-width-modal-{{ $assigned->asset['asset_id'] }}">View Assignments</a>
<a href='' class="label label-inverse" data-toggle="modal" data-target="#myModal-{{-- $user_support->asset['asset_id'] --}}">View Repairs</a>
<a href='' class="label label-success" data-toggle="modal" data-dismiss="modal" data-target="#addsupport-modal-{{ $assigned->asset['asset_id'] }}">Add Support</a>
<a href='{{ url("/reassign/{$assigned->assignment_id}") }}' class="label label-success">Reassign</a> |
<a href=' {{ url("/delete_assignment/{$assigned->assignment_id}") }}' class="label label-danger">Delete</a>
</td>
</div>
</tr>
{{[email protected]}}
@endforeach
{{[email protected]($unassigned_assets->where('status', '=' ,'Unassigned') as $unassigned)--}}
{{--<tr class="unassigned_asset{{$unassigned->asset_id}}">--}}
{{--<td>{{ $unassigned->tag_id}}</td>--}}
{{--<td>{{ $unassigned->asset_categories['category']}}</td>--}}
{{--<td>{{ $unassigned->manufacturers['manufacturer']}}</td>--}}
{{--<td>{{ $unassigned->serial_number}}</td>--}}
{{--<td>{{ $unassigned->model_number}}</td>--}}
{{--<td>{{ $unassigned->colour}}</td>--}}
{{--<td>--}}
{{--<a href='#' class="assign-unassigned label label-success" data-asset-id="{{$unassigned->asset_id}}"--}}
{{--data-tag-id="{{$unassigned->tag_id}}">--}}
{{--<span class="glyphicon glyphicon-edit"></span> Assign--}}
{{--</a>--}}
{{--|<button class=" btn btn-inverse" data-toggle="modal" data-target="#listrecorded--}}{{--$asset_receive->asset_received_id--}}{{--">--}}
{{--<span id="r-footer_action_Btn" class="glyphicon glyphicon-eye-open"></span> View--}}
{{--</button>--}}
{{--</td>--}}
{{--</tr>--}}
{{[email protected]}}
</tbody>
</table>
</div>
</div>
Web.php
Route::post('/assignUnassigned', '[email protected]');
Thank you in advance for any suggestions.
Answer
You can store views html to variable or array and return those as json. In javascript then access those values and put directly to div. Read about render() function.
In Controller:
return response::json([
'view_1' => view('/assets/unassigned_asset_ajax', compact('asset_categories', 'asset_received', 'assets', 'manufacturers', 'departments', 'staffs', 'unassigned_assets', 'assigned_assets'))->render(),
'view_2' => view('/assets/assigned_asset_ajax', compact('asset_categories', 'asset_received', 'assets', 'manufacturers', 'departments', 'staffs', 'unassigned_assets', 'assigned_assets'))->render()
]);
In Javascript:
if ((data.errors)) {
$('#edit-error').removeClass('hidden');
$('#edit-error').text(data.errors.tag_id);
$('#edit-error').text(data.errors.staff);
$('#edit-error').text(data.errors.department);
$('#edit-error').text(data.errors.date);
$('#edit-error').text(data.errors.status);
} else {
$('#edit-error').remove();
$('#unassigned').html(data.view_1);
$('#assigned').html(data.view_2);
}
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM