Блог

Вот чего я пытаюсь достичь. У меня есть скрытая форма с двумя входными текстами JSF и кнопкой. Где бы я ни щелкал внутри div контейнера, я буду пытаться вычислить x и y координату относительно моего контейнера. Затем используйте jQuery, чтобы присвоить значению x и y значение двух входных данных JSF и отправить форму. Управляемый компонент за страницей JSF попытается перехватить значение отправки x и y.

Ниже приведены мои коды. Пожалуйста, дайте мне знать, что я сделал не так, потому что метод createNewInput внутри управляемого компонента myBean был вызван некорректно.

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>
  

На стороне сервера я распечатываю пару координат при вызове метода createNewInput() в управляемом компоненте myBean . И, к счастью, я вижу правильный результат двух координат. Тем не менее, он продолжает печатать эту пару координат снова и снова, но значения пары координат являются NaN после корректной печати в первый раз.Однако я могу это исправить?

Я не уверен, почему ты получаешь NaN . Где вы это видите? Кроме того, для меня имеет больше смысла, если вы будете вычислять e.pageX - offset.left , а не наоборот. Кроме того, установка значения входного элемента в jQuery должна выполняться с помощью jQuery.val() функции.

Кроме того, JSF добавит к сгенерированному идентификатору элемента ввода HTML идентификатор формы, который приведет к тому, что это jQuery('#coordX') ничего не вернет. jQuery принимает идентификаторы HTML-элементов, а не идентификаторы компонентов JSF. Вы хотите добавить prependId="false" к <h:form> , чтобы отключить это. Но вы должны убедиться, что одни и те же входные компоненты не появляются более одного раза в выходных данных и что у вас нет других родительских UINamingContainer компонентов во входных компонентах, которые также будут добавлять свой идентификатор, чтобы убедиться в этом, вам нужно проверить, действительно ли сгенерированный HTML <input type="text"> имеет id="coordX" то, что вы пытаетесь выбрать с помощью jQuery.

Наконец, jQuery.submit() работает только с элементами HTML <form> , а не с кнопками. Для этого вы скорее захотите использовать jQuery.click() вместо этого.

Итак, вкратце, теоретически это должно сработать для вас:

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

Вот решение моей проблемы. Проблема в том, что событие щелчка всплывает. Итак, чтобы остановить это

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