Как загрузить данные MySQL в Select2 с помощью JQuery AJAX в Laravel 8

Select2 легко инициализировать на элементе. Это позволяет загружать данные с AJAX и без него.

В этом руководстве я покажу, как вы можете загрузить данные базы данных MySQL в select2, используя jQuery AJAX в проекте Laravel 8.

1. Конфигурация базы данных

Откройте .envфайл.

Укажите хост, имя базы данных, имя пользователя и пароль.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

---

2. Структура таблицы

• Создайте  employeesтаблицу с помощью миграции и добавьте несколько записей.

php artisan make:migration create_employees_table

• Теперь перейдите в  database/migrations/ папку из корня проекта.
• Найдите файл PHP, оканчивающийся на , create_employees_table и откройте его.
• Определите структуру таблицы в  up() методе.

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
        $table->id();
        $table->string('username');
        $table->string('name');
        $table->string('email');
        $table->timestamps();
    });
}

• Запустите миграцию —

php artisan migrate

• Таблица создана.

---

3. Модель

Создать Employeesмодель.

php artisan make:model Employees

• Укажите массово назначаемые атрибуты модели — имя пользователя, имя и адрес электронной почты, используя $fillable свойство.

Завершенный код

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
    use HasFactory;

    protected $fillable = [
       'username','name','email'
    ];
}

---

4. Контроллер

Создайте  EmployeesController контроллер.

php artisan make:controller EmployeesController

Создайте 2 метода –

• index() — Загрузить  indexпредставление.
• getEmployees() — этот метод используется для обработки запросов AJAX.

Присвойте $searchпеременной значение поиска POST.

Если $searchпусто, выберите 5 записей из employeesтаблицы и назначьте их, в $employeesпротивном случае выберите 5 записей, в которых $searchзначение существует в nameполе, используя like.

Цикл $employeesи инициализация $responseмассива с ключами idи .text

Возврат  $response в формате JSON.

Завершенный код

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employees;

class EmployeesController extends Controller {

   public function index(){

     // Load index view
     return view('index');
   }

   // Fetch records
   public function getEmployees(Request $request){
      $search = $request->search;

      if($search == ''){
         $employees = Employees::orderby('name','asc')->select('id','name')->limit(5)->get();
      }else{
         $employees = Employees::orderby('name','asc')->select('id','name')->where('name', 'like', '%' .$search . '%')->limit(5)->get();
      }

      $response = array();
      foreach($employees as $employee){
         $response[] = array(
              "id"=>$employee->id,
              "text"=>$employee->name
         );
      }
      return response()->json($response); 
   } 
}

---

5. Маршрут

• Откройте  routes/web.php файл.
• Определить 2 маршрута –
  • / —  Загрузить представление индекса.
  • /getEmployees — используется для отправки запроса AJAX POST для получения списка сотрудников.

<?php 
use Illuminate\Support\Facades\Route; 
use App\Http\Controllers\EmployeesController; 

Route::get('/', [EmployeesController::class, 'index']); 
Route::post('/getEmployees', [EmployeesController::class, 'getEmployees'])->name('getEmployees');

---

6. Просмотр

Создайте новый  index.blade.php файл в  resources/views/ папке.

HTML –

• Сохраненный токен CSRF в  <meta >теге.
• Включите библиотеки select2 и jQuery.
• Создайте  <select id='sel_emp' > элемент.

jQuery –

• Прочитать  csrf_tokenиз метатега и присвоить CSRF_TOKEN переменной.
• Инициализировать select2 для #sel_empэлемента.
• Использование 'ajax'опции для отправки запроса AJAX POST в 'getEmployees'. Установить dataType: 'json'.
• С  dataпередачей введенного значения и токена CSRF в качестве данных — _token: CSRF_TOKEN, search: params.term.
• Обрабатывать ответ AJAX с помощью  processResults. Инициализировать  results с помощью  response.

Завершенный код

<!DOCTYPE html>
<html>
<head>
   <title>How to Load data using jQuery AJAX in Select2 – Laravel 8</title>

   <!-- Meta -->
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="csrf-token" content="{{ csrf_token() }}">

   <!-- CSS -->
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

   <!-- Script -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

</head>
<body>

   <!-- For defining select2 -->
   <select id='sel_emp' style='width: 200px;'>
      <option value='0'>-- Select employee --</option>
   </select>

   <!-- Script -->
   <script type="text/javascript">
   // CSRF Token
   var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
   $(document).ready(function(){

     $( "#sel_emp" ).select2({
        ajax: { 
          url: "{{route('getEmployees')}}",
          type: "post",
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
               _token: CSRF_TOKEN,
               search: params.term // search term
            };
          },
          processResults: function (response) {
            return {
              results: response
            };
          },
          cache: true
        }

     });

   });
   </script>
</body>
</html>

---

7. Демо

Посмотреть демо

---

8. Заключение

В примере я установил ограничение на 5 при выборке записей из таблицы. Вы можете либо удалить его, если хотите выбрать все записи, либо настроить его в соответствии с требованиями.

Возвращаемый ответ Select2 должен иметь idи textключи, иначе данные не будут загружены должным образом.

Источник:  https://makitweb.com

#php #ajax #laravel #mysql 

What is GEEK

Buddha Community

Как загрузить данные MySQL в Select2 с помощью JQuery AJAX в Laravel 8

Select2 легко инициализировать на элементе. Это позволяет загружать данные с AJAX и без него.

В этом руководстве я покажу, как вы можете загрузить данные базы данных MySQL в select2, используя jQuery AJAX в проекте Laravel 8.

1. Конфигурация базы данных

Откройте .envфайл.

Укажите хост, имя базы данных, имя пользователя и пароль.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

---

2. Структура таблицы

• Создайте  employeesтаблицу с помощью миграции и добавьте несколько записей.

php artisan make:migration create_employees_table

• Теперь перейдите в  database/migrations/ папку из корня проекта.
• Найдите файл PHP, оканчивающийся на , create_employees_table и откройте его.
• Определите структуру таблицы в  up() методе.

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
        $table->id();
        $table->string('username');
        $table->string('name');
        $table->string('email');
        $table->timestamps();
    });
}

• Запустите миграцию —

php artisan migrate

• Таблица создана.

---

3. Модель

Создать Employeesмодель.

php artisan make:model Employees

• Укажите массово назначаемые атрибуты модели — имя пользователя, имя и адрес электронной почты, используя $fillable свойство.

Завершенный код

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
    use HasFactory;

    protected $fillable = [
       'username','name','email'
    ];
}

---

4. Контроллер

Создайте  EmployeesController контроллер.

php artisan make:controller EmployeesController

Создайте 2 метода –

• index() — Загрузить  indexпредставление.
• getEmployees() — этот метод используется для обработки запросов AJAX.

Присвойте $searchпеременной значение поиска POST.

Если $searchпусто, выберите 5 записей из employeesтаблицы и назначьте их, в $employeesпротивном случае выберите 5 записей, в которых $searchзначение существует в nameполе, используя like.

Цикл $employeesи инициализация $responseмассива с ключами idи .text

Возврат  $response в формате JSON.

Завершенный код

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employees;

class EmployeesController extends Controller {

   public function index(){

     // Load index view
     return view('index');
   }

   // Fetch records
   public function getEmployees(Request $request){
      $search = $request->search;

      if($search == ''){
         $employees = Employees::orderby('name','asc')->select('id','name')->limit(5)->get();
      }else{
         $employees = Employees::orderby('name','asc')->select('id','name')->where('name', 'like', '%' .$search . '%')->limit(5)->get();
      }

      $response = array();
      foreach($employees as $employee){
         $response[] = array(
              "id"=>$employee->id,
              "text"=>$employee->name
         );
      }
      return response()->json($response); 
   } 
}

---

5. Маршрут

• Откройте  routes/web.php файл.
• Определить 2 маршрута –
  • / —  Загрузить представление индекса.
  • /getEmployees — используется для отправки запроса AJAX POST для получения списка сотрудников.

<?php 
use Illuminate\Support\Facades\Route; 
use App\Http\Controllers\EmployeesController; 

Route::get('/', [EmployeesController::class, 'index']); 
Route::post('/getEmployees', [EmployeesController::class, 'getEmployees'])->name('getEmployees');

---

6. Просмотр

Создайте новый  index.blade.php файл в  resources/views/ папке.

