24

我们有一个更新动态包含的 ajax 导航菜单。包含文件有各自的形式。

<h:form>
    <h:commandButton value="Add" action="#{navigator.setUrl('AddUser')}">
        <f:ajax render=":propertiesArea" />
    </h:commandButton>
</h:form>
<h:panelGroup id="propertiesArea" layout="block">
    <ui:include src="#{navigator.selectedLevel.url}" />
</h:panelGroup>

它可以正常工作，但包含文件中的任何命令按钮在第一次单击时都不起作用。它仅适用于第二次点击。

我发现这个问题commandButton/commandLink/ajax action/listener method not invoked 或 input value not updated并且我的问题在第 9 点中描述。我知道我需要在 include 中明确包含的 ID<h:form>来<f:ajax render>解决它。

<f:ajax render=":propertiesArea :propertiesArea:someFormId" />

但是，在我的情况下，表单 ID 事先是未知的。此外，此表格最初在上下文中将不可用。

有没有解决上述情况的方法？

4

2 回答 2

45

您可以使用以下脚本来修复 Mojarra 2.0/2.1/2.2 错误（注意：这不会出现在 MyFaces 中）。此脚本将为javax.faces.ViewState在 ajax 更新后未检索任何视图状态的表单创建隐藏字段。

jsf.ajax.addOnEvent(function(data) {
    if (data.status == "success") {
        fixViewState(data.responseXML);
    }
});

function fixViewState(responseXML) {
    var viewState = getViewState(responseXML);

    if (viewState) {
        for (var i = 0; i < document.forms.length; i++) {
            var form = document.forms[i];

            if (form.method == "post") {
                if (!hasViewState(form)) {
                    createViewState(form, viewState);
                }
            }
            else { // PrimeFaces also adds them to GET forms!
                removeViewState(form);
            }
        }
    }
}

function getViewState(responseXML) {
    var updates = responseXML.getElementsByTagName("update");

    for (var i = 0; i < updates.length; i++) {
        var update = updates[i];

        if (update.getAttribute("id").match(/^([\w]+:)?javax\.faces\.ViewState(:[0-9]+)?$/)) {
            return update.textContent || update.innerText;
        }
    }

    return null;
}

function hasViewState(form) {
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].name == "javax.faces.ViewState") {
            return true;
        }
    }

    return false;
}

function createViewState(form, viewState) {
    var hidden;

    try {
        hidden = document.createElement("<input name='javax.faces.ViewState'>"); // IE6-8.
    } catch(e) {
        hidden = document.createElement("input");
        hidden.setAttribute("name", "javax.faces.ViewState");
    }

    hidden.setAttribute("type", "hidden");
    hidden.setAttribute("value", viewState);
    hidden.setAttribute("autocomplete", "off");
    form.appendChild(hidden);
}

function removeViewState(form) {
    for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        if (element.name == "javax.faces.ViewState") {
            element.parentNode.removeChild(element);
        }
    }
}

只需将其包含在错误页面的<h:outputScript name="some.js" target="head">内部即可。<h:body>如果您不能保证有问题的页面使用 JSF <f:ajax>，这会触发自动包含jsf.js，那么您可能希望在调用if (typeof jsf !== 'undefined')之前添加一个额外的检查jsf.ajax.addOnEvent()，或者通过

<h:outputScript library="javax.faces" name="jsf.js" target="head" />

请注意，jsf.ajax.addOnEvent仅涵盖标准 JSF <f:ajax>，而不包括 PrimeFaces<p:ajax>或<p:commandXxx>它们在 jQuery 下使用的工作。要同时涵盖 PrimeFaces ajax 请求，请添加以下内容：

