Почему не отрабатывает ajax?

Question

[Максим]

Таблица с данными из бд:

<tr>
                                <td><div class="alert <?=$colorClass?>" role="alert"><p><?=$users['id']?></div></td>
                                <input type="hidden" name="form_id" value="<?=$users['id']?>">
                                <td><div class="alert <?=$colorClass?>" role="alert"><p><?=htmlspecialchars($users['delivery_adress'], ENT_QUOTES)?></p></div></td>
                                <td><div class="alert <?=$colorClass?>" role="alert"><p><?=htmlspecialchars($users['delivery_time'], ENT_QUOTES)?></p></div></td>
                                <td><div class="alert <?=$colorClass?>" role="alert"><p><?=htmlspecialchars($users['surname'], ENT_QUOTES)?> <?=htmlspecialchars($users['name'], ENT_QUOTES)?> <?=htmlspecialchars($users['second_name'], ENT_QUOTES)?></p></div></td>
                                <td><div class="alert <?=$colorClass?>" role="alert"><p><?=htmlspecialchars($users['sum'], ENT_QUOTES)?></p></div></td>
                                <td><button type="button" name="delivery_status" value="1" class="btn btn-xs btn-success mb-3" id="delivered">Отдал</button></td>
                                <td><button type="button" name="delivery_status" value="2" class="btn btn-xs btn-danger mb-3">Отказ</button></td>
                                <td><button type="button" name="delivery_status" value="3" class="btn btn-xs btn-warning mb-3" data-toggle="modal" data-target="#exampleModalLong">Перенос</button></td>
                            </tr>

dost.php, который обрабатывает её:

<?php

require_once('db.php');

if(!empty($_POST['delivery_status']))
{
    $form_id = (int) $_POST['form_id'];
    $status = (int) $_POST['delivery_status'];
    $SQL = "UPDATE Users SET delivery_status='$status' WHERE id='$form_id'";
    $result = mysqli_query($link, $SQL);
}
?>

AJAX, который я написал, и который почему-то не отрабатывает, т.е. в бд не сохраняются данные, полученные от кнопки, а просто загружается пустая страница с dost.php.

$('button[name="delivery_status"]').on('click', function() {
    let $btn = $(this);
    let id = $btn.closest('tr').find('input[name="form_id"]').val(); // получаем id
    // формируем данные
    let data = {
        form_data: id,
        delivery_status: $btn.val()
    };
    $.ajax({
        type: "POST",
        url: "dost.php",
        data: data
    }).done(function() {
        alert("Данные сохранены");
    });
    return false;
});

Я где-то накосячил, не могу понять где :(

Comments

[Дмитрий]

Сколько можно один и тот же вопрос мусолить? Хватит плодить однотипные вопросы.

[Максим]

slo_nik, это не один и тот же вопрос. Может и однотипный, но случаи разные.

Answer 1

[Apostol63]

А вы проверили, приходят ли вообще данные в dost.php?
и отправляет ли вообще ajax?
добавьте в ajax success, чтобы проверять то, что сам ajax отработал и посмотрите, что вам приходит в dost.php.
Добавьте file_put_contents к примеру

Comments

[Максим]

Можете конкретно объяснить нубу что и куда добавить?
Я просто немного тупой :(

[Apostol63]

вы не тупой, вы просто неопытный)
в ajax после data добавьте значение
success: "название функции"

Далее в том же js файле сделайте любую функцию
пускай она просто alert выводит
Если после нажатия на кнопку alert вылетит, значит ajax отрабатывает

А в dost.php в самом начале сделайте file_put_contents("путь к файлу/имя_файла.txt", $_POST['form_id']);

Если у вас и потом смотрите, есть ли в файле что-то

P.S.
описание file_put_contents спокойно найдете в инете)

[Apostol63]

Я вам это все говорю, чтобы вы не просто нашли ошибку в коде, но и научились в принципе его проверять)

[Максим]

Apostol63, с file_put_contents разобрался. id передаётся корректно, т.е. в этот файл пишется цифра соответствующая id. Попробовал сделать то же самое с file_put_contents("test.txt", $_POST['delivery_status']); - пустой файл.
В js сделал функцию с алертом и как-то никакого алерта не вышло.

$('button[name="delivery_status"]').on('click', function() {
    let $btn = $(this);
    let id = $btn.closest('tr').find('input[name="form_id"]').val(); // получаем id
    // формируем данные
    let data = {
        form_data: id,
        delivery_status: $btn.val()
    };
    $.ajax({
        type: "POST",
        url: "dost.php",
        data: data,
        success: function() {
            alert('Load was performed.');
        }
    }).done(function() {
        alert("Данные сохранены");
    });
    return false;
});

Answer 2

[ThunderCat]

просто загружается пустая страница с dost.php.

что не удивительно, форма просто субмитится, никакой аякс у вас просто не успевает обработаться, как это предотвратить я вообще то с комментариями расписал в вашем прошлом вопросе.
как проверять что происходит:
для яваскрипта есть 2 варианта:
a) нубский вариант - alert('some string'); в принципе позволяет понять что и куда пришло в ходе выполнения скрипта
б) тру подход - console.log(some_var); - выводит в консоль браузера подробную информацию о переменной
Далее - в целом инструменты разработчика в хроме(F12) или например фаерфоксе, которые отслеживают много чего, их вы должны знать хотя бы в общих чертах, почитайте как работать с ними, материала масса.
Теперь - что и куда(и как) отправляется:
Вкладка нетворк в инструментах разработчика показывает все запросы по сети(включая закэшированные), их можно отфильтровать по типам, что очень удобно для отслеживания например именно аякс запросов. В составе каждого запрошенного элемента в частности есть метод, урл, данные и ответ сервера. По нему можно смотреть что отвечал сервер в ответ на аякс, не нужно никаких файлов и прочей хрени, просто смотрим ответ сервера.
На стороне пхп - ПЕРВЫМ ДЕЛОМ если мы отсылаем какие-то данные мы проверяем в каком виде они пришли, то есть первой строчкой при отладке делаем var_dump($_POST); exit; и смотрим что пришло к серверу.

Comments

[Максим]

вардамп я уже делал, получаю следующее:
array(2) { ["form_id"]=> string(1) "1" ["delivered"]=> string(0) "" }
Т.е. id он определяет верно, а вот value с кнопки не видит :(
В нетворк определяется только dost.php с овтетом 200.
В консоли только это:
[Violation] Forced reflow while executing JavaScript

[ThunderCat]

Т.е. id он определяет верно, а вот value с кнопки не видит :(

И не должен, кнопка не является инпутом, соответственно не будет передаваться в списке данных формы и не имеет стандартного поля валуе, по этому и через скрипт не будет прочитан верно. Для этого и надо консолить переменные перед отправкой аяксом. Данные в кнопке храните в дата атрибуте, и вытаскивайте соответствующе.