So I have a search bar that is only for finding someone's policy, and so when they search their policy number, it gives them back some details including claims and policy wording. This all worked fine but worked as a redirect back to the same page just with the details added and so I wanted it to run with ajax so that the search all happens on one page. I have an array that I am passing to the blade, and now I want to show that information with ajax because currently it's in a hidden div, but it doesn't seem to be working?
Route:
Route::get('/widgets/policy-wording', 'FrontendWidgets\PolicyWordingController@policyWordingPage');
Route::any('/search', 'FrontendWidgets\PolicyWordingController@search');
Controller:
public function search(Request $request) {
if ($this->validate($request, [
'ordernumber' => 'string|min:8|max:16',
], [
'ordernumber.string' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
'ordernumber.min' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
'ordernumber.max' => ' Please enter a full order number. This will either be 8, 12 or 16 characters long and include a 2 letter prefix.',
]));
try {
$order = Order::findOrFail(decodeFullOrderNumber($request->ordernumber));
} catch (ModelNotFoundException $exception) {
return back()->withError('We could not find this policy number in our system, please try again')->withInput();
}
$description = $order->scheme->Description;
$phonenumber = $order->scheme->ClaimsTelephone1;
$policyurl = $order->scheme->PolicyURL;
$policyinfo = array($description, $phonenumber, $policyurl);
return response()->json([
'status' => 'ok',
'policyinfo' => $policyinfo,
'title' => "Policy Wording"
]);
}
Blade:
<form class="form-horizontal" role="form" id="policy-documents-search-form" action="/search">
{{ csrf_field() }}
<fieldset>
<div class="form-group">
<label for="username" class="col-sm-6 control-label">Enter your policy number</label>
<div class="col-sm-8">
<input type="text" name="ordernumber" id="ordernumber" class="form-control"/>
<span class="text-danger">{{ $errors->first('ordernumber') }}</span>
</div>
</div>
@if (session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary" id="search-button">Search</button>
</div>
</div>
<div class="form-group" id="form-group" style="display:none;">
<div class="container">
@if(isset($policyinfo))
<h2>Your Policy Details</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Claims Telephone</th>
<th>Policy Wording</th>
</tr>
</thead>
<tbody>
<tr>
<td id="name">{{ $policyinfo[0] }}</td>
<td id="phonenumber">{{ $policyinfo[1] }}</td>
<td id="policywording"><a href="{{ $policyinfo[2] }}">Policy Wording </a></td>
</tr>
</tbody>
</table>
@endif
</div>
</div>
</div>
</fieldset>
</form>
Script on blade:
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
<script>
$.ajax({
type: "POST",
url: '{{ url('/search') }}',
data: {
rdernumber: $('#ordernumber').val()
},
dataType: 'JSON',
success: function(response) {
if(response.status == 'ok'){
$("#form-group").show();
$("#form-group").append("<td>" + response.policyinfo[0] + "</td>", "<td>" + response.policyinfo[1] + "</td>", "<td>" + response.policyinfo[2] + "</td>");
}
}
});
</script>