更新在运行时添加的JQuery进度条 [英] update a JQuery progress bar added at runtime

问题描述

我在更新jquery进度条时遇到了一些问题。在页面加载期间，此进度条不在文档中，我只是在用户单击按钮时添加它，ding类似于：

I'm having some problems updating a jquery progress bar. This progress bar isn't in the document during the page load, I'm adding it just when the user click on a button, ding 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 debug console complains saying: "Uncaught: cannot call methods on progressbar prior to initialiaztion: attempted to call method 'value'" Googling here I found that the problem could be related to the inizialization of the progress bar after the loading of the page

有人可以帮助我吗？

提前致谢

- 编辑 -

感谢Bryan，我正在尝试你的解决方案，但我不适合我

thanks Bryan, I'm trying your solution but i doesn't work for me

现在我已经有了这段代码

Now I've 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定义

The console is sayng there's no updateProgress defined

- 编辑 -

非常感谢!!!

现在我有一个非常确定的版本可行...

Now i've a quite definitive version that works...

这里我的当前代码

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：无法调用方法'应用'未定义，所以我不得不添加带有空catch主体的try块来删除错误。该页面有效，但如果你知道为什么会出现这个错误可能会很有趣

As you can see I've add a control if there is already a progress bar as i pass thorough that code several times. The progress bar is updated every time, but the console complains saying "TypeError: Cannot call method 'apply' of undefined", so I had to add the try block with an empty catch body to drop the error. The page works but it could be interesting if you have an idea why there's that error

推荐答案

有同样的问题

显然你必须首次使用格式进度条（{值：30}）

Apparently you must use the format progressbar({value:30}) the first time

如果您第一次使用进度条（值，30），则会出现此异常。

If you use progressbar(value,30) the first time then you get this exception.

这篇关于更新在运行时添加的JQuery进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！