$(document).ajaxComplete(function(event, xhr, options) {
    if (typeof xhr.responseXML != 'undefined') { // It's undefined when plain $.ajax(), $.get(), etc is used instead of PrimeFaces ajax.
        fixViewState(xhr.responseXML);
    }
}

如果您使用的是 JSF 实用程序库OmniFaces ，请更新，很高兴知道上述内容自 1.7 以来已成为 OmniFaces 的一部分。只需在<h:body>. 另请参阅陈列柜。

<h:body>
    <h:outputScript library="omnifaces" name="fixviewstate.js" target="head" />
    ...
</h:body>
于 2012-07-10T11:16:19.683 回答
5

感谢 BalusC，因为他的回答真的很棒（像往常一样:)）。但我必须补充一点，这种方法不适用于来自 RichFaces 4 的 ajax 请求。他们有几个关于 ajax 的问题，其中之一是没有调用 JSF-ajax-handlers。因此，当使用 RichFaces-components 对某个包含表单的容器进行重新渲染时，不会调用 fixViewState-function 并且 ViewState 会丢失。

在RichFaces 组件参考中，他们说明了如何为“他们的”ajax 请求注册回调（实际上他们正在使用 jQuery 来挂钩所有 ajax 请求）。但是使用它，我无法获得上面 BalusC 的脚本用来获取 ViewState 的 ajax-response。

所以基于 BalusC 的修复，我制定了一个非常相似的修复。在浏览器处理 ajax 请求之前，我的脚本将当前页面上所有表单的所有 ViewState 值保存在地图中。在更新 DOM 之后，我尝试恢复之前保存的所有 ViewStates（对于现在缺少 ViewState 的所有表单）。

继续：

jQuery(document).ready(function() {
    jQuery(document).on("ajaxbeforedomupdate", function(args) {
        // the callback will be triggered for each received JSF AJAX for the current page
        // store the current view-states of all forms in a map
        storeViewStates(args.currentTarget.forms);
    });
    jQuery(document).on("ajaxcomplete", function(args) {
        // the callback will be triggered for each completed JSF AJAX for the current page
        // restore all view-states of all forms which do not have one
        restoreViewStates(args.currentTarget.forms);
    });
});

var storedFormViewStates = {};

function storeViewStates(forms) {
    storedFormViewStates = {};
    for (var formIndex = 0; formIndex < forms.length; formIndex++) {
        var form = forms[formIndex];
        var formId = form.getAttribute("id");
        for (var formChildIndex = 0; formChildIndex < form.children.length; formChildIndex++) {
            var formChild = form.children[formChildIndex];
            if ((formChild.hasAttribute("name")) && (formChild.getAttribute("name").match(/^([\w]+:)?javax\.faces\.ViewState(:[0-9]+)?$/))) {
                storedFormViewStates[formId] = formChild.value;
                break;
            }
        }
    }
}

function restoreViewStates(forms) {
    for (var formIndexd = 0; formIndexd < forms.length; formIndexd++) {
        var form = forms[formIndexd];
        var formId = form.getAttribute("id");
        var viewStateFound = false;
        for (var formChildIndex = 0; formChildIndex < form.children.length; formChildIndex++) {
            var formChild = form.children[formChildIndex];
            if ((formChild.hasAttribute("name")) && (formChild.getAttribute("name").match(/^([\w]+:)?javax\.faces\.ViewState(:[0-9]+)?$/))) {
                viewStateFound = true;
                break;
            }
        }
        if ((!viewStateFound) && (storedFormViewStates.hasOwnProperty(formId))) {
            createViewState(form, storedFormViewStates[formId]);
        }
    }
}

function createViewState(form, viewState) {
    var hidden;

    try {
        hidden = document.createElement("<input name='javax.faces.ViewState'>"); // IE6-8.
    } catch(e) {
        hidden = document.createElement("input");
        hidden.setAttribute("name", "javax.faces.ViewState");
    }

    hidden.setAttribute("type", "hidden");
    hidden.setAttribute("value", viewState);
    hidden.setAttribute("autocomplete", "off");
    form.appendChild(hidden);
}

由于我不是 JavaScript 专家，我想这可能会进一步改进。但它绝对适用于 FF 17、Chromium 24、Chrome 12 和 IE 11。

这种方法的两个附加问题：

  • 再次使用相同的 ViewState-value 是否可行？即 JSF 是否为每个请求/响应的每个表单分配相同的 ViewState 值？我的方法是基于这个假设（我没有找到任何相关信息）。

  • 是否有人预计此 JavaScript 代码会出现任何问题，或者已经在使用任何浏览器时遇到了一些问题？

于 2014-04-11T08:56:00.013 回答