I can not retrieve the input value of javascript for jsf

Question

I have a script that gives automatic address

<script src="${facesContext.externalContext.requestContextPath}/js/jquery.geocomplete.js"> </ script>

<script>
  $ (function () {
    $ ("# geocomplete " ) . geocomplete ( {
      map: , " Give us feedback . "
      details " form ul "
      detailsAttribute " geo - data "
    } ) ;

  } ) ;

and the jsf part here is the code!

<h:inputText id="geocomplete" style="margin-left:34%" type="text" value="#{creerCompteFacade.adresse}" />

but the problem that gives no automatic address

I changed

<input type="text" id="geocomplete" style="margin-left:34%" value="#{creerCompteFacade.adresse}" />

it works well and gives the automatic address but the problem that I can not retrieve the value

An Error Occurred :
    org.hibernate.exception.ConstraintViolationException : Column ' ADDRESS ' can not be null

I tried with JSFC but nothing has changed

<input jsfc="h:inputText" id="geocomplete" style="margin-left:34%"
    type="text" value="#{creerCompteFacade.adresse}" />

The exception says that you're trying to persist an EJBEntity's object into your database, that has a null column which is adress that cannot be retreived because it doesn't exist. Where's the JSF code ? — Omar, Oct 04 '13 at 19:09
@Omar the problem is that OP's using the wrong id for the `` generated HTML. — Luiggi Mendoza, Oct 04 '13 at 22:01
You're right. it seems he was basically missing the `` tag.. — Omar, Oct 04 '13 at 22:17

score 3 · Answer 1 · edited Dec 30 '17 at 11:28

Looks like your <h:inputText id="geocomplete"> is inside a <h:form>, like this:

<h:form>
    <h:inputText id="geocomplete" ... />
</h:form>

Thus the generated HTML may be:

<form>
    <input id="jsf_65461:geocomplete" type="text" ... />
    <!-- other HTML components... -->
</form>

You have two options to solve this:

Define an id for your <h:form> and then the generated id will be <formId>:<componentId>. Example:

<h:form id="frmGeo">
    <h:inputText id="geocomplete" ... />
</h:form>

That will generate

<form id="frmGeo">
    <input id="frmGeo:geocomplete" type="text" ... />
</form>

Then you can use this id in your JavaScript/jQuery code:

 $("#frmGeo\\:geocomplete") //the : must be escaped

Use prependId="false" in your <h:form> so the components inside the form will have the id set in JSF code:
```
<h:form id="frmGeo" prependId="false">
    <h:inputText id="geocomplete" ... />
</h:form>
```
That will generate
```
<form id="frmGeo">
    <input id="geocomplete" type="text" ... />
</form>
```
Then you can use this id in your jQuery code:
```
 $("#geocomplete")
```
As noted by BalusC, this approach will break the usage of <f:ajax> component, specifically for execute and render attributes. See UIForm with prependId="false" breaks <f:ajax render>

`prependId="false"` breaks ``. It's not recommended to use it. — BalusC, Oct 04 '13 at 23:08

score 1 · Accepted Answer · edited Oct 07 '14 at 17:19

1

I found the solution:

<script type="text/javascript">
    $(function(){
         $('input:text[id$="geocomplete"]').geocomplete({
            map: ".map_canvas",
            details: "form",
            country: "FR",
            types: ["geocode", "establishment"]
          });
     });              
</script>

edited Oct 07 '14 at 17:19

Patrice

4,641
9
33
43

answered Oct 07 '14 at 16:37

amine

11
2

I can not retrieve the input value of javascript for jsf

2 Answers2