CODEWITHSUNDEEP
jsf
amine
amine

Reputation: 11

I can not retrieve the input value of javascript for jsf

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}" />

Upvotes: 0

Views: 156

Answers (2)

Luiggi Mendoza
Luiggi Mendoza

Reputation: 85779

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:

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

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

Upvotes: 3

amine
amine

Reputation: 11

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>

Upvotes: 1

Related Questions