Я создаю приложение Laravel 10, в котором я могу редактировать таблицу с помощью JavaScript и сохранять обновления в базе данных.
Цель: когда я редактирую ячейку и нажимаю Enter, она должна обновить соответствующую запись в таблице Academic_monitorings.
Проблема: когда я редактирую поле, ничего не происходит, просто сохраняется то, что я редактировал, но это не сохраняется в данных база.
document.querySelectorAll('tr').forEach(row => {
const editBtn = row.querySelector('.edit-btn');
const saveBtn = row.querySelector('.save-btn');
if (!editBtn || !saveBtn) return;
// Enable editing
editBtn.addEventListener('click', () => {
row.querySelectorAll('.display-text').forEach(span => span.classList.add(
'hidden'));
row.querySelectorAll('.edit-input').forEach(input => input.classList.remove(
'hidden'));
editBtn.classList.add('hidden');
saveBtn.classList.remove('hidden');
});
// Save changes
saveBtn.addEventListener('click', () => {
const course = row.querySelector('.edit-input[data-field="course"]').value
.trim();
const school = row.querySelector('.edit-input[data-field="school"]').value
.trim();
const enrollment_type = row.querySelector(
'.edit-input[data-field="enrollment_type"]').value.trim().toUpperCase();
const scholarship_duration = row.querySelector(
'.edit-input[data-field="scholarship_duration"]').value.trim();
const date_started = row.querySelector('.edit-input[data-field="date_started"]')
.value.trim();
const expected_completion = row.querySelector(
'.edit-input[data-field="expected_completion"]').value.trim();
const remarks = row.querySelector('.edit-input[data-field="remarks"]').value
.trim();
const id = row.querySelector('.edit-input[data-field="course"]').dataset
.monitoringId || null;
const scholar_id = row.querySelector('.edit-input[data-field="course"]').dataset
.scholarId;
// Send POST request
fetch("{{ route('admin.reports.monitoring.update-field') }}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
body: JSON.stringify([{
id,
scholar_id,
field: 'course',
value: course
},
{
id,
scholar_id,
field: 'school',
value: school
},
{
id,
scholar_id,
field: 'enrollment_type',
value: enrollment_type
},
{
id,
scholar_id,
field: 'scholarship_duration',
value: scholarship_duration
},
{
id,
scholar_id,
field: 'date_started',
value: date_started
},
{
id,
scholar_id,
field: 'expected_completion',
value: expected_completion
},
{
id,
scholar_id,
field: 'remarks',
value: remarks
},
])
})
.then(res => res.json())
.then(data => {
if (data.success) {
// Update table visually
row.querySelector('.display-text[data-field="course"]')
.textContent = course;
row.querySelector('.display-text[data-field="school"]')
.textContent = school;
row.querySelector('.display-text[data-field="enrollment_type"]')
.textContent = enrollment_type;
row.querySelector(
'.display-text[data-field="scholarship_duration"]')
.textContent = scholarship_duration;
row.querySelector('.display-text[data-field="date_started"]')
.textContent = date_started;
row.querySelector(
'.display-text[data-field="expected_completion"]')
.textContent = expected_completion;
row.querySelector('.display-text[data-field="remarks"]')
.textContent = remarks;
// Hide inputs & show display
row.querySelectorAll('.display-text').forEach(span => span
.classList.remove('hidden'));
row.querySelectorAll('.edit-input').forEach(input => input
.classList.add('hidden'));
editBtn.classList.remove('hidden');
saveBtn.classList.add('hidden');
// Update the monitoringId if it was null (new row)
if (!row.querySelector('.edit-input[data-field="course"]')
.dataset.monitoringId) {
const newId = data.monitoring_ids ? data.monitoring_ids[0] :
null;
row.querySelectorAll('.edit-input').forEach(input => input
.dataset.monitoringId = newId);
}
} else {
alert('Failed to save.');
}
})
.catch(err => {
console.error(err);
alert('Error saving data');
});
});
});
контроллер
public function updateMonitoringField(Request $request)
{
$data = $request->all(); // expects array of {id, field, value}
foreach ($data as $item) {
$monitoring = \App\Models\ScholarMonitoring::find($item['id']);
if ($monitoring && in_array($item['field'], [
'course',
'school',
'enrollment_type',
'scholarship_duration',
'date_started',
'expected_completion',
'remarks'
])) {
$monitoring->{$item['field']} = $item['value'];
$monitoring->save();
}
}
return response()->json(['success' => true]);
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... o-database
Laravel – встроенное редактирование AJAX не сохраняется в базе данных [закрыто] ⇐ Javascript
Форум по Javascript
1760999485
Anonymous
Я создаю приложение Laravel 10, в котором я могу редактировать таблицу с помощью JavaScript и сохранять обновления в базе данных.
Цель: когда я редактирую ячейку и нажимаю Enter, она должна обновить соответствующую запись в таблице Academic_monitorings.
Проблема: когда я редактирую поле, ничего не происходит, просто сохраняется то, что я редактировал, но это не сохраняется в данных база.
document.querySelectorAll('tr').forEach(row => {
const editBtn = row.querySelector('.edit-btn');
const saveBtn = row.querySelector('.save-btn');
if (!editBtn || !saveBtn) return;
// Enable editing
editBtn.addEventListener('click', () => {
row.querySelectorAll('.display-text').forEach(span => span.classList.add(
'hidden'));
row.querySelectorAll('.edit-input').forEach(input => input.classList.remove(
'hidden'));
editBtn.classList.add('hidden');
saveBtn.classList.remove('hidden');
});
// Save changes
saveBtn.addEventListener('click', () => {
const course = row.querySelector('.edit-input[data-field="course"]').value
.trim();
const school = row.querySelector('.edit-input[data-field="school"]').value
.trim();
const enrollment_type = row.querySelector(
'.edit-input[data-field="enrollment_type"]').value.trim().toUpperCase();
const scholarship_duration = row.querySelector(
'.edit-input[data-field="scholarship_duration"]').value.trim();
const date_started = row.querySelector('.edit-input[data-field="date_started"]')
.value.trim();
const expected_completion = row.querySelector(
'.edit-input[data-field="expected_completion"]').value.trim();
const remarks = row.querySelector('.edit-input[data-field="remarks"]').value
.trim();
const id = row.querySelector('.edit-input[data-field="course"]').dataset
.monitoringId || null;
const scholar_id = row.querySelector('.edit-input[data-field="course"]').dataset
.scholarId;
// Send POST request
fetch("{{ route('admin.reports.monitoring.update-field') }}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
body: JSON.stringify([{
id,
scholar_id,
field: 'course',
value: course
},
{
id,
scholar_id,
field: 'school',
value: school
},
{
id,
scholar_id,
field: 'enrollment_type',
value: enrollment_type
},
{
id,
scholar_id,
field: 'scholarship_duration',
value: scholarship_duration
},
{
id,
scholar_id,
field: 'date_started',
value: date_started
},
{
id,
scholar_id,
field: 'expected_completion',
value: expected_completion
},
{
id,
scholar_id,
field: 'remarks',
value: remarks
},
])
})
.then(res => res.json())
.then(data => {
if (data.success) {
// Update table visually
row.querySelector('.display-text[data-field="course"]')
.textContent = course;
row.querySelector('.display-text[data-field="school"]')
.textContent = school;
row.querySelector('.display-text[data-field="enrollment_type"]')
.textContent = enrollment_type;
row.querySelector(
'.display-text[data-field="scholarship_duration"]')
.textContent = scholarship_duration;
row.querySelector('.display-text[data-field="date_started"]')
.textContent = date_started;
row.querySelector(
'.display-text[data-field="expected_completion"]')
.textContent = expected_completion;
row.querySelector('.display-text[data-field="remarks"]')
.textContent = remarks;
// Hide inputs & show display
row.querySelectorAll('.display-text').forEach(span => span
.classList.remove('hidden'));
row.querySelectorAll('.edit-input').forEach(input => input
.classList.add('hidden'));
editBtn.classList.remove('hidden');
saveBtn.classList.add('hidden');
// Update the monitoringId if it was null (new row)
if (!row.querySelector('.edit-input[data-field="course"]')
.dataset.monitoringId) {
const newId = data.monitoring_ids ? data.monitoring_ids[0] :
null;
row.querySelectorAll('.edit-input').forEach(input => input
.dataset.monitoringId = newId);
}
} else {
alert('Failed to save.');
}
})
.catch(err => {
console.error(err);
alert('Error saving data');
});
});
});
контроллер
public function updateMonitoringField(Request $request)
{
$data = $request->all(); // expects array of {id, field, value}
foreach ($data as $item) {
$monitoring = \App\Models\ScholarMonitoring::find($item['id']);
if ($monitoring && in_array($item['field'], [
'course',
'school',
'enrollment_type',
'scholarship_duration',
'date_started',
'expected_completion',
'remarks'
])) {
$monitoring->{$item['field']} = $item['value'];
$monitoring->save();
}
}
return response()->json(['success' => true]);
}
Подробнее здесь: [url]https://stackoverflow.com/questions/79794414/laravel-ajax-inline-edit-not-saving-to-database[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия