CODEWITHSUNDEEP
javascripthtmljsf-2
enthusiastic
enthusiastic

Reputation: 1702

Javascript is unable to access jsf outputText(label) element inspite of calling via id

I am trying to access the value of jsf outputText value using javascript but it throws undefined.Below is the code

    <ui:composition template="/template.xhtml">
            <ui:define name="head">
                <script type="text/javascript">
                    function sendDetails()
                    {
                        alert("am inside js");
                        var key=document.getElementById('editForm:key').value;
                        alert(key);
                    }
                </script>
            </ui:define>
    <ui:define name="body">
                <f:view>
                    <h:form id="editForm">
                        <h:outputLabel id="key" value="#{editController.details.clientId}" style="font-weight: bold" >
 <h:commandLink id="analytics" onclick="sendDetails()" value="View"></h:commandLink>

     </h:form>
     </f:view>
     </ui:define>
     </ui:composition>

When I click the command link it throws undefined!! I am not able to access the value of the output label.I checked view page source in firebug

<label id="editForm:key" style="font-weight: bold">

1e20bb95-753e-4252-b6d6-e109fa07171e

Which seems right..I checked with console.log(document.getElementById('editForm:key')) console.log(document.getElementById('editForm:key').value)which showed <label id="editForm:key"> undefined

How do I access the label/jsf outputtext value.I need a solution in javascript only

Upvotes: 2

Views: 3225

Answers (1)

Daniel
Daniel

Reputation: 37061

You can't get h:outputLabel value with .value, because its being rendered into HTML label tag and you can't get h:outputText value with .value, because its being rendered into HTML span tag.

Use .innerHTML instead for both tags.

You can find all its attributes with Firebug. Add this to watch 

document.getElementById('editForm:key')

for example, here are more attributes that hold its text

.innerHTML
.outerText
.textContent

Upvotes: 5

Related Questions