javascript - 最初の実行時にのみ呼び出されない f:ajax の Ajax リスナー

Question

JBoss AS 6.1 で Mojarra 2.1.13 と Richfaces 4.2.3.Final を使用した jsf ページの ajax リスナー実行で奇妙な問題が発生しました。次の例で問題を再現しようとしましたが、この例では問題は発生しません。

index.xhtml

実際のアプリケーションでは、フォームのコマンド ボタンが隠され、メソッドごとに実行されるため、要素を挿入してrich:jQueryjQuery を強制的に含めました。jQuery('#one:form:submit').click();

<h:body>
    <h:outputScript library="js" name="app.js"/>
    <rich:jQuery selector="document" query="ready(function(){app.init();})" timing="domready"/>
    <h:panelGroup layout="block">
        <c:forEach items="#{testBean.values}" var="value">  
            <c:if test="true">
                <test:component id="#{value}" value="#{value}">
                    <f:ajax event="click" listener="#{testBean.submit}" render=":out" />
                </test:component>
            </c:if>
        </c:forEach>
        <h:outputText value="#{testBean.text}" id="out" />
    </h:panelGroup>
</h:body>

リソース/テスト/コンポーネント.xhtml

コンテンツ内で使用される複合コンポーネント。

<composite:interface>
    <composite:attribute name="value" />
    <composite:clientBehavior name="click" event="click" targets="form:submit" default="true"/>
</composite:interface>

<composite:implementation>
    <h:form id="form" styleClass="objects">
        <h:inputText id="input" value="#{cc.attrs.value}"/>
        <h:commandButton id="submit" type="submit" value="submit"/>
    </h:form>
</composite:implementation>

com.example.TestBean

@ManagedBean(name = "testBean")
@ViewScoped
public class TestBean {

    private static final Logger LOGGER = Logger.getLogger(TestBean.class);
    private String text;
    private List<String> values;

    // Getters + Setter 

    @PostConstruct
    public void postConstruct() {
        setText("instanziated");
        setValues(new ArrayList<String>());
        getValues().add("one");
        getValues().add("two");
        LOGGER.info("TestBean initialized");
    }

    public void submit(final AjaxBehaviorEvent event) {
        LOGGER.info("executed");
        setText("executed");
    }
}

実際のアプリケーションでは、送信ボタンがクリックされたときに ajax イベントが発生しますが、リスナー メソッドは呼び出されませんが、最初の実行後、すべてが期待どおりに機能し、ajax リクエストが送信され、リスナー メソッドが呼び出されます。この外観は、ページ全体がリロードされるまで発生します。

---

アップデート：

コメント内で要求されているように、これは実際のアプリケーションの一部です。アプリケーションにはいくつかのドラッグ可能な要素があり、変更はサーバーに送信されてサーバー側に保存されます。したがって、は非表示の入力フィールドにoperation設定されます。dragさらに、変更は JSON に変換され、2 番目の非表示の input に設定されますvalue。これらの値が設定されると、送信ボタンが呼び出されて ajax リクエストが呼び出されます。

var app : {
    init : function() {
        jQuery(".objects").draggable({
            // event handling
            stop : function(event, ui) {
                // send changes to server
                app.submitDragOperation(this);
            }
        });
    },
    submitDragOperation : function(form) {
        app.setOperation(form,
            "drag",
            JSON.stringify({
                top: jQuery(form).css("top"),
                left: jQuery(form).css("left")
            })
        );
        app.submitOperation(form);
    },
    setOperation : function(form, operation, value) {

        var inputOpId = helper.fn.escapeColons("#" + jQuery(form).attr("id") + ":operation");
        var inputValId = helper.fn.escapeColons("#" + jQuery(form).attr("id") + ":value")
        jQuery(inputOpId).val(operation);
        jQuery(inputValId).val(value);
    },
    submitOperation : function(form) {
        // evaluate id of submit button
        var submitId = helper.fn.escapeColons("#" + jQuery(form).attr("id") + ":submit");
        jQuery(document).ready(function() {
            jQuery(submitId).click();
        });
    },
    submitDragOperation : function(form) {
        app.setOperation(form,
            "drag",
            JSON.stringify({
                top: jQuery(form).css("top"),
                left: jQuery(form).css("left")
            })
        );
        app.submitOperation(form);
    }
};