Use jQuery to generate PrimeFaces button clicked, but the click event get called over and over

问题

Here is what I try to accomplish. I have a hidden form with two JSF inputText and a button. Wherever i click inside a div container, I will try to calculate the x and y coordinate relative to my container. Then use jQuery to set the value of x and y to the value of the two JSF inputText and submit the form. A managed bean behind the JSF page will try to catch the value of x and y submit.

Below are my codes. Please let me know what I did wrong, because method createNewInput inside managed bean myBean did not correctly get invoked.

EDIT2

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>        
<div id="result">Click an Element</div>
<div id="pdfCol">
    <h:form>
        <h:outputText value="#{note.test}"/>
        <p:commandButton actionListener="#{myBean.createNewInput}" value="Submit"/>  
        <!-- This button is to see when I click, whether the method inside managed bean get invoked. And it did. By looking at the log files.-->
    </h:form>

</div>
<div id="noteCol">            
    <h:form style="display:none;" prependId="false">
        <h:inputText id="coordX" value="#{myBean.newInputXCoordinate}"/>
        <h:inputText id="coordY" value="#{myBean.newInputYCoordinate}"/>
        <p:commandButton id="button" actionListener="#{myBean.createNewInput}" value="Submit"/>
    </h:form>
</div>

<script>
    jQuery("#noteCol").click(function(e){
        var offset = jQuery(this).offset();
        e.stopPropagation();                
        jQuery("#result").text(this.id + "Offset: (" + offset.left + ", " + offset.top + "), " + 
                "Relative Coordinate: (" + (e.pageX - offset.left) + ", " + (e.pageY - offset.top) + ")");

        jQuery("#coordX").val(e.pageX - offset.left);
        jQuery("#coordY").val(e.pageY - offset.top);

        jQuery("#button").click();
    });
</script>

On the server side, I print out the pair of coordinates when the method createNewInput() in the managed bean myBean is invoked. And gladly, I see the correct result of the two coordinates. However, it keep printing this pair of coordinates over and over again, but the values of the pair of the coordinates are NaN after correctly print out the first time. However do I fix this?

回答1:

I'm not sure why you get a NaN. Where do you see it? Also, it makes more sense to me if you calculate e.pageX - offset.left instead of the other way round. Further, setting input element's value in jQuery should be done by jQuery.val() function.

Also, JSF will prepend the generated HTML input element ID with the form ID which will cause that jQuery('#coordX') returns nothing. jQuery takes HTML element IDs, not JSF component IDs. You want to add prependId="false" to the <h:form> to disable that. But you should ensure that the same input components does not appear more then once in the output and that you don't have any other parent UINamingContainer components on the input components which will prepend their ID as well, to verify this you need to check if the generated HTML <input type="text"> has indeed the id="coordX" as you're attempting to select by jQuery.

Finally, the jQuery.submit() only works on HTML <form> elements, not on buttons. For that you rather want to use jQuery.click() instead.

So, summarized this should in theory work for you:

<div id="noteCol">
    <h:form prependId="false" style="display:none;">
        <h:inputText id="coordX" value="#{myBean.newInputXCoordinate}"/>
        <h:inputText id="coordY" value="#{myBean.newInputYCoordinate}"/>
        <h:commandButton id="button" actionListener="#{myBean.createNewInput}"/>
    </h:form>
</div>

<script>
    jQuery("#noteCol").click(function(e){
        var offset = jQuery(this).offset();
        e.stopPropagation();                
        jQuery("#result").text(this.id + "Offset: (" + offset.left + ", " + offset.top + "), " + 
                "Relative Coordinate: (" + e.pageX + ", " + e.pageY + ")");

        jQuery("#coordX").val(e.pageX - offset.left);
        jQuery("#coordY").val(e.pageY - offset.top);

        jQuery("#button").click();                
        // Or:
        // jQuery("#button").closest("form").submit();
    });
</script>

回答2:

Here is the solution to my problem. The problem is the click event got bubble up. So in order to stop this

jQuery("#noteCol").click(function(e){
    var offset = jQuery(this).offset();
    e.stopPropagation();                
    jQuery("#result").text(this.id + "Offset: (" + offset.left + ", " + offset.top + "), " + 
                "Relative Coordinate: (" + (e.pageX - offset.left) + ", " + (e.pageY - offset.top) + ")");

    jQuery("#coordX").val(e.pageX - offset.left);
    jQuery("#coordY").val(e.pageY - offset.top);

    jQuery("#button").click();
});

jQuery("#button").click(function(e){
    e.stopPropagation();
});

来源：https://stackoverflow.com/questions/5792863/use-jquery-to-generate-primefaces-button-clicked-but-the-click-event-get-called