HTML –

• Сохраненный токен CSRF в  <meta >теге.
• Включите библиотеки select2 и jQuery.
• Создайте  <select id='sel_emp' > элемент.

jQuery –

• Прочитать  csrf_tokenиз метатега и присвоить CSRF_TOKEN переменной.
• Инициализировать select2 для #sel_empэлемента.
• Использование 'ajax'опции для отправки запроса AJAX POST в 'getEmployees'. Установить dataType: 'json'.
• С  dataпередачей введенного значения и токена CSRF в качестве данных — _token: CSRF_TOKEN, search: params.term.
• Обрабатывать ответ AJAX с помощью  processResults. Инициализировать  results с помощью  response.

Завершенный код

<!DOCTYPE html>
<html>
<head>
   <title>How to Load data using jQuery AJAX in Select2 – Laravel 8</title>

   <!-- Meta -->
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="csrf-token" content="{{ csrf_token() }}">

   <!-- CSS -->
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

   <!-- Script -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

</head>
<body>

   <!-- For defining select2 -->
   <select id='sel_emp' style='width: 200px;'>
      <option value='0'>-- Select employee --</option>
   </select>

   <!-- Script -->
   <script type="text/javascript">
   // CSRF Token
   var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
   $(document).ready(function(){

     $( "#sel_emp" ).select2({
        ajax: { 
          url: "{{route('getEmployees')}}",
          type: "post",
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
               _token: CSRF_TOKEN,
               search: params.term // search term
            };
          },
          processResults: function (response) {
            return {
              results: response
            };
          },
          cache: true
        }

     });

   });
   </script>
</body>
</html>

---

7. Демо

Посмотреть демо

---

8. Заключение

В примере я установил ограничение на 5 при выборке записей из таблицы. Вы можете либо удалить его, если хотите выбрать все записи, либо настроить его в соответствии с требованиями.

Возвращаемый ответ Select2 должен иметь idи textключи, иначе данные не будут загружены должным образом.

Источник:  https://makitweb.com

#php #ajax #laravel #mysql 

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

Laravel 7 Ajax Dynamic Dependent Dropdown

In this tutorial i will share with you how to create dependent dropdown using ajax in laravel. Or how to create selected subcategories dropdown based on selected category dropdown using jQuery ajax in laravel apps.

As well as learn, how to retrieve data from database on onchange select category dropdown using jQuery ajax in drop down list in laravel.

Laravel Ajax Dynamic Dependent Dropdown Tutorial

Follow the below steps and implement dependent dropdown using jQuery ajax in laravel app:

1. Step 1: Install Laravel New App
2. Step 2: Add Database Details
3. Step 3: Create Model and Migration
4. Step 4: Add Routes
5. Step 5: Create Controllers By Artisan
6. Step 6: Create Blade Views
7. Step 7: Run Development Server

Originally published at https://www.tutsmake.com/laravel-dynamic-dependent-dropdown-using-ajax-example

#laravel jquery ajax categories and subcategories select dropdown #jquery ajax dynamic dependent dropdown in laravel 7 #laravel dynamic dependent dropdown using ajax #display category and subcategory in laravel #onchange ajax jquery in laravel #how to make dynamic dropdown in laravel

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners

Laravel 8 New Features | Release Notes - Tuts Make

In this post, i will show you what’s new in laravel 8 version.

#What’s new in Laravel 8?

• 1 - Change Path Of Default Models Directory
• 2 - Removed Controllers Namespace Prefix
• 3 - Enhancements on php artisan serve
• 4 - Enhanced Rate Limiting
• 5 - Enhanced on Route Caching
• 6 - Update on Pagination Design
• 8 - Dynamic Blade Componenets
• 7 - Update Syntax for Closure Based Event Listeners
• 8 - Queueable Model Event Listeners
• 9 - Maintenance mode: secret access
• 10 - Maintenance mode: pre-rendered page
• 11 - Queued job batching
• 12 - Queue backoff()
• 13 - Laravel Factory

https://www.tutsmake.com/laravel-8-new-features-release-notes/

#laravel 8 features #laravel 8 release date #laravel 8 tutorial #news - laravel 8 new features #what's new in laravel 8 #laravel 8 release notes