AJAX刪除JSF表單事件處理程序

Question

我有一個帶有表單的JSF頁面，具有以下2個非標准要求：

某些輸入組件僅與其他輸入的某些設置相關。 即，如果在<h:selectOneMenu>選擇了某個值，則應適當顯示或隱藏另一個字段。
這是通過<f:ajax render="@form">和rendered屬性來處理的。 簡單。
在將請求發布到服務器之前，我需要在提交和重置時調用一些Javscript代碼。
這是通過在$(document).ready()事件處理程序中通過jQuery將事件處理程序添加到onsubmit和onreset事件的form元素來處理的。 也不難。

但是，我發現的是，一旦AJAX POST請求發生， onsubmit和onreset事件處理程序就會消失。 顯然$(document).ready()處理函數不會再次激活，因此不會重新創建它們-但是很奇怪，它們被刪除了。

有人可以告訴我我做錯了什么，還是一種更好的（正確的）方法來做到這一點？

用於演示目的的“基本Facelets”頁面：

（不需要輔助bean）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
    <title>Test page</title>
    <h:outputScript target="head" library="js" name="jquery.js" />
</h:head>
<h:body>
    <h:outputScript target="body">
        //Code just for debugging purposes
        function debugAjax(data) {
            console.log("AJAX onevent. Type=" + data.type + ", Status=" + data.status);
            debugEvents();
        }
        function debugEvents() {
            var evs = jQuery._data(document.getElementById('myform'), 'events');
            if (evs) {
                jQuery.each(evs, function(index, value) {
                    console.log(" - Event " + index + "=" + value);
                });
            } else {
                console.log(" - NO EVENTS");
            }
        }
    </h:outputScript>

    <h:outputScript target="body">
        jQuery(document).ready(function() {
            console.log("Adding handlers");
            jQuery("#myform").on({
                reset  : function() { console.log("RESET activated"); },
                submit : function() { console.log("SUBMIT activated"); }
            });
            debugEvents();
        })
    </h:outputScript>

    <h:form id="myform">
        <h:panelGrid columns="2">
            <h:outputLabel for="formType" value="Form type" />
            <h:selectOneMenu id="formType" value="#{formType}">
                <f:selectItem itemValue="1" itemLabel="Simple" />
                <f:selectItem itemValue="2" itemLabel="With additional data" />
                <f:selectItem itemValue="3" itemLabel="Another item" />

                <f:ajax render="@form" onevent="debugAjax" />
            </h:selectOneMenu>

            <ui:remove>conditionally displayed field</ui:remove>
            <h:outputLabel for="moreData" value="More data" rendered="#{formType eq '2'}" />
            <h:inputText id="moreData" value="#{moreData}"  rendered="#{formType eq '2'}" />
        </h:panelGrid>

        <h:commandButton type="reset" id="delete" value="Cancel" />
        <h:commandButton type="submit" id="submit" value="OK" />
    </h:form>
</h:body>
</html>

控制台輸出：

這是我的Javascript控制台中的輸出（已添加{{}}中的說明）

{{Initial load of page}}
GET http://localhost:8080/xxx/test.jsf [HTTP/1.1 200 OK 6ms]
"Adding handlers"
" - Event reset=[object Object]"
" - Event submit=[object Object]"
{{reset/submit event handlers work as expected}}
{{now changing dropdown that fires AJAX}}
POST http://localhost:8080/xxx/test.jsf [HTTP/1.1 200 OK 9ms]
"AJAX onevent. Type=event, Status=begin"
" - Event reset=[object Object]"
" - Event submit=[object Object]"
"AJAX onevent. Type=event, Status=complete"
" - Event reset=[object Object]"
" - Event submit=[object Object]"
"AJAX onevent. Type=event, Status=success"
" - NO EVENTS"
{{reset/submit event handlers DON'T work, but standard form resetting/submitting still works}}

該測試是從Firefox GlassFish 4.1（13）（Mojarra 2.2.7）運行的。

Answer 1

簡單的答案是，AJAX調用應該僅渲染表單內的部分或全部內容。 在上面的示例中，為<h:panelGrid>指定一個id會很好：

<h:panelGrid id="fieldgrid" columns="2">

...然后在AJAX調用中呈現：

<f:ajax render="fieldgrid" ... />

AJAX刪除JSF表單事件處理程序

問題描述

用於演示目的的“基本Facelets”頁面：

控制台輸出：

1 個解決方案

解決方案1
0 已采納 2016-07-24 17:42:37

AJAX刪除JSF表單事件處理程序

問題描述

用於演示目的的“基本Facelets”頁面：

控制台輸出：

1 個解決方案

解決方案1 0 已采納 2016-07-24 17:42:37

解決方案1
0 已采納 2016-07-24 17:42:37