Problem z kolejnością wyświetlania.

Question

Mam problem i pewnie rozwiązanie jest banalne ale nie mogę go znaleźć. Chcę by nowa wiadomość w czacie pokazywała się u góry. Obecnie jest tak, że wiadomość dodaje na sam dół a po sekundzie jest na samej górze. Co zrobić by wiadomość od razu była pokazana u góry?

Tutaj zamieszczam kod.

						<script>
		$(document).ready(function(){
		$(document).on('submit', '#chatForm', function(){
			var text = $.trim($("#text").val());
			var name = $.trim($("#name").val());

			if(text != "" && name != "") {
				$.post('chatposter.php', {text: text, name: name}, function(data){
					$(".chatmessages").append(data);
					
					$(".chatmessages").scrollTop($(".chatmessages")[0].scrollHeight);
					$("#text").val('');
				});
			} else {
				alert("Musisz wpisac wiadomość!");
			}
		});
 $(function() {
    $("#text").keypress(function (e) {
        if(e.which == 13) 
		{
            var text = $.trim($("#text").val());
			var name = $.trim($("#name").val());

			if(text != "" && name != "") {
				$.post('chatposter.php', {text: text, name: name}, function(data){
					$(".chatmessages").append(data);
					
					$(".chatmessages").scrollTop;($(".chatmessages")[0].scrollHeight);
					$("#text").val('');
				});
			} else {
				alert("Musisz wpisac wiadomość!");
			}
        }
    });
});


		function getmessages() {
			$.get('getmessages.php', function(data){
				 var amount = $(".chatmessages li:first-child").prop('id');
      $(".chatmessages").html(data);
      var countMsg = data.split('<li').length - 1;
      Array=[countMsg, amount];
   });
   return Array;
		}
		setInterval(function(){
		var num =getmessages();
		if(num[0] > num[1]) {
				$(".chatmessages").scrollTop;($(".chatmessages")[0].scrollHeight);
		}
	},1000);
	

	});
					</script>

 

Answer 1

Zamień ten 1000 w setInterval na 0 lub nasłuchuj jakąś instrukcją, nie wiem jak się nazywa i jeśli wiadomość została dodana, niech włączy funkcję, która zmienia położenie wiadomości na samą górę.

Chyba to:

https://developer.mozilla.org/en-US/docs/Web/Events/change

W połączeniu z target powinno zadziałać. Przepisz skrypt na czysty JS.