Störende Effekte bei refresh mittels setTimeout - Hilfe oder Alternative gesucht

Q

qsrs

Erfahrenes Mitglied
Hallo zusammen,

ich lade mittels setInterval Informationen, um die Benutzer in Echtzeit, ohne, dass die gesamte Seite neu geladen werden muss, über Ereignisse zu informieren (z.B. ob eine neue Nachricht eingegangen ist). Das wird dann meist in einem div-Element ausgegeben. Soweit alles ok.

Beispiel:

HTML: 
	$(document).ready(function() {
		$('#notify_messages_ph').load('library/notify_messages.php');
		var refreshId = setInterval(function() {
			$('#notify_messages_ph').load('library/notify_messages.php');

			}, 5000);
		$.ajaxSetup({ cache: false });
		});

Nun ist es jedoch so, dass ich auf der Seite, auf welcher dann setInterval aktiv ist, auch Elemente habe, die mittels Ajax bzw. jQuery geladen werden. Z.B. etwas wie dieses Beispiel zeigt: http://www.9lessons.info/2009/01/delete-record-using-ajax-get-method-and.html

Dadurch, dass setInterval alle paar Sekunden einen reload erzeugt, "Springen" nun z.B. Listen, die mittels jQuery/PHP/MySQL geladen werden. Also ich scrolle an das Ende der Liste, der Reload bewirkt, dass immer wieder hochgesprungen wird. Oder gelöschte Elemente verschwinden zwar beim Löschen kurz, tauchen dann aber wieder auf, wenn der Reload durchgeführt wird, bis die Seite komplett geladen wird, oder <ul>-Elemente, mit hover-Effekt, welche z.B. die Farbe ändern beim mouseover, flackern beim Reload.

Ich habe auch als alternative mit setTimeout gearbeitet - genau der gleiche Effekt.

Das gesamte Projekt hängt nun daran, ohne den Refresh kann nicht produktiv gegangen werden, wenn dadurch diese störenden Effekte das Arbeiten behindern. Ich würde mich über Hilfe und Ideen sehr freuen.

Wenn jemand eine Alternative hat, diese Reloads auch anders durchzuführen, sehr gerne.

Vielen Dank für eure Hilfe.
 
Zuletzt bearbeitet:
Ich muss doch aber den Inhalt aus einer PHP-Abfrage laden, was bei append nicht funktioniert, da 'library/notify_messages.php' dann als Text ausgegeben wird. Oder mache ich es falsch? Hast du ein Beispiel?
 
Ich bin davon ausgegangen, dass du dich mit jQuery etwas auskennst. "load()" ist ja nur eine Hilfsmethode die praktisch das hier macht:

Javascript: 
$.get('library/notify_messages.php', function(response) {
    $('#notify_messages_ph').html(response);
});

Jetzt kannst du natürlich "html()" durch "append()" ersetzen und dem Server noch die ID mit geben. Und wenn der Server jetzt noch JSON liefert, ist der Kreis geschlossen.


