У меня проблемы с .when() .then() звонком в jQuery.
Я учитель, посещающий занятия по сканированию студенческих номеров. Итак, у меня есть форма, которую сканер идентификаторов успешно заполняет, а затем нажимает кнопку отправки. Это успешно инициирует вызов .when() и .ajax() успешно вызывает мой код, который заполняет Google Sheet.
Я хочу, чтобы список студентов, которые я успешно отсканировал, появился внизу страницы. , Я пытаюсь добавить этот список в вызов .then(), но он не выполняется.
<!DOCTYPE html>
<html>
<head>
<title>Student Automations</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
var student = $('#studentId').val();
var response;
$.when(
$.ajax('/logAttendance.php', {
type: 'POST', // http method
data: {
studentId: $('#studentId').val(),
spreadsheetId: $('#spreadsheetId').val(),
worksheet: $('#worksheet').val(),
studentIdCol: $('#studentIdCol').val()
}, // data to submit
success: function(data, status, xhr) {
response = student + " - added sucessfully";
},
error: function(jqXhr, textStatus, errorMessage) {
response = student + " - something went wrong";
}
})
).then(function(response) {
$('#listOfScanned').append('<li>' + response + '</li>'); //does not work
return false;
})
});
});
</script>
</head>
<body>
<form id='studIdForm'>Student ID: <input type='text' name='studentId' id='studentId' value=''>
<input type='hidden' name='spreadsheetId' value='mygooglesheetid' id='spreadsheetId'>
<input type='hidden' name='worksheet' value='Sheet1' id='worksheet'>
<input type='hidden' name='studentIdCol' value='A' id='studentIdCol'>
<button>Submit</button>
</form>
<script type='text/javascript' language='JavaScript'>
document.forms['studIdForm'].elements['studentId'].focus();
</script>
<p>Already scanned:</p>
<ul id="listOfScanned">
</ul>
</body>
</html>
Редактировать: Спасибо всем за столь быстрый ввод. У меня было несколько ошибок, в том числе тот факт, что URL, по которому я звонил, не возвращал JSON, что означало успех: операторы не вызывались. Я удалил .when и добавил несколько наворотов и закончил с этим.
<!DOCTYPE html>
<html>
<head>
<title>Student Automations</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="../css/main.css" />
</head>
<body>
<form id='studIdForm'>Student ID: <input type='text' name='studentId' id='studentId' value=''>
<input type='hidden' name='spreadsheetId' value='mygooglesheetid' id='spreadsheetId'>
<input type='hidden' name='worksheet' value='Sheet4' id='worksheet'>
<input type='hidden' name='studentIdCol' value='A' id='studentIdCol'>
<button>Submit</button>
</form>
<script type='text/javascript' language='JavaScript'>document.forms['studIdForm'].elements['studentId'].focus();</script>
<p>Already scanned:</p>
<ul id="listOfScanned">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('button').click(function(e){
e.preventDefault();
var student = $('#studentId').val();
$('#studentId').val('');
$.ajax('/logAttendance.php', {
type: 'POST', // http method
data: { studentId: student,
spreadsheetId: $('#spreadsheetId').val(),
worksheet: $('#worksheet').val(),
studentIdCol: $('#studentIdCol').val()
}, // data to submit
success: function (data, status, xhr) {
$('#listOfScanned').prepend('<li>'+ student + ' - added sucessfully</li>');
return false;
},
error: function (jqXhr, textStatus, errorMessage) {
$('#listOfScanned').preppend('<li>'+ student + ' - something went wrong</li>');
return false;
}
});
$('#listOfScanned').find('li').eq(3).remove();
$('#listOfScanned').find('li').eq(4).remove();
$('#listOfScanned').find('li').eq(5).remove();
});
});
</script>
</body>
</html>