Question

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?

Answer 1

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();
});