Question

我对p：message标签有一个奇怪的问题。在第一个页面上，有一个dataTable，其中包含我数据库中的数据，我可以在p：dialog中进行编辑。一旦所有验证成功并且db中的更新完成，我将刷新dataTable并添加Faces消息信息以显示操作成功。在前端，我更新包含dataTable和对话框的表单。我的问题是显示了消息，但几乎立即消失了。就像message标签是使用表单更新的。我不明白

我试图将message标签移入和移出表单都没有做任何更改。我试图调整remoteCommand来仅更新dataTable和对话框，但是没有用。

<p:messages autoUpdate="true" showDetail="true" severity="info,error" />
<h:form id="form">
    <p:dataTable
    style="width: 80%; margin-left: auto; margin-right: auto; text-align:center"
        var="achievement" value="#{achievementBean.listAchievement}">
    ...
    </p:dataTable>

    <p:dialog header="#{i18n['achievement']}" widgetVar="dlg"
        dynamic="true" closable="false" resizable="false" showEffect="fade"
        hideEffect="fade">
        <h:panelGroup id="achievementDetail">
            <p:messages autoUpdate="true" severity="warn" />
            ...
            <h:panelGrid columns="2" style="width: 100%; text-align:center">
                <p:commandButton value="#{i18n['general.submit']}"
                    icon="fa fa-check"
                    actionListener="#{achievementBean.submitAchievement}"
                    oncomplete="if(!args.validationFailed){updateForm();}" />
                <p:commandButton value="#{i18n['general.cancel']}"
                    icon="fa fa-close" action="#{achievementBean.submitCancel}"
                    oncomplete="PF('dlg').hide();" update="@form" process="@this" />
            </h:panelGrid>
            <p:remoteCommand name="updateForm" update="@form" />
        </h:panelGroup>
    </p:dialog>
</h:form>

Answer 1

您的具体问题归结为：

<p:messages autoUpdate="true" />

<h:form>
    <p:dataTable ...>
       ...
    </p:dataTable>
    ...
    <p:dialog>
        ...
        <p:commandButton
            action="#{achievementBean.submitAchievement}"
            oncomplete="if(!args.validationFailed){updateForm();}" />
        <p:remoteCommand name="updateForm" update="@form" />
    </p:dialog>
</h:form>

autoUpdate="true"将在每个ajax请求中自动更新组件。
<p:commandButton>调用ajax请求，该请求添加一条消息并调用updateForm()远程命令。该消息显示在该ajax请求上。
<p:remoteCommand>调用另一个ajax请求。但是此消息不会添加任何消息，因此该ajax请求中不会显示任何内容。实际上，上一个ajax请求中显示的消息将被清除。

您可以使用命令组件的ignoreAutoUpdate属性来使其忽略任何autoUpdate-able组件。因此，您的解决方案是：

<p:remoteCommand name="updateForm" update="@form" ignoreAutoUpdate="true" />

也就是说，为什么您仍然在同一<p:dialog>中同时拥有<p:dataTable>和<h:form>？在您对上一个问题p:commandButton doesn't dislpay p:dialog的回答中，您似乎没有采纳或理解建议。我建议在其中将<p:dialog>移到<h:form>之外，并给它自己的<h:form>。这使这些事情变得更易于管理。

您应该始终给<p:dialog>自己的<h:form>。

<p:messages autoUpdate="true" />

<h:form>
    <p:dataTable ...>
       ...
    </p:dataTable>
    <p:remoteCommand name="updateForm" update="@form" ignoreAutoUpdate="true" />
</h:form>

<p:dialog widgetVar="dlg">
    <h:form>
        ...
        <p:commandButton
            action="#{achievementBean.submitAchievement}"
            update="@form"
            oncomplete="if(!args.validationFailed){PF('dlg').hide();updateForm();}" />
    </h:form>
</p:dialog>

另请参见：

How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?

Answer 2

感谢您的回答。对不起，我总是忘了它。下次我会尽量不要忘记它。我终于设法解决了我的问题。

我在第一个router.post('/pay', (req, res, next) => { fs.readFile('ProductDB.json', function (error, data) { if (error) { res.status(500).end() } else { const productsJson = JSON.parse(data) console.log(req.body.items) let content = []; let productSelect = req.body.items.map(product => { const itemJson = productsJson.find(function (i) { return i.productName === product.productName }).variations.find(function (i) { return i.id === product.id }) product.id != null ? content.push({ // PUSH TO CONTENT HERE "name": product.productName, "sku": product.id, "price": itemJson.variationPrice / 100, "currency": "USD", "quantity": product.qty }) : false }) let tariffObj = { "uk": 3.6, "us": 11.6, "rest-of-world": 11.6, "eu": 8.2 } let postalCategory = req.body.postalCategory let postalTarrif = tariffObj[postalCategory] let shipping = postalTarrif; let productSelectPrices = content.map(item => item.price * item.quantity); let productSelectTotal = productSelectPrices.reduce((acc, val) => acc + val, shipping).toFixed(2) let productSubTotal = productSelectPrices.reduce((acc, val) => acc + val, 0).toFixed(2) const create_payment_json = { "intent": "sale", "payer": { "payment_method": "paypal" }, "redirect_urls": { "return_url": `http://localhost:3000/success`, "cancel_url": `http://localhost:3000/cancel` }, "transactions": [{ "item_list": { "items": content }, "amount": { "currency": "USD", "total": productSelectTotal, "details": { "subtotal": productSubTotal, "shipping": shipping } }, "description": "first tea added to the store" }] } paypal.payment.create(create_payment_json, function (error, payment) { if (error) { throw error; } else { console.log("Create Payment Response"); console.log(payment); for (let i = 0; i < payment.links.length; i++) { if (payment.links[i].rel === "approval_url") { let redirectURL = payment.links[i].href res.json({ redirectUrl: redirectURL }) } } } }); /* After creating the response the user is redirected to paypal, where they enter their payment information after which they are returned to the website where the / success_api call is made */ router.route('/success_api').get((req, res) => { //CONTENT NOT UPDATED WITHIN THIS FUNCTION ON RE - RUNS console.log('re routed') const payerId = req.query.PayerID const paymentId = req.query.paymentId const execute_payment_json = { "payer_id": payerId, "transactions": [{ "item_list": { "items": content }, "amount": { "currency": "USD", "total": productSelectTotal, "details": { "subtotal": productSubTotal, "shipping": shipping } } }] } paypal.payment.execute(paymentId, execute_payment_json, function (error, payment) { if (error) { console.log(error.response); res.json({ message: 'payment error' }) } else { console.log(JSON.stringify(payment)); res.json({ message: 'Payment Successful' }) } }); }) } }) })
我在提交<p:message>

p：消息显示，但几乎立即消失

2 个答案:

另请参见：