CODEWITHSUNDEEP
javajsf-2
smitas
smitas

Reputation: 21

JSF 2.0 partial rendering on page on document load

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.

Upvotes: 1

Views: 2860

Answers (2)

BalusC
BalusC

Reputation: 1108722

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

Upvotes: 1

Mikita Belahlazau
Mikita Belahlazau

Reputation: 15434

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.

Upvotes: 1

Related Questions