0
我有一個表單視圖，「addMachine.blade.php」，它是當前通過導航欄訪問彈出式模式表單。我還在窗體中設置了Typeahead自動完成。
這些是addMachine視圖的路線和autocompleteUser當我轉到http://localhost/machine/add訪問我的網站
Route::get('/machine/add', 'Machine\[email protected]')->name('addMachine');
Route::get('/machine/add/operator_autocomplete', [
'as'=>'autocompleteUser',
'uses'=>'Machine\[email protected]']);
自動完成事先鍵入的內容的作品。
但是，當我嘗試通過導航欄訪問表單並將其打開爲彈出模式（這是我想要的操作）時，Chrome控制檯上出現以下錯誤：TypeError: $(...).typeahead is not a function。我試着將typeahead和jquery鏈接移到我的app.blade.php中，但我仍然得到相同的錯誤。
已解決。對於任何想要彈出式模式窗體的人來說，使用從導航欄打開的typeahead自動完成功能，可能有更好的方法來完成它，但這是我做到的。
這是我的表單視圖「addMachine.blade.php」的代碼。
<div class="modal-header">
<h4 class="modal-title text-center">Add Machine</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" action="{{ route('addMachine') }}">
{{ csrf_field() }}
<-- some more form stuff -->
<div class="form-group{{ $errors->has('part_id') ? ' has-error' : '' }}">
<label for="part_id" class="col-md-4 control-label">Part Id#</label>
<div class="col-md-6">
<input class="typeahead form-control" autocomplete="off" type="text" id="part_id" name="part_id" value="{{ old('part_id') }}">
@if ($errors->has('part_id'))
<span class="help-block">
<strong>{{ $errors->first('part_id') }}</strong>
</span>
@endif
</div>
</div>
<-- some more form stuff -->
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Add Machine
</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
var autocompletePartPath = "{{ route('autocompletePart') }}";
$('#part_id').typeahead({
source: function (query, process) {
return $.get(autocompletePartPath, { query: query }, function (data) {
return process(data);
});
},
displayText: function (item) {
return `${item.id} - ${item.name} ${item.revision}`;
},
afterSelect: function (item) {
$('#part_id').val(item.id);
},
fitToElement: true
});
</script>
這是從我的AddMachineController其功能處理自動完成
/**
* Handle a autocomplete part request.
*
* @return \Illuminate\Http\Response
*/
public function autocompletePart(Request $request)
{
$data = Part::where("name", "LIKE", "%{$request->input('query')}%")
->orderBy('name')
->take(5)
->get();
return response()->json($data);
}
這是我app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'SEI-MQE') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@include('include.navigationBar')
@include('include.flashMessage')
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
</body>
</html>
最後，這是我的navigationBar.blade。 php
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/home">SEI</a>
</div>
@if (!Auth::guest())
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<-- Some more links -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Machine <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@if (Auth::user()->isMQE())
<li><a href="{{ route('addMachine') }}" data-toggle="modal" data-target="#addMachinePopupModal">Add New Machine</a></li>
@endif
</ul>
</li>
<-- Some more links -->
</ul>
</div>
<div id="addMachinePopupModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
@endif
</div>
</nav>
你想要在單獨的刀片中彈出？包括它的JavaScript？ –
我希望表單在其自己的視圖中，並且在導航欄中有一個按鈕以彈出式模式打開表單視圖。我現在在navigationBar.blade.php中有上面的代碼，但我不確定是否有更好的方法來做到這一點。 – JonTan