Ответ - TLDR - fetch_poll_data объявлена в вашей первой функции готовности документа и не может использоваться во втором.
(index): 115 Uncaught ReferenceError: fetch_poll_data не определена
Вы объявляетеваша функция fetch_poll_data () в вашем первом $(document).ready(function () { ... });, а затем пытается повторно использовать его во втором $(document).ready(function () { ... });.
С JQuery вам нужно только 1 Функция готовности документа.
Исправлено с использованием вашего кода:
<script>
function fetch_poll_data() {
$.ajax({
url: "fetch_poll_data.php",
method: "POST",
success: function (data) {
$('#poll_result').html(data);
}
})
};
$(document).ready(function () {
fetch_poll_data();
$('#poll_form').on('submit', function (event) {
event.preventDefault();
var poll_option = '';
$('.poll_option').each(function () {
if ($(this).prop("checked")) {
poll_option = $(this).val();
}
});
if (poll_option != '') {
$('#poll_button').attr("disabled", "disabled");
var form_data = $(this).serialize();
$.ajax({
url: "poll.php",
method: "POST",
data: form_data,
success: function (data) {
$('#poll_form')[0].reset();
$('#poll_button').attr('disabled', false);
fetch_poll_data();
alert("Poll Submitted Successfully");
}
});
} else {
alert("Please Select Option");
}
});
});
</script>
Рекомендация по передовому опыту
Я настоятельно рекомендую изменить способ использования JQuery и Ajax.Я также начинал как PHP Dev, и отправка HTML в браузер была намного проще, чем данные только через javascript.Но так как браузеры стали намного быстрее и поток данных требуется чаще, я бы рекомендовал возвращать данные только в виде JSON и позволять клиенту отображать HTML, он также намного меньше и быстрее с сетевой стороны.
SQL - вы правильно храните данные?
В настоящее время я полагаю, что вы добавляете новую строку для каждой платформы в таблицу с именем tbl_poll.Это может стать безумно большим.Представьте, что у вас есть 1000 голосов в день в рамках, то есть 5000 x 24 x 30 = 3,6 миллиона записей в месяц
Скорее сохраните ваш опрос как целые числа, а затем добавьте 1 на счет.Вы используете PDO, который может затем выполнить SQL в соответствии с UPDATE Polls SET Votes = Vote + 1 WHERE Framework = "Example Framework"
Обновление индикаторов выполнения при успешном возврате данных:
После отправки только чисел.Затем вы можете обновить ваши индикаторы выполнения Bootstrap, используя следующий Javascript / JQuery.Он обновит значения и анимацию индикатора выполнения начальной загрузки:
let dataFromPhp = [
{
name: "exampleFramework1",
votes: '5'
},
{
name: "exampleFramework2",
votes: '45'
},
{
name: "exampleFramework3",
votes: '21'
}
]
$.ajax({
url: "fetch_poll_data.php",
method: "GET",
dataType: 'json',
contentType: 'application/json',
success: function (dataFromPhp) {
$.each(dataFromPhp, function (eachObject) {
$('#progress-bar-id-' + eachObject.name).css('width', eachObject.votes + '%').attr('aria-valuenow', eachObject.votes);
});
}
});