Модальная форма с JQuery-UI в Laravel

У меня есть форма модального типа, в которой я намереваюсь выполнить поиск по названию компании, и при выборе имени другие поля моей формы являются автозаполненными, я использую автозаполнение 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


проверять с консоли, но Я не вижу никаких ошибок, я благодарю вас за вашу помощь. Я застрял с этим!

1
задан 25.10.2019, 21:45
1 ответ

Только как пример, для 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');
0
ответ дан 10.11.2019, 23:16
  • 1
    Я проверяю пример и я появились какие-то сомнения – Rodrigo Ruiz 26.10.2019, 12:00
  • 2
    проверяя пример они я появились ты сомневаешься. В backend: во мне метод index занес в список все мои команды работы посредством моего datatables, во мне метод верьте тебе в то, что - тот, которого я использую, чтобы создавать новую команду работы, и здесь, где я стремлюсь к тому, чтобы показать select (имя предприятия) и выбрав один были автозавершены остальные поля, из-за которого, если я это помещаю 'if ($ request-> ajax ()) { $collection = Company:: select (' id' ' name_company')-> get (); return $ collection-> toJson (); } return view (' admin.orders.index');' – Rodrigo Ruiz 26.10.2019, 12:22
  • 3
  • 4
    ok я это буду проверять потом я комментирую большое спасибо!!! – Rodrigo Ruiz 26.10.2019, 14:34

Теги

Похожие вопросы