Когда пользователь нажимает кнопку, мы должны проверить, вошли ли они в систему, отправив запрос ajax. Только после того, как запрос ajax будет возвращен, моя форма должна отображаться.
Запрос ajax возвращает ошибку (намеренно для целей иллюстрации), но моя форма все еще отображается.
Как я могу изменить свой код, чтобы display_form () запускался только после завершения check_loggedin ()?
Большое спасибо.
PS Я знаю, что есть различные сообщения о обещаниях, но, несмотря на попытки, мне не удалось их понять - было бы действительно полезно, если бы кто-нибудь мог изменить мой код, чтобы я понял, в чем я ошибаюсь - спасибо.
$(document.body).on('click', "#check_logged_in_show_form_if_true", function(){
check_loggedin().then(display_form());
});
function check_loggedin(myurl) {
return $.ajax({
method: 'get',
url: 'https://www.this-domain-will-cause-ajax-request-to-error.com',
data: {
foo: 1,
},
traditional : true,
beforeSend: function() {
},
success: function(data){
console.log('logged in - ok to show form');
return true
},
error: function(data){
// not logged in prompt user to sign in
console.log('ajax failed - do not show form');
return false
}
});
};
function display_form() {
$('#myform').show();
};
<div class="alert alert-success" id="myform" style="display: none;">
Only show this form if ajax request is successful
<input type="text" name="input" placeholder="" value="" class="form-control" >
</div>
<hr />
<span class="btn btn-primary" id="check_logged_in_show_form_if_true" >Display form if ajax request is successful (form should not show)</span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>