f:ajax onevent reloads page on h:commandButton click

Question

Problem: For the below provided code snippet, the page reloads on click of h:commandButton if f:ajax onevent has function name provided as value, however for the same, if it has the function declaration provided as onevent value, it works as expected.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"" >

<h:head>
    <h:outputStylesheet library="blue" name="style/style.css" />
    <h:outputScript library="script" name="jquery-1.8.0.min.js" />

    <script>
        function jq(myid) {
            return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\\\$1" );
        }

        function confirmDelete(data){
            if(data.status == "success") {
                $("#confirmDelete").show();
                $(jq("licenseForm:buttons")).hide();
            }
            return false;
        }
    </script>
</h:head>
<h:body styleClass="bodyForm">
    <div class="content">
        <h:form id="licenseForm">
            <fieldset id="confirmDelete">
                <h:panelGroup>
                    <h:panelGrid columns="2">
                        <h:selectOneMenu value="#{bean.deleteReason}">
                            <f:selectItems value="#{metadata.deleteReasons}" />
                        </h:selectOneMenu>
                    </h:panelGrid>
                </h:panelGroup>
            </fieldset>
            <h:panelGroup id="buttons" layout="block">
                <h:commandButton value="Delete" styleClass="button">
                    <f:ajax onevent="confirmDelete" />
                </h:commandButton>
            </h:panelGroup>
        </h:form>
    </div>
</h:body>
</html>

JSF Version: Mojarra JSF Implementation 2.2.12
Server: Apache Tomcat 8.0.24

@BalusC There is no errors/warnings in the console. I have even found a [similar question](http://stackoverflow.com/questions/13794463) however it doesn't have any answer either. — dShringi, Feb 23 '16 at 09:33
Your problem is not reproducible for me. I can't run a debugger to naildown the culprit simply because I cannot reproduce the problem. Run a debugger yourself. — BalusC, Feb 23 '16 at 09:38
@BalusC Not sure of reasons, just sharing my observations. Changing the function name is what resolved the issue. The only conflict with the method name I could see, is the id attribute value for fieldset. So again I tried keeping the same function name and changing the fieldset id value and yes it worked. — dShringi, Feb 24 '16 at 05:11
That's recognizable as an Internet Explorer specific bug/misbehavior, that it pollutes the global JavaScript scope with DOM elements by their ID. Were you indeed using that thing? Chrome also does that by the way, but it won't override JS functions. — BalusC, Feb 24 '16 at 07:40
Your code snippet works fine for me in 47.0.2526.80 (64-bit Ubuntu) — BalusC, Feb 24 '16 at 08:03

score 0 · Accepted Answer · edited May 23 '17 at 11:59

This can happen if the webbrowser in question overrides the JavaScript function in some way. Internet Explorer and Chrome are known to put HTML elements with an id by their id in JavaScript global scope. So e.g. <element id="foo"> is available as variable foo in JavaScript global scope.

In your specific case, you have both a function confirmDelete() and a <fieldset id="confirmDelete">. It's however very unexpected that the DOM element would override the JavaScript function altogether. This suggests a bug in the browser used. Your best bet is to rename either the JavaScript function or the element ID to something unique in the global scope.

Unrelated to the concrete problem, your jq() is inefficient. This is better:

function jq(myid) {
    return document.getElementById(myid);
}

You perhaps want to rename the function too. For other hints on using jQuery in JSF see also How to select JSF components using jQuery?

f:ajax onevent reloads page on h:commandButton click

1 Answers1