J'ai une vue de formulaire, "addMachine.blade.php", qui est actuellement un formulaire modal pop-up accessible via la barre de navigation. Je configure également la saisie semi-automatique Typeahead dans le formulaire.
Ce sont les routes pour la vue addMachine et autocompleteUser
Route::get('/machine/add', 'Machine\[email protected]')->name('addMachine');
Route::get('/machine/add/operator_autocomplete', [
'as'=>'autocompleteUser',
'uses'=>'Machine\[email protected]']);
autocomplete typeahead fonctionne quand j'accéder à mon site en allant http://localhost/machine/add.
Toutefois, lorsque j'essaie d'accéder au formulaire via la barre de navigation et de l'ouvrir en tant que modalité contextuelle (ce que je souhaite), j'obtiens l'erreur suivante sur la console de Chrome: TypeError: $(...).typeahead is not a function. J'ai essayé de déplacer les liens typeahead et jquery vers mon app.blade.php mais j'ai toujours la même erreur.
RÉSOLU. Pour tous ceux qui veulent un formulaire modal pop-up avec typeahead autocomplete qui s'ouvre à partir d'une barre de navigation, il pourrait y avoir une meilleure façon de le faire, mais c'est comme ça que je l'ai fait.
Ceci est le code pour ma vue de formulaire, "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>
C'est la fonction de mon AddMachineController qui gère la saisie semi-automatique
/**
* 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);
}
Ceci est mon 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>
Et enfin, voici mon 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>
Vous voulez votre popup dans une lame séparée? y compris son javascript? –
Je veux le formulaire dans sa propre vue et d'avoir un bouton dans la barre de navigation ouvrir la vue formulaire comme un mode pop-up. Le code que j'ai ci-dessus dans navigationBar.blade.php fait cela maintenant, mais je ne suis pas sûr s'il y a une meilleure façon de le faire. – JonTan