Wenn Sie den jQuery AJAX-Aufruf verwenden, scrollt die scrollTop() - Funktion zum letzten Element BEFORE AJAX call, anstatt AFTER

Question

Ich erstelle eine einfache Chat-Seite zur Verwendung durch Mitglieder meiner Website. Die Seite wird gerade produziert; Im Moment habe ich die Seite so eingerichtet, dass nur nach neuen Chat-Nachrichten gesucht wird, wenn ein Benutzer eine Nachricht sendet. Als Teil der jQuery-Funktion einschließlich des $ .ajax-Aufrufs habe ich einen von der StackOverflow-Community vorgeschlagenen Codeschnipsel verwendet, um zum Ende des div mit den Chats zu scrollen, aber dieser Code verhält sich "auf der falschen Seite" des $ .ajax Anruf. Mein HTML ist hier:

<div id="chat"> 

</div> 

<form id="chat-input"> 
    <textarea form="chat-input" id="message" name="message" placeholder="Type your message here..." autofocus></textarea> 
</form> 

Das ist meine jQuery ist:

$('#chat-input').submit(function() { 
      var new_chat = $('textarea[name=message]').val();//gets the value of the message box to send 
      var most_recent_chat = $('.chat-item:last-child').attr('data-chat-id');//gets the id# of the last chat 
      $.ajax({ 
       url: "/docs/chat/chat.php", 
       dataType: 'html', 
       type: "post", 
       data: { 
        new_chat: new_chat, 
        most_recent_chat: most_recent_chat, 
        new_sender: new_sender //Declared globally elsewhere 
       }, 
       success: function(data) { 
        $('#chat').append(data); 
       }, 
        error: function(jqXHR, exception) { 
        //switch containing various errors 
        }   
       } 
      }); 

      var divHeight = document.getElementById('chat').scrollHeight; 
      $('div#chat').scrollTop(divHeight); 
      document.getElementById('message').value=''; 
      event.preventDefault(); 
     }); 

Mein PHP-Skript gibt diese Informationen (I Ausgabe in HTML anstelle von JSON für Einfachheit beim Start - zu JSON Ausgabe auf einem Upgrade wird späteres Datum):

<div class="chat-item" data-chat-id="(int)">//each chat has a unique id so that my php processing page only returns new chats 
<p class="chat-message"><strong>(sender-name): </strong>(chat message)</p> 
<p class="chat-time">(time of message)</p></div> 

Jetzt für mein genaues Problem. Wenn ich eine Chat-Nachricht sende, funktioniert der Aufruf von $ .ajax gut. Meine Nachricht kommt an und wird ordnungsgemäß an das #chat div angehängt. Jedoch arbeitet diese Zeilen Code lustig:

var divHeight = document.getElementById('chat').scrollHeight; 
$('div#chat').scrollTop(divHeight); 

Mein #chat div hat eine feste Höhe von 400px und der Überlauf wird blättern. Viele andere Stack Overflow-Fragen legen nahe, dass der obige Code die #chat-Div nach unten scrollen lässt, und das tun sie - irgendwie. Anstatt die .scrollTop-Anweisung nach dem $ .ajax-Aufruf auf den niedrigsten Wert zu setzen, scheinen diese Codezeilen .scrollTop vor dem $ .ajax-Aufruf nach unten zu setzen (dh der zweitletzte-letzte Chat wird im Unterseite des div, wobei der letzte Chat vorhanden ist, aber nicht gescrollt wurde). Der Code ist Teil der Funktion .submit() des Formulars, befindet sich jedoch nach dem Aufruf von $ .ajax. Wie kann ich meinen Code ändern, um die neuen Chat-Nachrichten aufzunehmen, wenn jQuery nach unten scrollt?

Wenn das wichtig ist, verwende ich AMPPS v3.5 mit PHP v5.3 (mein Webhost verwendet immer noch 5.3) und ich teste in Firefox 46.0.1.

Answer 1

Ajax-Aufrufe sind asynchron. Das bedeutet, dass der Code unter ihnen ausgeführt wird, während der Anruf ansteht.

Ihr scrollTop-Aufruf wird also vor dem Aufruf von ajax.success ausgeführt.

Wenn das Scrolling nach dem Empfang einer Antwort durch den Ajax-Aufruf erfolgen soll, fügen Sie es in den Erfolgsrückruf ein.