2016-04-19 15 views
0

Ich möchte die Anzahl der Geräte aus meiner Datenbank (durch Zählen Zeilen) abrufen und präsentieren sie in einem Widget mit dem aktualisierten Wert wie die Seite lädt.jQuery AJAX Update Widget als Seite geladen

Hier ist mein Code:

 <div class="col-lg-3 col-sm-6"> 
      <div class="widget-panel widget-style-2 white-bg"> 
       <i class="ion-eye text-pink"></i> 
       <h2 class="m-0 counter"><span id="server_count">100</span></h2> 
       <div>Servers</div> 
      </div> 
     </div> 

... 

    $(function(){ 

     $.ajax({ 

      type: 'POST', 
      url: 'dashboard/analytics/server_count', 
      success: function(result) { 
       //alert(result); 
       $('#server_count').html(result); 
       }, 
      error: function() { 
       alert("problem"); 
       } 

     }); 

    }); 

Der Alarm zeigt den richtigen Wert in der Erfolgsfunktion, aber ich habe Probleme mit der Aktualisierung div wie die Seite gerendert wird; Das heißt, es zeigt immer noch den standardmäßigen statischen Wert (100).

Irgendwelche Ideen zu was ich vermisse? Wie sollte ich dies schreiben, so dass der Standardwert immer von dem dynamischen Wert, der aus der DB gezogen wird, rechtzeitig zum Laden der Seite überschrieben wird? Vielen Dank!

+0

Wie lautet die Antwort der Ajax-Anfrage? –

+0

Es zieht eine Ganzzahl, die der Anzahl der Zeilen in meiner Tabelle – kilele

+0

entspricht, wenn die Antwort Ihrer Anfrage eine Ganzzahl oder String-Nummer ist, dann ist nichts falsch an der Ajax-Anfrage. Sie können versuchen, Fehler auf der Entwicklerkonsole zu überprüfen, wenn Fehler vorhanden sind. –

Antwort

0

Stellen Sie sicher, dass Ihre Funktion in $(document).ready(function() }); ist.

+0

ah .. doch ist es, aber keine Veränderung. Kuriose Sache ist, wenn ich Alert ($ ('# server_count') hinzufügen. Html()); Innerhalb der Erfolgsfunktion als erster Eintrag, um den aktuellen Wert zu erhalten, bekomme ich "undefiniert". Es zieht nicht die statische 100. – kilele

+0

Nicht sicher dann. Ich machte eine Geige https://jsfiddle.net/xch1fLsx/ und mit den gleichen Prinzipien (kein Ajax) und es funktioniert wie erwartet. Vielleicht könntest du mehr Code posten, um dein Problem zu klären?!? –

0

Gefunden das Problem, das Counter-up-Plugin zu sein, von der Klasse 'Zähler' auf dem h2 Selektor aufgerufen. Es ist noch nicht sicher, warum die Zählungsanimation die Anzeige des Ajax-Ergebnisses verhinderte, aber nach dem Entfernen der Klasse werden die Werte wie erwartet aktualisiert.

Verwandte Themen