JSF 2.0 partial rendering on page on document load

Question

I have a page, one section of which I want to load only after the whole page is loaded. For this, I'm using the following code on the page:

<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>

also

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

This doRender is a bean property which I set once the AJAX call is done. But this is not loading the data. I can see the ajax method is getting called.

Why do send post request to `jspPath+'/myCommunity/ajax/hotTopicDiscussion.faces'` before you do actual jsf ajax request? — Mikita Belahlazau, Jan 14 '12 at 11:08
What is `rerendered` attribute in `h:panelGroup`? Does it actually exist? — Mikita Belahlazau, Jan 14 '12 at 11:10

score 1 · Answer 1 · answered Jan 14 '12 at 11:18

It seems, that your call of jsf.ajax.request is incorrect. According to JsDoc reference arguments of request are following:

source: The DOM element that triggered this Ajax request, or an id string of the element to use as the triggering element.

event: The DOM event that triggered this Ajax request. The event argument is optional.

options: The set of available options that can be sent as request parameters to control client and/or server side request processing.

So first element must be some element inside form or may be form itself. You may try to pass form's id or form element itself to this function.

BalusC · Answer 2 · 2012-01-15T12:10:37.350

Do you really need to submit a form ajaxically? That's where the jsf.ajax.request() is for. It seems like that you just want to load some static content inside some <div>. Just do as follows

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

Or, simpler, with jQuery.load():

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

In both cases, I assume that the hotTopicDiscussion.xhtml has <ui:composition> as root element and that it contains only the necessary HTML (and thus not <html> and so on).

If you indeed really need to submit a form ajaxically, then simplest would be to let JS "click" the button programmatically. It will delegate all the way up to the proper and needed jsf.ajax.request() call. A jsf.ajax.request() call is useless anyway without a physical form/button component on the page. You can if necessary hide the form by 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" />

hotTopicDiscussion.xhtml has ajax call something like : . This is getting called by someother page on the pageload and the render part is on tthis page only — smitas, Jan 17 '12 at 19:31

JSF 2.0 partial rendering on page on document load

2 Answers2

Linked