Update jQuery progress bar added at runtime

Question

I am having problems updating the jquery progress bar. This progress bar is not in the document while the page is loading, I only add it when the user clicks a button, something like this:

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

then, using a timeout, I'm trying to update it

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

the debugging console complains about the statement: "Impossible: cannot call methods on the progress bar before initialization: tried to call the" value "method Googling here I found that the problem may be due to the initialization of the progress bar after loading the page

Can someone help me?

Thanks in advance

- change -

thanks Brian, I'm trying to solve, but I'm not working for me

Now i have this code

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

, updateProgress

- -

!!!

, ...

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

, , , . , , "TypeError: " apply " undefined", try . , , ,

Answer 1

, progressbar({value:30})

progressbar(value,30) , .

Answer 2

, , . , setTimeout. , .

:

setTimeout('updateProgress', 5000);

setTimeout(updateProgress, 5000);

Answer 3

, , .

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

:

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

Also, remember that you really don't need this call each(), since jquery methods should automatically apply to all elements matching this selector.

Example:

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

is redundant, and this can be achieved with:

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

Oh, and here's a freebie:

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

can be reduced to: $(this).siblings('.progressbar')