Изменение данных в ячейке таблицы базы с использованием AJAX

@remuro · Регистрация: 23.06.2020

Author24 — интернет-сервис помощи студентам

Нужна помощь или совет. У меня есть админ-панель на Laravel, доступен весь функционал CRUD.
База запущена через PhpMyAdmin.

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

Хочу сделать так, чтобы можно было обновлять данные в одной ячейке таблицы посредством Ajax.

В контроллере:

PHP    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    public function edit($id)
    {
        $rates = Rates::find($id);
        return view('admin.rates.edit', ['rates' => $rates]);
    }
 
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Rates  $rates
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $request->validate([
            'title' => ['required', 'max:20', 'min:4','regex:/^[А-Яа-яЁё\s-]+$/u'],
            'content'=>['required','max:250', 'min:4'],
            'speed' => ['required', 'max:5', 'min:2', 'regex:/^[ 0-9]+$/'],
            'price' => ['required', 'max:10', 'min:2', 'regex:/^[ 0-9]+$/'],
        ]);
        
        $rates = Rates::find($id);
        $rates->title = $request->title;
        $rates->content = $request->content;
        $rates->speed = $request->speed;
        $rates->price = $request->price;
 
        if ($rates->save()) {
            return redirect()->back()->withSuccess('Тариф был успешно обновлён.');
        } 
        else {
            return redirect()->back()->with('error');
        }
    }

Частично index.blade файл, в котором отображается таблица из БД:

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!-- Вывод данных тарифов в таблице -->
    <section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-body p-0">
                <table class="table table-striped projects">
                    <thead>
                     <tr> <th style="width: 5%"> ID  </th>
                          <th> Название  </th>
                          <th> Описание  </th>
                          <th> Скорость, Мбит/с  </th>
                          <th> Цена, ₽/мес  </th>
                          <th> Создано  </th>
                          <th> Обновлено  </th>
                          <th style="width: 30%">  </th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($rates as $rate)
 
                    <tr> <td> {{ $rate['id'] }} </td>
                          <td> {{ $rate['title'] }} </td>
                          <td> {{ $rate['content'] }} </td>
                          <td> {{ $rate['speed'] }} </td>
                          <td> {{ $rate['price'] }} </td>
                          <td> {{ $rate['created_at'] }} </td>
                          <td> {{ $rate['updated_at'] }} </td>
 
                        <!-- Кнопка переадресации на страницу редактирования -->
                          <td class="project-actions text-right">
                             <a class="btn btn-info btn-sm" href="{{ route('rates.edit', $rate['id']) }}">
                                 <i class="fas fa-pencil-alt"></i>Редактировать</a>
 
                        <!-- Кнопка удаления -->
                        <form action="{{ route('rates.destroy', $rate['id']) }}" method="POST" style="display: inline-block">
                        @csrf
                        @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm delete-btn"><i class="fas fa-trash">    </i>Удалить</button>
                        </form>
                          </td>
                    </tr>
 
                    @endforeach
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </div>
</div>
</section>

Предполагаю, что можно сделать так, чтобы при нажатии на ячейку "speed" она превращалась в input, затем вводилось значение, которое вносилось в базу данных без обновления страницы.
Не могу разобраться как это сделать, не изменяя метод update и edit в контроллере.

@umneeq2 · 23.09.2023, 20:26

Нужно использовать JavaScript на фронте. Два контейнера, по клике на первый прятать первый, отображать второй. После отсылки запроса, прятать второй, показывать первый, менять состояние текущей сущности.

@VlGuvin · 03.10.2023, 13:17

Поможет JS и модальное окно. При клике на ячейку появляется модальное окно, куда вводятся данные и отправляются через ajax. Данные отправляются в один из методов контроллера, который обновляет ячейку в базе и возвращает

PHP    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
 return response()->json([
            'success' => true,
            'speed' => $speed,
        ], 200);
    }

Саму ячейку придется отображать с пом. JS типа так

HTML5    
        
    Скопировано
1
<div id="speed"></div>

JavaScript    
        
    Скопировано
1
 $('#speed').html(speed);

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

@VlGuvin · 08.10.2023, 16:50

Еще один способ http://js-grid.com/demos/

Новые блоги и статьи Все статьи Все блоги /
Агрегаты и сущности в DDD микросервисах Javaican 10.04.2025 Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .	Многопоточность в C#: Task и параллельное программирование UnmanagedCoder 10.04.2025 Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .	Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .	Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .

@umneeq2 36 / 28 / 9 Регистрация: 02.01.2022 Сообщений: 131
	23.09.2023, 20:26
	Нужно использовать JavaScript на фронте. Два контейнера, по клике на первый прятать первый, отображать второй. После отсылки запроса, прятать второй, показывать первый, менять состояние текущей сущности. 0

@VlGuvin -13 / 6 / 6 Регистрация: 04.08.2015 Сообщений: 568
	08.10.2023, 16:50
	Еще один способ http://js-grid.com/demos/ 0