通过 javascript 从 a4j:form 获取 inputHidden 的值的问题

Question

I have the following issue. I need to get the hidden value that is in a4j:form from javascript.

<a4j:form id="orderModalFormId">
    <h:form style="display:none;" prependId="false">
            <h:inputHidden id="maxVal" value="#{bean.maxVal}"/>
    </h:form>

    //...rest code where javascript is used

</a4j:form>

in javascript

...    
var maxValue =  jQuery('#orderModalFormId : maxVal').val();
...

The problem is that during javascript debugging maxValue remains still undefined. I'm pritty new in javascript and jQuery. Where is a trick? Thanks!

Answer 1

Creating the HTML psychically is tricky, but you almost certainly want just a simple id selector:

var maxValue = jQuery('#maxVal').val();

---

From the edit, it seems like you need this:

var maxValue = jQuery('#orderModalFormId\\:maxVal');

You need to escape the : so that jQuery doesn't parse it as a pseudo-selector. You need to use an escaped backslash ( \\: ) so that Javascript doesn't interpret \: as an escaped colon.

See jsFiddle for an example of an escaped colon in an id selector .

Answer 2

The : is an illegal character in CSS selectors and those spaces doesn't make it better.

Either use good ol' JS:

var value = document.getElementById("orderModalFormId:maxVal").value;

Or escape it by double backslash:

var value = jQuery("#orderModalFormId\\:maxVal").val();

Or use the jQuery attribute selector:

var value = jQuery("id=['orderModalFormId:maxVal']").val();

Or when the JS is embedded in a JSF page (and you're using RichFaces already):

var value = #{rich:component('maxVal')}.val();

Answer 3

Actually, both of you were right about the syntax but the problem was of another nature. It appeared that my ajax form didn't work with my javascript properly, so what i did was just pathing parameter of maxVal into this a4j:form by means of ui:include (my a4j:form is in separate xhtml file). Like this:

mainPage.xhtml

<h:form style="display:none;" prependId="false">
   <h:inputHidden id="maxVald" value="#{mainBean.maxVal}"/>
</h:form>

<ui:include src="/xhtml/include/orderModalForm.xhtml">
    <ui:param name="maxVal" value="#{mainBean.maxVal}"/>
</ui:include>

and in javascript i did like this

var maxFreezePeriod =  jQuery('#maxFreezePeriod').val();

Thanks for your answers:)