У меня есть форма модального типа, в которой я намереваюсь выполнить поиск по названию компании, и при выборе имени другие поля моей формы являются автозаполненными, я использую автозаполнение jquery-ui, и до сих пор я пытается выполнить поиск, но он не работает.
путь:
Route::group([
'prefix' => 'admin',
'middleware' => 'auth'],
function(){
Route::get('/', 'DashboardController@index')->name('dashboard');
Route::resource('orders', 'OrderController', ['as' => 'admin']);
});
Route::get('orders/table', 'OrderController@dataTable')->name('orders.table');
// Route::get('orders/search', 'OrderController@search')->name('orders.search');
Route::get('orders/search', 'OrderController@search');
Контроллер OrderController:
здесь, в контроллере, у меня есть метод создания, где я передаю переменные в мою форму. У меня также есть метод поиска, где я выполняю поиск по названию компании
public function create()
{
$order = new Order();
$companies = Client::with('company')->get();
// $company = Company::pluck('name_company', 'id');
$user = User::pluck('name', 'id');
return view('admin.orders.partials.form', compact('order', 'user', 'companies'));
}
public function search(Request $request)
{
$search = $request->term;
$orders = Company::where('name_company', 'LIKE', '%'.$search.'%')->get();
$data = [];
foreach($orders as $key => $value)
{
$data [] = ['id' => $value->id, 'value' => $value->name_company];
}
return response($data);
}
public function dataTable()
{
$ordenes = Order::with(['client.company'], 'user')->get();
return dataTables::of($ordenes)
->addColumn('id', function ($ordenes){
return $ordenes->id;
})
->addColumn('n°_orden', function ($ordenes){
return $ordenes->num;
})
->addColumn('fecha', function ($ordenes){
return '<i class="fa fa-calendar-alt"></i>'.' '.$ordenes->date->format('d-m-y');
})
->addColumn('cliente', function ($ordenes){
return
'<i class="fa fa-industry"></i>'.' '.$ordenes->client->company['name_company']."<br>".
'<i class="fa fa-phone"></i>'.' '.$ordenes->client->company['phone_company'];
})
->addColumn('operario', function ($ordenes){
return
'<i class="fa fa-user"></i>'.' '.$ordenes->user['name'];
})
->addColumn('producto', function ($ordenes){
return $ordenes->name;
})
->addColumn('estado', function ($ordenes){
if($ordenes->status !== 'TERMINADO'){
return '<span class="label label-danger sm">'.$ordenes->status.'</span>';
}else {
return '<span class="label label-success sm">'.$ordenes->status.'</span>';
}
})
->addColumn('accion', function ($ordenes) {
return view('admin.orders.partials._action', [
'ordenes' => $ordenes,
'url_show' => route('admin.orders.show', $ordenes->id),
'url_edit' => route('admin.orders.edit', $ordenes->id),
'url_destroy' => route('admin.orders.destroy', $ordenes->id)
]);
})
->addIndexColumn()
->rawColumns(['n°_orden', 'fecha', 'cliente', 'operario', 'producto', 'estado', 'accion'])
->make(true);
}
форма:
<div class="input-group">
<span class="input-group-addon" style="color: white; background-color: #5b518b">Clientes</span>
<input type="text" id="search" name="search" class="form-control" placeholder="Buscar cliente">
</div>
{!! Form::model($order, [
'route' => $order->exists ? ['admin.orders.update', $order->id] : 'admin.orders.store',
'method' => $order->exists ? 'PUT' : 'POST'
]) !!}
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Detalles del Cliente</h3>
</div>
<div class="box-body">
<!-- <div class="input-group">
<span class="input-group-addon" style="color: white; background-color: #5b518b">Clientes</span>
<input type="text" id="search" name="search" class="form-control" placeholder="Buscar cliente">
</div> -->
<div class="form-group">
{!! Form::label('name_company', 'Nombre') !!}
{!! Form::text('name_company', null, ['class' => 'form-control', 'id' => 'name_company']) !!}
</div>
<div class="form-group">
{!! Form::label('phone_company', 'Telefono') !!}
{!! Form::text('phone_company', null, ['class' => 'form-control', 'id' => 'phone_company']) !!}
</div>
<div class="form-group">
{!! Form::label('name_client', 'Nombres') !!}
{!! Form::text('name_client', null, ['class' => 'form-control', 'id' => 'name_client']) !!}
</div>
<div class="form-group">
{!! Form::label('phone_client', 'Telefono') !!}
{!! Form::text('phone_client', null, ['class' => 'form-control', 'id' => 'phone_client']) !!}
</div>
<div class="form-group">
{!! Form::label('email', 'Email') !!}
{!! Form::text('email', null, ['class' => 'form-control', 'id' => 'email', 'placeholder' => 'Email']) !!}
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Detalle de la orden</h3>
</div>
<div class="box-body">
<div class="form-group">
{!! Form::label('status', 'Estado') !!}
{!! Form::select('status', $order->getStatus(), null, ['class' => 'form-control', 'id' => 'status']) !!}
</div>
<div class="form-group">
{!! Form::label('name', 'Operario') !!}
{!! Form::select('name', $user, null, ['class' => 'form-control', 'id' => 'name']) !!}
</div>
<!-- <div class="form-group">
{!! Form::label('name', 'Operario') !!}
{!! Form::text('name', null, ['name'], ['class' => 'form-control', 'id' => 'name']) !!}
</div>
<div class="form-group">
{!! Form::label('date', 'Fecha') !!}
{!! Form::text('date', null, ['class' => 'form-control', 'id' => 'date']) !!}
</div> -->
</div>
</div>
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Detalles del producto</h3>
</div>
<div class="box-body">
<div class="form-group">
{!! Form::label('num', 'N° orden') !!}
{!! Form::text('num', null, ['num'], ['class' => 'form-control', 'id' => 'num']) !!}
</div>
<div class="form-group">
{!! Form::label('name', 'Nombre') !!}
{!! Form::text('name', null, ['name'], ['class' => 'form-control', 'id' => 'name']) !!}
</div>
</div>
</div>
</div>
{!! Form::close() !!}
</div>
сценарий:
$(function(){
$('#search').autocomplete({
source: "{{URL::to('orders/table') }}",
// source: "{{ route('orders.table') }}",
// minLength: 2,
select: function(key,value)
{
console.log(value)
}
});
});
У меня есть сомнения в том, как я продолжаю ; Будет ли это мой сценарий или будет способ загрузить JS? Я хочу уточнить следующее: у меня есть app.blade (master), и у меня есть представление index.blade, в которое @include включило мою форму (partials), а с другой стороны, у меня есть order.js (папка public / js) где у меня есть все мои скрипты, включая автозаполнение
, тогда это будет частью моего индекса просмотра: здесь я беру jquery-ui.min.js
@include('admin.orders.partials._modal')
@push('styles')
<link rel="stylesheet" href="/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css" media="all"/>
@endpush
@push('scripts')
<script src="/adminlte/bower_components/sweetalert2/sweetalert2.all.min.js"></script>
<script src="/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- <script src="/adminlte/bower_components/jquery-ui-1.12.1.custom/external/jquery.min.js"></script> -->
<script src="/adminlte/bower_components/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="{{ asset('js/order.js') }}"></script>
<script>
$('#datatable').DataTable({
responsive: true,
processing: true,
serverSide: true,
ajax: "{{ route('orders.table') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'n°_orden', name: 'n°_orden'},
{data: 'fecha', name: 'fecha'},
{data: 'cliente', name: 'cliente'},
{data: 'operario', name: 'operario'},
{data: 'producto', name: 'producto'},
{data: 'estado', name: 'estado'},
{data: 'accion', name: 'accion'}
]
});
</script>
@endpush
проверять с консоли, но Я не вижу никаких ошибок, я благодарю вас за вашу помощь. Я застрял с этим!
Только как пример, для frontend я сделал snippet используя данные api для тестов JSONPlaceholder , который возвращает , эти данные для случая этой direcciГіn https://jsonplaceholder.typicode.com/posts
, и эти другие , если ты происходишь с ним как parГЎmetro id одного из предыдущих https://jsonplaceholder.typicode.com/posts/1
. Как verГЎs очень похожий, в которое esperarГ - в Laravel.
я не уверен, что это это, но вот то, что entendГ - вопроса и podrГ, - чтобы служить. Если ты даешь ему выполнять verГЎs как в формуляре внутри модального, выбрав статью списка, ты получаешь деталь этой статьи и наполняешь form:
// estos son los inputs que guardo en una variable
var postSelect = $('#post');
var titleInput = $('#title');
var bodyTextArea = $('#body');
// apenas carga, se lanza esta función, que obtiene el listado del que voy a filtrar uno para llenar los demás inputs
obtenerListado();
function obtenerListado() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts',
type: 'GET',
dataType: 'json',
success: function (response) {
// al obtener los datos lleno el select con esta función
llenarSelect(response)
},
error: function () {
alert('Hubo un error obteniendo el listado!');
}
});
}
function llenarSelect(data) {
$.each(data, function (key, value) {
// agrego los options con la id como valor y un texto
postSelect.append("<option value='" + value.id + "'>" + value.id + " - " + value.title + "</option>");
});
}
// agrego un listener para que cuando se seleccione un post en el select,
// lance otra llamada para obtener el detalle de ese post,
// y con eso lleno los inputs del formulario.
postSelect.on('change', function() {
$.ajax({
// mira aquí como concateno el valor del select (`$(this).val()`),
// que es la id de un post, para formar la url 'https://jsonplaceholder.typicode.com/posts/{id}'
url: 'https://jsonplaceholder.typicode.com/posts/' + $(this).val(),
type: 'GET',
dataType: 'json',
success: function (response) {
llenarInputs(response);
},
error: function () {
alert('Hubo un error obteniendo el detalle!');
}
});
});
function llenarInputs(data) {
titleInput.val(data.title)
bodyTextArea.val(data.body)
$("#userId").text("Id del Ususario: " + data.userId);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<div class="row justify-content-center">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Abrir Modal Formulario
</button>
</div>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form id="form-ajax" action="form-ajax.php">
<div class="row justify-content-center">
<div class="col-8">
<label for="post">Post:</label>
<select name="post" id="post" class="form-control">
<option value='' disabled selected>--selecciona</option>
</select>
</div>
</div>
<div class="row justify-content-center">
<div class="col-8">
<label for="title">Titulo:</label>
<input type="text" name="title" id="title" class="form-control">
</div>
</div>
<div class="row justify-content-center">
<div class="col-8">
<label for="body">Body</label>
<textarea id="body" name="body" rows="3" class="form-control"></textarea>
</div>
</div>
<div class="row justify-content-center">
<span id="userId"></span>
</div>
<div class="row justify-content-center my-5">
<div class="col-8 text-center">
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
backend для этого в Laravel podЕ • Г, - чтобы быть:
Драйвер
class PostController extends Controller
{
public function index(Request $request)
{
if($request->ajax()){
// si es un ajax request, haces la consulta a DB solo por los datos para llenar el select
$collection = Post::select('id', 'title')->get();
// y devuelves un json
return $collection->toJson();
}
// si no es ajax aquí sigue lo que ya tenías para web
// ...
return view('index');
}
public function create()
{
// aquí solo devuelves la vista, ya que los datos los pides por ajax
return view('create');
}
public function show(Request $request, $id)
{
// parecido al listado, usando el parametro id para identificar un objeto
$model = Post::findOrFail($id);
if($request->ajax()){
return $model->toJson();
}
return view('show', compact('model'));
}
}
Маршрутов
Route::get('/posts', 'PostController@index');
Route::get('/posts/create', 'PostController@create');
Route::get('/posts/{id}', 'PostController@show');
, Видные (create.blade.php
для примера), где у тебя есть модальный с формуляром (это snippet).
В конце концов, в backend tendrГ-эксперт, который должен менять Post
по имени твоей модели, не sГ©, если это Order, Client или Company в Драйвере, и в маршрутах то, что соответствует. И в frontend url ajax и inputs, которые соответствуют с твоими моделями.
UPDATE
PobГЎ это:
OrderController
public function create()
{
$order = new Order();
$companies = Company::pluck('name_company', 'id');
$user = User::pluck('name', 'id');
return view('admin.orders.partials.form', compact('order', 'user', 'companies'));
}
Маршрут orders
Route::resource('orders', 'OrderController');
, Видные admin.orders.partials.form
<form action="">
<div class="form-group">
{!! Form::label('name_company', 'Nombre') !!}
{!! Form::select('name_company', $companies, null, ['class' => 'form-control', 'id' => 'name_company']) !!}
</div>
<div class="form-group">
{!! Form::label('phone_company', 'Telefono') !!}
{!! Form::text('phone_company', null, ['class' => 'form-control', 'id' => 'phone_company']) !!}
</div>
</form>
orders.js
var name_companySelect = $('#name_company');
var phone_company = $('#phone_company');
name_companySelect.on('change', function() {
$.ajax({
url: '/companies/' + $(this).val(),
type: 'GET',
dataType: 'json',
success: function (response) {
llenarInputs(response);
},
error: function () {
alert('Hubo un error obteniendo el detalle de la Compañía!');
}
});
});
function llenarInputs(data) {
phone_company.val(data.phone_company);
// ...
}
NecesitarГЎs tambiГ©n маршрут и драйвер, чтобы получать деталь ее compaГ±Г-a: CompanyController
public function show(Request $request, $id)
{
$company = Company::findOrFail($id);
if($request->ajax()){
return $company->toJson();
}
return view('show', compact('company'));
}
Маршрут companies
Route::resource('companies', 'CompanyController');