Удалить элемент со страницы после удаления записи из БД через ajax?

Ссылка скопирована
AJAX JavaScript
1 ответ

Сделал удаление в бд по ajax, само удаление работает, но проблема в том, что удаленная запись остается на странице и исчезает после обновления страницы, но нужно чтобы страница не обновлялась.
Понимаю что нужно на стороне сервера сформировать новые данные из бд и отправить назад, но не понимаю как это сделать, чтобы старые записи на странице исчезли и подгрузились новые, при всех попытках, новые данные просто добавлялись к старым на странице
Сервер:

$userid = $conn->real_escape_string($_POST["id"]);     $sql = "DELETE FROM Test WHERE id = '$userid'";     if($conn->query($sql)){         //header("Location: index.php");        // echo json_encode('');      }     else{         echo "Ошибка: " . $conn->error;     }

$userid = $conn->real_escape_string($_POST["id"]); $sql = "DELETE FROM Test WHERE id = '$userid'"; if($conn->query($sql)){ //header("Location: index.php"); // echo json_encode(''); } else{ echo "Ошибка: " . $conn->error; }

Ajax:

function delete(id){  	$.ajax({ 		   type: "POST", 		   url: "delete.php", 		   data: "id=" + id, 		   dataType: 'json', 		   success: function(response){ 			result = $.parseJSON(response); 		   }, 		   error: function(response) {              $('#result_form').html('Ошибка. Данные не отправлены.');     	} 	}); 	}

function delete(id){ $.ajax({ type: "POST", url: "delete.php", data: "id=" + id, dataType: 'json', success: function(response){ result = $.parseJSON(response); }, error: function(response) { $('#result_form').html('Ошибка. Данные не отправлены.'); } }); }

Дополнительно:

Во-первых, к РНР этот вопрос не имеет отношения
Во-вторых, непонятно, зачем что-то "подгружать" если надо всего лишь удалить одну запись
В-третьих, хоть это и не имеет отношения к вопросу, но просто любопытно: какую реакцию от фронтенда вы ждете , отправляя ему echo "Ошибка: " . $conn->error?

  • вот, у меня с этим и проблема, удаление записи есть, но сама запись со страницы стирается только после обновления страницы, а хочется чтобы запись сразу стиралась после удаления без обновления страницы, пока учусь, не могу понять что упускаю, был бы благодарен в помощи или совете
    на счет $conn->error просто так висит, удалю :)
  • uwu79, после ответа от сервера удаляй данные с DOM. Element.remove()
  • Если вы ищете совета, то почему спрашиваете совсем про другое?
    Почему не спросить ровно то, что вам надо: как сделать так, чтобы элемент удалялся со страницы?
  • Ипатьев, уже перерыл кучу форумов и тем, там говорится про само удаление, но нигде пока что не заметил чтобы кто то говорил о том что у него данные сразу не стираются(может не все просмотрел), поэтому подумал, что так будет уместнее, повторюсь, я пока что только учусь и не стоит ждать от меня в экспертности задавания вопросов
  • uwu79, понятно. Ну вот в порядке увеличения экспертности, всегда надо задавать вопрос ровно про ту проблему, которая перед вами стоит. А не про её решение, которые вы нафантазировали. А то может случиться конфуз ;-)
  • StiflerProger, получается мне сначала нужно удалить dom элемент, а потом заново его добавить?
  • uwu79, ЗАЧЕМ его заново добавлять?!
  • Ипатьев, пока сам не догнал((, но если я использую remove(), то он удаляет мне блок и чтоб подгрузить новые детали что нужно сделать?
  • uwu79, зачем подгружать новые детали? Откуда все время берется эта подгрузка?
    У вас задача удалить один элемент на странице, одну запись. Вот вы ее удалили. Зачем что-то ещё подгружать?!
  • у контейнера каждой записи должен быть свой id. и удалять надо по этому id. только этот контейнер
    а не все записи
  • суть понял, с реализацией проблемы, Ипатьев, под id контейнера вы имеете ввиду id самой записи?
  • просто у меня же несколько таких записей в таких же контейнерах, как им задать разные id? не могу никак понять, прошу сильно камнями не кидать((
  • uwu79, у записи есть id из базы? что мешает присвоить контейнеру (div-у, в котором отображается одна запись) dom ид вида container-666, где 666 - это ид записи?
  • uwu79, вы же передаете data: "id=" + id, так что у вас в переменной id? вы же можете заново найти этот элемент и через JS удалить через .remove() именно этот блок...
  • разобрался, всем большое спасибо :)

    • Ответы:

    проблему решили, ответ в комментариях под вопросом, если коротко, то: после удаления думал заново вывести все данные с бд, но нужно было лишь удалить старый html, так как удаление в самой базе уже произошло

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Никита Орлов Ответ

    Для удаления элемента со страницы после удаления записи из базы данных через ajax, вам необходимо выполнить следующие шаги:

    1. На стороне сервера:
    - Создайте скрипт на сервере, который будет удалять запись из базы данных по заданному идентификатору.
    - Удостоверьтесь, что ваш скрипт возвращает подтверждение об успешном удалении записи.

    2. На стороне клиента:
    - Напишите функцию JavaScript, которая будет отправлять ajax-запрос на сервер для удаления записи.
    - В случае успешного выполнения запроса, удалите элемент со страницы с помощью JavaScript.

    Пример кода на стороне сервера (PHP):

     true]);
} else {
    echo json_encode(['success' => false]);
}
?>

    true]); } else { echo json_encode(['success' => false]); } ?>

    Пример кода на стороне клиента (JavaScript):

    function deleteRecord(id) {
    $.ajax({
        url: 'delete.php',
        type: 'POST',
        data: {id: id},
        success: function(response) {
            if (response.success) {
                $('#element-' + id).remove(); // Удаляем элемент со страницы
            } else {
                alert('Ошибка при удалении записи');
            }
        },
        error: function() {
            alert('Произошла ошибка при отправке запроса');
        }
    });
}

    function deleteRecord(id) { $.ajax({ url: 'delete.php', type: 'POST', data: {id: id}, success: function(response) { if (response.success) { $('#element-' + id).remove(); // Удаляем элемент со страницы } else { alert('Ошибка при удалении записи'); } }, error: function() { alert('Произошла ошибка при отправке запроса'); } }); }

    В данном примере при успешном удалении записи из базы данных, функция deleteRecord будет вызываться с идентификатором удаляемой записи, после чего элемент с id "element-id" будет удален со страницы. В случае ошибки при выполнении запроса или удалении записи, будет выведено соответствующее сообщение.

    Не забудьте подключить библиотеку jQuery, если вы ее еще не использовали в проекте.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов