Autoscrolling immer unten - Seite 4

LennySimpsons · 13.07.2011, 09:16

Klingt ja erstmal gut

Nur wie kombiniere ich dies nun mit meinem Ajax-Teil?

Eigentlich müsste ein Aufruf am Ende der Ajax-Funktion per onSuccess oder onComplete (Call-Back, also nach dem der Ajax-Request vom Server bearbeitet und beantwortet wurde -> erfolgreich oder dennoch) diese "neue" Funktion aufgerufen werden.

Sehe ich dies richtig?

Manko10 · 13.07.2011, 17:14

Nagut, weil heute Weihnachten ist. *hust*

HTML-Code:

<!DOCTYPE html>
<title>Testpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    #ScrollTest {
        border: 1px solid #000;
        padding: .4em;
        height: 20em;
        overflow: auto;
    }
</style>

<body>
<div id="ScrollTest"></div>
<script type="text/javascript">
    function AddRow(divID, row_text, doScroll) {
        var newDiv = document.createElement("div");
        newDiv.innerHTML = row_text;
        
        var objDiv = document.getElementById(divID);
        objDiv.appendChild(newDiv);
        if (doScroll) {
            objDiv.scrollTop = objDiv.scrollHeight;
        }
    }
    
    window.onload = function() {
        window.setInterval(function() {
            AddRow('ScrollTest', 'Lorem ipsum', true);
        }, 200);
    }
</script>

Bastel doch mal deinen AJAX-Code da rein. Was funktioniert jetzt nicht?

LennySimpsons · 14.07.2011, 11:06

Hi,

erstmal vielen Dank!

Aber...
... ich habe das ganze nun mal versucht mit Ajax (Framework prototype) zu realisieren und auslesen der Einträge aus einer DB. Allerdings dauert das Scrollen meiner Meinung nach zu lange.

Es wird ein Eintrag in die DB eingetragen und das Auslesen erfolgt schnell, jedoch wird der neue Eintrag im div-Container nicht direkt angezeigt, da gescrollt wird. Kurz danach (ca. 1 Sekunde) wird erst gescrollt und man kann den Eintrag sehen.

Mein bisheriger Code dazu:

Code:

<?php
  // Datei mit den benutzerdefinierten Funktionen
  require_once 'my-functions.php';

  // Datenbank-Objekt erstellen
  $db=new MyDb();

  // Ajax PeriodicalUpdater Aktionen abfangen und auswerten
  if ($_POST[action]) {
    switch ($_POST[action]) {
    case 'get_messages':
      $channelID=1;
      $userID=1;
      // Auslesen der Daten aus der Datenbank
      get_messages($userID,$channelID,$db);
      die;
      break;
    }
  }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="prototype.js"></script>
<title>Testpage</title>
<head>
<style type="text/css">
    #ScrollTest {
        border: 1px solid #000;
        padding: .4em;
        height: 20em;
        overflow: auto;
    }
</style>
</head>
<body>
<div id="ScrollTest"></div>

<script type="text/javascript">
//  var doScroll=true;

  function ScrollRow(doScroll) {
	    var objDiv = document.getElementById('ScrollTest');
	    if (doScroll) {
	      objDiv.scrollTop = objDiv.scrollHeight;
	    }
	  }
    
  new Ajax.PeriodicalUpdater('ScrollTest', '<?php echo $_SERVER[PHP_SELF]; ?>',
  {
    parameters: { action: 'get_messages', channel: '<?php echo $channelID; ?>' },
    method: 'post',
    frequency: 1,
    onSuccess: function(response) {
    	ScrollRow(true);
    }
  });

</script> 
</body>
</html>

Manko10 · 14.07.2011, 12:41

Laut Dokumentation wird onSuccess VOR dem Update ausgeführt. Da zu diesem Zeitpunkt aber noch nichts geschrieben ist, kann auch nicht gescrollt werden. Demnach wird erst beim nächsten erfolgreichen Ajax-Request gescrollt und da du als Frequenz 1 Sekunde eingestellt hast und es dazu noch eine gewisse Netzwerklatenz gibt, dauert das dann halt gut eine Sekunde.
Ich an deiner Stelle würde das dann mit dem PeriodicalUpdater lassen und die ganz normale Ajax-Klasse nutzen, die du dann per setInterval() periodisch aufrufst. Im onComplete-Callback kannst du dann beides tun: die Antwort ins Div schreiben und gleich danach scrollen.

BTW du solltest übrigens $_SERVER["SCRIPT_NAME"] statt $_SERVER["PHP_SELF"] nutzen.

LennySimpsons · 14.07.2011, 14:16

Danke für deine Antwort.

Frage 1) Wieso soll man $_SERVER[SCRIPT_NAME] und nicht $_SERVER[PHP_SELF] verwenden?

Frage 2)

Zitat:

Zitat von Manko10

Ich an deiner Stelle würde das dann mit dem PeriodicalUpdater lassen und die ganz normale Ajax-Klasse nutzen, die du dann per setInterval() periodisch aufrufst.

Wieso?
Und wie sähe die Umsetzung deiners Vorschlags aus?

Zitat:

Zitat von Manko10

Im onComplete-Callback kannst du dann beides tun: die Antwort ins Div schreiben und gleich danach scrollen.

Könnte ich denn nicht anstelle von onSuccess sowieso onComplete verwenden?

ChrisB · 14.07.2011, 14:21

Zitat:

Zitat von LennySimpsons

Frage 1) Wieso soll man $_SERVER[SCRIPT_NAME] und nicht $_SERVER[PHP_SELF] verwenden?

