aggiornamento una barra di avanzamento JQuery aggiunto in fase di esecuzione

Question

sto avendo alcuni problemi durante l'aggiornamento di una barra di avanzamento jQuery. Questa barra di avanzamento non è nel documento durante il caricamento della pagina, sto aggiungendo solo quando l'utente fa clic su un pulsante, ding qualcosa di simile:

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

poi, utilizzando un timeout, sto cercando per aggiornarlo

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

la console di debug si lamenta dicendo: "Uncaught: non può chiamare i metodi su progressbar prima initialiaztion: tentato di chiamare 'valore' metodo" Googling qui ho scoperto che il problema potrebbe essere legato al inizializzazione della barra di avanzamento dopo il il caricamento della pagina

Qualcuno potrebbe aiutarmi?

Grazie in anticipo

- modifica -

grazie Bryan, sto cercando la soluzione, ma io non funziona per me

Ora ho questo codice

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); 
} 

La console è DIRE non c'è UpdateProgress definito

- modifica -

molte grazie !!!

Ora ho una versione del tutto definitiva che funziona ...

Ecco il mio codice corrente

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); 

Come potete vedere ho aggiungere un controllo se c'è già una barra di avanzamento come passo più volte quel codice più volte. La barra di avanzamento viene aggiornato ogni volta, ma la console si lamenta dicendo "TypeError: Non è possibile chiamare il metodo 'applicare' di indefinito", così ho dovuto aggiungere il blocco try con un corpo fermo vuota far cadere l'errore. La pagina funziona ma potrebbe essere interessante se si dispone di un idea del perché non c'è che l'errore

Answer 1

Assicurarsi che si sta utilizzando la stessa identica di selezione nel vostro metodo di aggiornamento come nel metodo di inizializzazione.

Nel codice fornito, stai facendo qualcosa come $(this).parent().children().find('.progressbar') e poi nell'aggiornamento stai semplicemente facendo $('.progressbar'). Quella seconda chiamata poteva potenzialmente restituire articoli che il primo non aveva, e quegli elementi non avrebbero una barra di avanzamento inizializzata.

Questo codice ha funzionato bene per me:

$(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); 
}); 

Inoltre, ricorda che in realtà non c'è bisogno che chiamata a each() come metodi di jQuery dovrebbero applicarsi automaticamente a tutti gli elementi abbinati a quel selettore.

Esempio:

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

è ridondante, e lo stesso può essere realizzato con:

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

Oh, e qui è un omaggio:

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

può essere abbreviato a: $(this).siblings('.progressbar')

Answer 2

Ok, non posso credere di averlo perso. Il problema è che stai passando una stringa alla funzione setTimeout. Questo gli farà cercare il nome della funzione in ambito globale, che non è.

Cambio entrambe queste chiamate:

setTimeout('updateProgress', 5000); 

a

setTimeout(updateProgress, 5000); 

Answer 3

avuto lo stesso problema

A quanto pare è necessario utilizzare il formato progressbar({value:30}) la prima volta

Se si utilizza progressbar(value,30) la prima volta che poi t sua eccezione.