在Javascript之前触发JSF Ajax [英] Trigger JSF Ajax before Javascript

问题描述

我有一个使用JQuery的弹出式叠加页面.它具有一些字段和一个提交按钮. 提交后，弹出窗口的值应经过服务器端验证.如果所有值都成功，则弹出页面应关闭.

I've a popup overlay page using JQuery. It has some fields and a submit button. Upon submit, the values of the popup should be server-side-validated. If all the values are successful, the popup page should close.

我所做的是使用<f:ajax>验证字段，然后使用javascript检查后备bean中是否有错误消息.如果没有记录错误消息，则javascript将关闭弹出窗口，如果发现错误，则不执行任何操作.

当前，发生的情况是弹出窗口在调用侦听器之前关闭.

有没有办法在JavaScript onevent验证之前调用ajax侦听器?

What i did is to validate the fields using <f:ajax> then check if there are error messages in the backing bean using javascript. The javascript closes the popup if there are no error messages logged, and does nothing if errors are found.

Currently, what happens is that the popup closes before the listener is invoked.

Is there a way so that the ajax listener is invoked before the javascript onevent validation?

这是调用验证的commandLink:

Here is the commandLink that calls the validation:

<h:commandLink id="submitButton" value="submit">
    <f:ajax execute="popupPage" 
         render="popUpDetails popupMessages"
         onevent="closePopupDialogIfNoErrors"
         listener="#{controller.saveAndValidatePageValues}" />
</h:commandLink>

这是onevent事件中使用的jquery脚本:

And here is the jquery script used in the onevent event:

function closePopupDialogIfNoErrors(){
    if( #{backingBean.messages.size() == 0} ){
        $("#popupDialog").dialog('close');
    }
};

推荐答案

onevent属性附带的函数实际上将被调用 3 次.发送ajax请求之前的一次，到达ajax响应之后的一次和成功处理ajax响应的一次.您应该为此检查给定数据参数的status属性.

The function attached to the onevent attribute will actually be invoked three times. One time before the ajax request is been sent, one time after the ajax response is been arrived and one time when the ajax response is successfully processed. You should be checking the status property of the given data argument for that.

function onEventFunction(data) {
    var status = data.status; // Can be 'begin', 'complete' and 'success'.

    switch (status) {
        case 'begin': // On before the ajax request is sent.
            // ...
            break;

        case 'complete': // On after the ajax response is arrived.
            // ...
            break;

        case 'success': // On after the HTML DOM is updated (re-rendered).
            // ...
            break;
    }
}

但是，在您的特殊情况下，您似乎想在JS函数中评估EL.这不会那样工作.您基本上需要重新渲染整个JS函数，以便正确地重新评估EL.

However, in your particular case you seem to want evaluate EL in the JS function. This is not going to work that way. You'd basically need to re-render the whole JS function in order to re-evaluate the EL properly.

您最好的选择是将内联脚本放在render属性中引用的组件之一中.例如

Your best bet is to put an inline script in one of the components referenced in the render attribute. E.g.

<h:panelGroup id="popupMessages">
    <script>if (#{empty bean.messages}) $("#popupDialog").dialog('close');</script>
    ...
</h:panelGroup>

这篇关于在Javascript之前触发JSF Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！