Weil letzteres die vom Client angeforderte Adresse darstellt, und damit manipulierbar ist. Stichwort XSS.

Zitat:

Frage 2) Ich an deiner Stelle würde [...]

Bitte zitiere vernünftig, unter Nutzung der [quote]-Tags, damit auch deutlich erkennbar ist, was von dir ist und was aus den Postings anderer stammt.

eagle275 · 14.07.2011, 14:21

weil PHP_SELF eine seit Jahren ausnutzbare Sicherheitslücke darstellt, wohingegen der Scriptname ja direkt aus der aktuellen Datei abgeleitet wird

LennySimpsons · 14.07.2011, 15:30

Danke, habe es im Skript auf SCRIPT_NAME geändert. Wusste nicht, dass PHP_SELF eine Sicherheitslücke ist.

Habe den ursprünglichen Post ebenfalls nachträglich zitiert.

Manko10 · 14.07.2011, 15:56

Zitat:

Wieso?

Grund habe ich schon genannt: weil du dann Update des Divs und Scrolling in einem Abwasch machen kannst und du nicht auf eine automatische Lösung angewiesen bist, die es nicht hinbekommt, einen Handler bereitzustellen, der erst NACH dem Div-Update ausgeführt wird.

Zitat:

Und wie sähe die Umsetzung deiners Vorschlags aus?

Ich denke, das kannst du selbst. Nimm die Prototype-Ajax-Klasse, mach damit deinen Request, pack das Ganze in eine anonyme Funktion und führe die per setInterval() periodisch aus. Im onComplete-handler updatest du das Div dann manuell und scrollst anschließend. Dafür werde ich dir jetzt kein Script vorbeten.

Zitat:

Könnte ich denn nicht anstelle von onSuccess sowieso onComplete verwenden?

Ich nutze Prototype nicht, aber ich kann die Dokumentation lesen und dort steht drinnen:

Zitat:

Zitat von http://www.prototypejs.org/api/ajax/periodicalupdater

Ajax.PeriodicalUpdater is not a specialization of Ajax.Updater, despite its name. When using it, do not expect to be able to use methods normally provided by Ajax.Request and “inherited” by Ajax.Updater, such as evalJSON or getHeader. Also the onComplete callback is hijacked to be used for update management, so if you wish to be notified of every successful request, use onSuccess instead (beware: it will get called before the update is performed).

Gut, ich weiß nicht, ob die Seite noch aktuell ist, da keine Version dransteht, aber da in der Doku für 1.7 steht:

Zitat:

Zitat von http://api.prototypejs.org/ajax/Ajax/PeriodicalUpdater/

(Note that it is not a subclass of Ajax.Updater; it's a wrapper around it.)

denke ich, dass sich das nicht geändert hat. Kannst es aber mal ausprobieren.

21.07.2011, 14:29

Hai...

probier mal folgendes...habe ebenfalls eine chat gebaut der auch automatsch scrollt:

function scroll() {
document.getElementById('main').scrollTop=document .getElementById('main').scrollHeight;
}

wobei 'main' die id des fensters ist...funzt perfekt.

gruß

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Autoscrolling im DIV (an Relative Position)	#EFEFEF	JavaScript, Ajax und mehr	21	28.01.2009 18:39

13.07.2011, 09:16
LennySimpsons Benutzer Registriert seit: 09.05.2011 Beiträge: 39 PHP-Kenntnisse: Anfänger	Klingt ja erstmal gut Nur wie kombiniere ich dies nun mit meinem Ajax-Teil? Eigentlich müsste ein Aufruf am Ende der Ajax-Funktion per onSuccess oder onComplete (Call-Back, also nach dem der Ajax-Request vom Server bearbeitet und beantwortet wurde -> erfolgreich oder dennoch) diese "neue" Funktion aufgerufen werden. Sehe ich dies richtig?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.07.2011, 12:41
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Laut Dokumentation wird onSuccess VOR dem Update ausgeführt. Da zu diesem Zeitpunkt aber noch nichts geschrieben ist, kann auch nicht gescrollt werden. Demnach wird erst beim nächsten erfolgreichen Ajax-Request gescrollt und da du als Frequenz 1 Sekunde eingestellt hast und es dazu noch eine gewisse Netzwerklatenz gibt, dauert das dann halt gut eine Sekunde. Ich an deiner Stelle würde das dann mit dem PeriodicalUpdater lassen und die ganz normale Ajax-Klasse nutzen, die du dann per setInterval() periodisch aufrufst. Im onComplete-Callback kannst du dann beides tun: die Antwort ins Div schreiben und gleich danach scrollen. BTW du solltest übrigens $_SERVER["SCRIPT_NAME"] statt $_SERVER["PHP_SELF"] nutzen. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

14.07.2011, 14:21
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	weil PHP_SELF eine seit Jahren ausnutzbare Sicherheitslücke darstellt, wohingegen der Scriptname ja direkt aus der aktuellen Datei abgeleitet wird __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

14.07.2011, 15:30
LennySimpsons Benutzer Registriert seit: 09.05.2011 Beiträge: 39 PHP-Kenntnisse: Anfänger	Danke, habe es im Skript auf SCRIPT_NAME geändert. Wusste nicht, dass PHP_SELF eine Sicherheitslücke ist. Habe den ursprünglichen Post ebenfalls nachträglich zitiert.

21.07.2011, 14:29
tommylee Gast Beiträge: n/a	Hai... probier mal folgendes...habe ebenfalls eine chat gebaut der auch automatsch scrollt: function scroll() { document.getElementById('main').scrollTop=document .getElementById('main').scrollHeight; } wobei 'main' die id des fensters ist...funzt perfekt. gruß