Question

我正在尝试使用PrimeFaces 4.0实现进度条。

我在官方网站上关注了这个例子：

http://www.primefaces.org/showcase/ui/progressBar.jsf

但是，在复制并粘贴代码并运行后，

萤火虫告诉我那个

“PF未定义。”

请在下面找到我的代码：

<h:form>

            <p:growl id="growl" />

            <h3>Client Side ProgressBar</h3>
            <p:commandButton value="Start" id="start" type="button"
                onclick="start()" widgetVar="startButton1" />
            <p:commandButton value="Cancel" id="cancel" type="button"
                onclick="cancel()" />

            <p:progressBar id="progressBarClient" widgetVar="pbClient"
                style="width:300px" />

        </h:form>

下面是我的javascripts：

<script type="text/javascript">
function start() {
    PF('startButton1').disable();

    window['progress'] = setInterval(function() {
        var pbClient = PF('pbClient'),
        oldValue = pbClient.getValue(),
        newValue = oldValue + 10;

        pbClient.setValue(pbClient.getValue() + 10);

        if(newValue === 100) {
            clearInterval(window['progress']);
        }


    }, 1000);
}

function cancel() {
    clearInterval(window['progress']);
    PF('pbClient').setValue(0);
    PF('startButton1').enable();
}

基本上是从官方网站上复制的。

Answer 1

尝试类似的内容：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Title</title>
            </f:facet>
        </h:head>

        <h:body>
            <h:form>
                <p:growl id="growl" />
                <h3>Client Side ProgressBar</h3>
                <p:commandButton value="Start" id="start" type="button"
                                 onclick="start()" widgetVar="startButton1" />
                <p:commandButton value="Cancel" id="cancel" type="button"
                                 onclick="cancel()" />
                <p:progressBar id="progressBarClient" widgetVar="pbClient"
                               style="width:300px" />
            </h:form>

            <script type="text/javascript">
                function start() {
                    PF('startButton1').disable();

                    window['progress'] = setInterval(function() {
                        var pbClient = PF('pbClient'),
                                oldValue = pbClient.getValue(),
                                newValue = oldValue + 10;

                        pbClient.setValue(pbClient.getValue() + 10);

                        if (newValue === 100) {
                            clearInterval(window['progress']);
                        }


                    }, 1000);
                }

                function cancel() {
                    clearInterval(window['progress']);
                    PF('pbClient').setValue(0);
                    PF('startButton1').enable();
                }
            </script>
        </h:body>
    </f:view>
</html>

PrimeFaces 4.0 PF未定义

1 个答案: