简体   繁体   English

在f viewaction中像f ajax一样?

[英]Something like f ajax within f viewaction?

I need to show loading image while execute request when execute a f:viewaction , this sound as put f:ajax within f:viewaction , but this is impossible. 我需要在执行f:viewaction时执行请求时显示加载图像,这听起来像将f:ajax放在f:viewaction ,但这是不可能的。

<ui:define name="metadata">
    <f:metadata>
        <f:viewAction
            action="#{subscriptionManagementMB.loadSubscriptionManagement()}" />
    </f:metadata>
</ui:define>

There's a conceptual thinking mistake here. 这里有一个概念上的思维错误。 You can't show an image as long as the page with the image isn't loaded (whatever that image represents is irrelevant to the problem). 只要未加载带有该图像的页面,您就无法显示该图像(该图像表示的内容与该问题无关)。 In order to show an image, you need to make sure that the page with the image is fully loaded first. 为了显示图像,您需要确保包含图像的页面首先被完全加载。 Only when the page with the image is fully loaded, then you can invoke the desired business action. 只有当与图像的页面完全加载, 那么你可以调用所需的业务操作。

The <f:viewAction> is insuitable for this. <f:viewAction>不适合此操作。 The common approach is to let JavaScript trigger a server side action when end of <body> is reached, or during document ready/complete event, or during window load event. 常用的方法是让JavaScript在到达<body>结尾时,在文档准备/完成事件期间或在窗口加载事件期间触发服务器端操作。 The exact answer really depends on the libraries you've at hands. 确切的答案实际上取决于您所拥有的库。 The code can be insanely simplified when you've PrimeFaces and/or jQuery at hand. 当您拥有PrimeFaces和/或jQuery时,可以疯狂地简化代码。

Let's assume "plain vanilla" JSF/JS, here's a hacky way how to achieve the requirement: 让我们假设“普通香草” JSF / JS,这是一种达到要求的简单方法:

<h:body>
    <h:panelGroup id="content">
        <h:graphicImage name="loading.gif" rendered="#{not bean.loaded}" />

        <ui:fragment rendered="#{bean.loaded}">
            ... (put your content here)
        </ui:fragment>
    </h:panelGroup>

    <h:form id="form" style="display:none;">
        <h:commandButton id="button" action="#{bean.onload}">
            <f:ajax render=":content" />
        </h:commandButton>
    </h:form>

    <h:outputScript target="body">
        document.getElementById("form:button").onclick();
    </h:outputScript>
</h:body>

The image shows the loading image. 该图显示了加载图像。 The form, which is hidden using CSS display:none , holds an ajax command button which updates the content. 使用CSS display:none隐藏的表单包含一个ajax命令按钮,用于更新内容。 The script with target="body" will be relocated to end of <body> and invoke the hidden ajax command button when page is loaded. 具有target="body"的脚本将被重定位到<body>末尾,并在页面加载时调用隐藏的ajax命令按钮。

See also: 也可以看看:

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM