开发者

What causes a full request on this page?

开发者 https://www.devze.com 2023-03-27 22:54 出处:网络
Consider the following jsf page: <h:body> <h:form id=\"SessionStartDialog\"> <table> <tr>

Consider the following jsf page:

<h:body>
    <h:form id="SessionStartDialog">
        <table>
            <tr>
                <td class="label">
                    <h:outputLabel
                        value="Enter your username:" 
                        for="UsernameField"/>
                </td>
                <td class="input">
                    <h:inputText 
                        id="UsernameField"
                        value="#{login.username}"
                        validator="#{login.validateUsername}"
                        tabindex="1">
                        <f:ajax render="SelectWorkingSetListbox
                                StartSessionButton UsernameMessage" />
                    </h:inputText>
                    <h:message 
                        id="UsernameMessage"
                        for="UsernameField" />
                </td>
            </tr>
            <tr>
                <td class="label">
                    <h:outputLabel
                        value="Choose a working-set:" 
                        for="SelectWorkingSetListbox"/>
                </td>
                <td class="input">
                    <h:selectOneMenu
                        id="SelectWorkingSetListbox"
                        tabindex="2"
                        disabled="#{!login.showWorkingSets}"
                        value="#{login.selectedWorkingSetName}">
                        <f:selectItems 
                            value="#{login.workingSetNames}"/>
                        <f:ajax />
                    </h:selectOneMenu>
                </td>
            </tr>
        </table>
        <h:commandButton 
            id="StartSessionButton"
            styleClass="StartSessionButton"
            disabled="#{!login.showWorkingSets}"
            value="Start Session" 
            tabindex="3"
            action="#{login.startSession}" >
            <f:ajax execute="@form"/>
        </h:commandButton>
    </h:form>
</h:body>

Something in there causes Safari to report an error that ajax and full requests are being mixed. I do not understand why, as all components that cause requests contain <f:ajax>-tags. What is the problem here?

Update:

I have created a minimal example that triggers this error:

<h:body>
    <h:form>
        <f:ajax render="TextField">
            <h:inputText value="#{theBean.text}" />                
        </f:ajax>
        <h:outputText id="TextField" value="#{theBean.text}" />
    </h:form>
</h:body>

theBean is a simple view-scoped bean and text a property of type String. For some reason this triggers the following message in Safari 5.1:

httpError: The Http Transport returned a 0 status code. This is usually the result of mixing ajax and full requests. This is usually undesired, for both performance and data integrity reasons.

Update 2 The reason for this seem开发者_StackOverflow中文版 to be that hitting enter inside the input-field always triggers a full form submit. I have no idea how to prevent this. As shown in the first example, I want to user to enter a username, and then the other components of the form get enabled (only if the username is known). How would I implement this correctly?


I'd capture the Enter key on the <form> and instead trigger onchange on the <input> element where this key was pressed.

<h:form onkeydown="enterToChange(event)">
    ...
</h:form>

with

function enterToChange(event) {
  if (event.keyCode == 13 && event.target.tagName != 'textarea') {
    event.stopPropagation(); // Don't bubble up.
    event.preventDefault();  // Prevent default behaviour (submitting the form).
    event.target.onchange(); // Trigger onchange where key was actually pressed.
  }
}

Note that this ignores the enter key on textareas where you'd of course like to keep the intended behaviour (inserting a new line).

You could if necessary add an extra check to see if the submit button is not disabled and if that is the case, then just let the event go.


The cause of the problem is that, in the absence of an <h:commandButton> (in the first example it is initially disabled, in the second example, there is none), pressing return will trigger a submit of the entire form, causing the error shown in the question.

The resolution for now is to have the <h:commandButton> always enabled. Since it is <f:ajax>-enabled, this will prevent a full submit.

P.S.: I posted this answer to show a possible solution for others. I would still like to know if there is a better solution (one that does not require the presence of a <h:commandButton>).

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号