Привет ребята, не могу разобраться.
После отправки комментария и получения успешного ответа ajax происходит innerhtml но при этом страницу прокручивает вверх.
Нашел только что надо задать для #notify фиксированный height, но это не подходит.
function pushComment() {
const comment_user = document.getElementById("comment_user").value;
const comment_data = document.getElementById("comment_data").value;
document.getElementById("notify").innerHTML = "";
if (comment_data.trim().length < 50) {
document.getElementById('notify').style.display = 'block';
document.getElementById('notify').style.background = '#c00';
const data = 'Сообщение слишком короткое';
//$('#notify').html(data);
notify.insertAdjacentHTML('afterbegin', 'Сообщение слишком короткое!<br>');
setTimeout(function(){
document.getElementById('notify').style.display = 'none';
}, 10000);
} else {
// ajax param
const data = {
comment_user: comment_user,
comment_data: comment_data,
};
$.ajax({
url: '/api/comments/push',
type: 'POST',
data: data,
success: function(data){
if (data.result == true) {
document.querySelectorAll('textarea').forEach(el=>el.value = '');
document.getElementById("notify").innerHTML = "";
document.getElementById('notify').style.display = 'block';
document.getElementById('notify').style.background = '#16a70e';
notify.insertAdjacentHTML('afterbegin', 'Ваш вопрос отправлен<br>Пожалуйста дождитесь ответа!<br>');
setTimeout(function(){
document.getElementById('notify').style.display = 'none';
}, 30000);
}
return false;
},
error: function(){
// return;
}
});
}
}
Форма:
<div class="comments__data__form">
<form action="/api/comments/push" method="post">
<input type="hidden" id="comment_user" name="comment_user" value="48160">
<textarea name="comment_data" id="comment_data" rows="6" placeholder="Напишите ваш вопрос ..."></textarea><a href="#" onclick="pushComment()">Задать вопрос</a>
</form>
</div>
