Update einer JQuery-Fortschrittsbalken zur Laufzeit hinzugefügt

Question

Ich habe einige Probleme beim Aktualisieren einer Jquery-Fortschrittsbalken. Dieser Fortschrittsbalken ist in dem Dokument nicht während der Seite zu laden, ich hinzufüge es nur, wenn der Benutzer auf eine Schaltfläche klickt, ding etwas wie folgt aus:

$(this).parent().append('<div class="progressbar"></div>'); 
$(this).parent().children('div.progressbar').show(); 
$(this).parent().children('div.progressbar').progressbar({value: 20}); 

dann ein Timeout verwenden, ich versuche, zu aktualisieren, es

function updateProgressBar() { 
    $('.progressbar').each(function() { 
     myNewValue = getNewValue(); 
     $(this).progressbar('value', 50); 
    }); 
    setTimeout('updateProgressBar()', 5000); 
} 
setTimeout('updateProgressBar()', 5000); 

die Debug-Konsole klagt sagen: „nicht abgefangene: Methoden auf progressbar nicht vor aufrufen können initialiaztion: versucht zu rufen Methode‚Wert‘“ googeln hier fand ich, dass das Problem mit dem inizialization zusammenhängen könnte der Fortschrittsbalken nach das Laden der Seite

Könnte mir jemand helfen?

Vielen Dank im Voraus

- bearbeiten -

dank Bryan, versuche ich Ihre Lösung, aber ich für mich

nun diesen Code Ich habe

funktioniert nicht

function startProgress() { 

    $(this).parent().append('<div class="progressbar"></div>'); 
    $(this).siblings('.progressbar').show(); 
    $(this).siblings('.progressbar').progressbar({value: 0}); 

    function updateProgress() { 
     $('.progressbar').each(function() { 
      myNewValue = getNewValue($(this).parent().parent().attr('id')); 
      $(this).progressbar('value', myNewValue); 
     }); 
     setTimeout('updateProgress', 5000); 
    } 
    setTimeout('updateProgress', 5000); 
} 

Die Konsole ist sayng gibt es keine Update

definiert

- bearbeiten -

vielen vielen dank !!!

Jetzt habe ich eine ziemlich endgültige Version, die funktioniert ...

Hier ist meine aktuellen Code

if($(this).siblings('.progressbar').size() == 0) { 
     $(this).parent().append('<div class="progressbar"/>'); 
     $(this).siblings('.progressbar').progressbar({value: 0}); 
} 
$(this).siblings('.progressbar').show(); 

function updateProgress() { 
    $('.progressbar').each(function() { 
     myParams = 'service=' + $(this).parent().parent().attr('id') + '&content=' + $(this).parent().attr('id') 
     myUrl = '/datacast/content_progress/?' + myParams; 
     theValue = $(this).progressbar('value'); 
     $.get(myUrl, {}, function(aReply) { 
      myData = aReply.split(' '); 
      myItemId = myData[0]; 
      myValue = parseInt(myData[1]); 
      try { 
       $(".item[id = " + myItemId + "]").children(".progressbar").progressbar('value', myValue); 
      } 
      catch(myError) { 
       //alert(myError); 
      } 
     }) 
    }); 
    setTimeout(updateProgress, 5000); 
} 
setTimeout(updateProgress, 5000); 

Wie Sie sehen, ich hinzufügen, habe eine Kontrolle, ob bereits ein Fortschrittsbalken als Ich überlasse diesen Code mehrmals gründlich. Der Fortschrittsbalken wird jedes Mal aktualisiert, aber die Konsole beklagt sich mit "TypeError: Methode kann nicht aufgerufen werden 'apply' von undefined", daher musste ich den try-Block mit einem leeren Fangkörper hinzufügen, um den Fehler zu löschen. Die Seite funktioniert, aber es könnte interessant sein, wenn Sie eine Idee haben, warum es diesen Fehler gibt

Answer 1

Stellen Sie sicher, dass Sie den gleichen Selektor in Ihrer Update-Methode wie in der Initialisierungsmethode verwenden.

In dem bereitgestellten Code, tun Sie etwas wie und dann im Update tun Sie nur $('.progressbar'). Dieser zweite Aufruf könnte möglicherweise Artikel zurückgeben, die der erste nicht hatte, und bei diesen Artikeln wurde kein Fortschrittsbalken initialisiert.

Dieser Code funktionierte gut für mich:

$(function(){ 
    $('body').append('<div class="progress"></div>'); 

    var val = 10; 
    $('.progress').progressbar({value:val}); 

    function updateProgress() { 
     val += 10; 
     $('.progress').progressbar('value', val); 
     if(val < 100) 
      setTimeout(updateProgress, 1000); 
    } 

    setTimeout(updateProgress, 1000); 
}); 

Denken Sie auch daran, dass Sie eigentlich gar nicht auf diesen Ruf zu each() müssen als jquery Methoden automatisch auf alle Elemente mit dieser Auswahl übereinstimmen gelten sollte.

Beispiel:

$('.red').each(function(){ $(this).css({color:'red'}); });

ist überflüssig, und das gleiche kann erreicht werden durch:

$('.red').css({color:'red'});

Oh, und hier ist ein Freebie:

$(this).parent().children().find('.progressbar')

kann verkürzt werden zu: $(this).siblings('.progressbar')

Answer 2

Ok, ich kann nicht glauben, dass ich das verpasst habe. Das Problem besteht darin, dass Sie eine Zeichenfolge an die setTimeout-Funktion übergeben. Dadurch wird der Name der Funktion im globalen Bereich gesucht, was nicht der Fall ist.

ändern beide Anrufe:

setTimeout('updateProgress', 5000); 

zu

setTimeout(updateProgress, 5000); 

Answer 3

Hatte das gleiche Problem

Anscheinend müssen Sie das Format progressbar({value:30}) ersten Mal verwenden

Wenn Sie progressbar(value,30) das erste Mal, dann bekommen Sie t seine Ausnahme.