Ajax: setInterval Funktion aktualisiert nicht HTML (aber es funktioniert)

-1

Ich habe mehrere div s in Code. Ich muss das HTML innerhalb, basierend auf API Anfrage aktualisieren. Es funktioniert, aber HTML aktualisiert nicht (d. H. Wenn ich via API ein neues Ergebnis bekomme, bleibt html gleich von der ersten iterate, aber in firebug kann ich neues HTML lesen, das in die Seite injiziert werden kann).Ajax: setInterval Funktion aktualisiert nicht HTML (aber es funktioniert)

$('div.show-gpio-state').each(function(i, obj) { 
     var id_gpio = $(this).data('id-gpio'); 
     getGpioState(id_gpio,$(this)); 
     setInterval(function(){getGpioState(id_gpio,$(this))}, 5000); 
    }); 

function getGpioState(id_gpio,box) { 

    $.ajax(
      { url: api_gpio_url+id_gpio, 
       cache:false, 
       success: function (result) { 
        box.html(''); 
        var state = result; 
        var final_state = ''; 
        if ((state==='error') || (state==='')) { 
         final_state = '<span class="text-danger"><i class="fa fa-fw fa-2x fa-exclamation-triangle"></i></span>'; 
        } else { 
         if (state==1) { 
          final_state = '<p class="h2"><i class="fa fa-fire text-success"></i></p>'; 
         } else { 
          final_state = '<p class="h2"><i class="fa fa-remove text-grey"></i></p>'; 
         } 
        } 
       box.html(''); 
       box.html(final_state); 
       // here in console I have right final state for right box 
       console.log(final_state); 
       console.log(box); 

      } 
     }); 

}

Quelle

2016-11-30 sineverba

Warum testen Sie Fehler in Ihren Erfolg Rückruf? Warum nicht einfach das Ergebnis akzeptieren und es dort einspeisen, wo es hingehört und einen zweiten Fehler-Callback einrichten? –

Mögliches Duplikat von [Wie funktioniert das "dieses" Schlüsselwort?] (Http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) –

Ändern Sie diese

setInterval(function(){getGpioState(id_gpio,$(this))}, 5000);

setInterval(function(){getGpioState(id_gpio,$(this))}.bind(this), 5000);

oder zuweisen $(this) variabel und übergeben innerhalb setInterval Funktion

Quelle

2016-11-30 19:04:37 maheshiv

Die Gründe, die funktionieren, ist der Funktionsumfang von 'this', weil Sie im' setInterval' eine neue Funktion mit einem eigenen Bereich definieren. Also bezieht sich 'this' auf die' setInterval'-Funktion anstelle von jQuery 'each' Funktion – empiric

Sie beheben könnte es mögen:

setInterval((function(_this){ 
    return function(){ 
    getGpioState(id_gpio,$(_this)); 
    }; 
}(this)), 5000);

Das Problem hängt damit zusammen, wie scope und this Schlüsselwort in JavaScript funktioniert.

Oder Sie könnten auch nur eine Variable verwenden:

$('div.show-gpio-state').each(function(i, obj) { 
    var id_gpio = $(this).data('id-gpio'); 
    var $this = $(this); 
    getGpioState(id_gpio,$this); 
    setInterval(function(){getGpioState(id_gpio,$this)}, 5000); 
});

Um mehr über das Thema erfahren Sie diesen Beitrag lesen: Understand JavaScript’s “this” With Clarity, and Master It

Quelle

2016-11-30 19:08:52

Ajax: setInterval Funktion aktualisiert nicht HTML (aber es funktioniert)

Antwort

Verwandte Themen