Question

我有一个页面，我只想在加载整个页面后加载其中的一个部分。为此，我在页面上使用以下代码：

<script type="text/javascript">
    alert("In the JS");
    $(document).ready(
        function() {
            $.post(jspPath+'/myCommunity/ajax/hotTopicDiscussion.faces', 
                function(data) {
                    jsf.ajax.request(this, 'post', {render: 'discussionTopic'});
                }
            );  
        }
    );
</script>

也

<h:panelGroup id="discussionTopic" reRendered="#{discussionBean.doRender}">

这个doRender是我在AJAX调用完成后设置的bean属性。但这不是加载数据。我可以看到ajax方法被调用了。

Answer 1

看来，您jsf.ajax.request的来电不正确。根据{{1}} request的论点如下：

源：       触发此Ajax请求的DOM元素，或用作触发元素的元素的id字符串。

事件：       触发此Ajax请求的DOM事件。事件参数是可选的。

选项：       可作为请求参数发送的可用选项集，用于控制客户端和/或服务器端请求处理。

因此，第一个元素必须是表单内的某个元素，或者可以是表单本身。您可以尝试将表单的id或表单元素本身传递给此函数。

Answer 2

你真的需要提交一个表格吗？这就是jsf.ajax.request()的用途。您似乎只想在某些<div>内加载一些静态内容。请按以下步骤操作

<script>
    $(document).ready(function() {
        $.get("#{request.contextPath}/myCommunity/ajax/hotTopicDiscussion.faces", function(data) {
            $("#discussionTopic").html(data);
        });
    });
</script>
<h:panelGroup id="discussionTopic" layout="block" />

或者更简单，jQuery.load()：

<script>
    $(document).ready(function() {
        $("#discussionTopic").load("#{request.contextPath}/myCommunity/ajax/hotTopicDiscussion.faces");
    });
</script>
<h:panelGroup id="discussionTopic" layout="block" />

在这两种情况下，我都假设hotTopicDiscussion.xhtml有<ui:composition>作为根元素，并且它只包含必要的HTML（因此不包含<html>等等。）

如果你确实确实需要以ajaxically方式提交表单，那么最简单的就是让JS以编程方式“点击”按钮。它将一直委托给适当且需要的jsf.ajax.request()电话。如果页面上没有物理表单/按钮组件，则jsf.ajax.request()调用无效。如有必要，您可以通过CSS隐藏表单。

<script>
    $(document).ready(function() {
        $("[id='form:button']")[0].onclick();
    });
</script>
<h:form id="form" style="display:none;">
    <h:commandButton id="button" action="#{bean.submit}">
        <f:ajax render=":discussionTopic" />
    </h:commandButton>
</h:form>
<h:panelGroup id="discussionTopic" layout="block" />

文档加载页面上的JSF 2.0部分呈现

2 个答案: