Question

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

Answer 1

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.