Sowas sollte vom Server kommen (PHP: http://php.net/manual/en/function.json-encode.php)
Javascript: 
{
    "maxID": 123,
    "content": "<strong>some html</strong>"
}


Client Code
Javascript: 
var lastID = 0;

$.get('library/notify_messages.php', {lastID: lastID}, function(response) {
    lastID = response.maxID;
    $('#notify_messages_ph').html(response.content);
});
 
Ja du hast Recht, so lange bin ich noch nicht mit jQuery beschäftigt, habe gerade erst damit angefangen. Allerdings konnte ich es jetzt anhand deines Beispieles umsetzen - die Effekte (Springen von Listen etc.) sind jedoch nach wie vor vorhanden.

Ich denke eher, dass setTimeout dieses Phänomen verursacht?
 
Das Problem sind nicht nur meine eigenen Code-Fragmente. Habe z.B. dieses simple Chat-Skript im Einsatz: http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/

Auch das lädt mittels setTimeout die Inhalte neu. Das führt bei jQuery/Ajax-Abfragen zu den benannten Effekten. Z.B. bei Funktionen wie diesen erhalte ich bei setTimeout sehr unschöne Effekte:

HTML: 
  <script type="text/javascript">
      $(document).ready(function(){
          function loading_show(){
              $('#loading6').fadeIn('fast');
          }
          function loading_hide(){
              $('#loading6').fadeOut('fast');
          }                
          function loadData(page){
              loading_show();                    
              $.ajax
              ({
                  type: "POST",
                  url: "library/message_history/load_data.php?filter_user_id_from="+<?php echo $_GET['user_id_from']; ?>,
                  data: {page:page, user_id:<?php echo $_GET['user_id']; ?>},
                  success: function(msg)
                  {
                      $("#container6").ajaxComplete(function(event, request, settings)
                      {
                          loading_hide();
                          $("#container6").html(msg);
                      });
                  }
              });
          }
          loadData(1);  // For first time page load default results
          $('#container6 .pagination li.active').live('click',function(){
              var page = $(this).attr('p');
              loadData(page);
              
          });           
          $('#go_btn').live('click',function(){
              var page = parseInt($('.goto').val());
              var no_of_pages = parseInt($('.total').attr('a'));
              if(page != 0 && page <= no_of_pages){
                  loadData(page);
              }else{
                  alert('Enter a PAGE between 1 and '+no_of_pages);
                  $('.goto').val("").focus();
                  return false;
              }
              
          });
      });
  </script>
 
Hallo nochmals,

ich glaube, ich bin auch nicht der einzige, der sein Vorhaben mittels load() umsetzt, das ist in fast allen Tutorials so beschrieben, so auch hier: http://www.qfine.de/?p=129
 
Zuletzt bearbeitet:
qsrs hat gesagt.:
ich glaube, ich bin auch nicht der einzige, der sein Vorhaben mittels load() umsetzt, das ist in fast allen Tutorials so beschrieben, so auch hier: http://www.qfine.de/?p=129
Zum Vergrößern anklicken....

Ich sage ja nicht, dass load() immer Probleme macht.

Ich kann dir im Moment nicht weiter helfen. Ohne das mal selbst zu sehen, kann ich auch nur raten.

Wenn das irgendwo online ist (wenn auch nicht-öffentlich), kannst du mir auch per PM den Link senden.
 
Hallo nochmals,

vielen Dank für dein Angebot, ich kam die letzten Tage nicht mehr dazu. Ich bin jetzt so weit, dass ich den Code, bei dem diese Effekte auftreten, gefunden habe:

HTML: 
  <script type="text/javascript">
      $(document).ready(function(){
          function loading_show(){
              $('#loading2').fadeIn('fast');
          }
          function loading_hide(){
              $('#loading2').fadeOut('fast');
          }                
          function loadData(page){
              loading_show();                    
              $.ajax
              ({
                  type: "POST",
                  url: "library/last_visitors/load_data.php",
                  data: {page:page, user_id:<?php echo $_GET['user_id']; ?>},
                  success: function(msg)
                  {
                      $("#container2").ajaxComplete(function(event, request, settings)
                      {
                          loading_hide();
                          $("#container2").html(msg);
                      });
                  }
              });
          }
          loadData(1);  // For first time page load default results
          $('#container2 .pagination li.active').live('click',function(){
              var page = $(this).attr('p');
              loadData(page);
              
          });           
          $('#go_btn').live('click',function(){
              var page = parseInt($('.goto').val());
              var no_of_pages = parseInt($('.total').attr('a'));
              if(page != 0 && page <= no_of_pages){
                  loadData(page);
              }else{
                  alert('<?php echo $language['1295']; ?> '+no_of_pages);
                  $('.goto').val("").focus();
                  return false;
              }
              
          });
      });
  </script>

Wenn z.B. über o.g. Skript ein Link ausgegeben wird, dann "flackert" dieser kurz, wenn etwas auf der Seite (z.B. das Chat-Skript) mit setTimeout einen reload durchführt. Auch das Springen an den Anfang der Seite tritt hier auf.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück