Getting value of Inputhidden to Javascript

Question

I have very huge visualforce page.I am trying to access visualforce component in javascript.But I am getting component Id as null.How to access component Id in javascript

function createCommentForm() {

      alert('Id'+document.getElementById('{!$Component.requestslist}'));

        if(document.getElementById('{!$Component.newCaseComment.messag}').value == '') {
            showCommentMessage('FATAL', 'Comments must be entered.');
            return;
        }

        createComment(document.getElementById('{!$Component.newCaseComment.messag}').value,
                       document.getElementById('{!$Component.requestlist.request.caseId}').value );
    }


 function createComment(message,cId) {

       Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.RequestsController.createComment}',
           message,cId, 
            function(){}, 
         {escape: true}
        );       
    } 


    <apex:outputPanel id="requests">
                <ul class="nav nav-pills">
                    <li id="Open" class="active"><a onclick="changeCurrentRequestStatus('Open');">Open Requests <span class="badge">{!OpenRequestCount}</span></a></li>
                    <li id="Closed"><a onclick="changeCurrentRequestStatus('Closed');">Closed Requests <span class="badge">{!ClosedRequestCount}</span></a></li>

                </ul>

                <apex:outputPanel id="requestsList">
                <div class="row">
                <div class="col-md-6 col-sm-12" style="border-left: solid #DDD 1px">
                    <table class="table" id="tab">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Category</th>
                                <th>Location</th>
                                <th>Request Date</th>
                            </tr>
                        </thead>
                        <tbody id="tbod">
                            <apex:repeat value="{!Requests}" var="request">
                                <tr>
                                    <td><a onclick="send('{!request.Id}')">{!request.Subject}</a><input type="Hidden" id="caseId" value="{!request.Id}"/></td>
                                    <td>{!request.Type}</td>
                                    <td>{!request.Location__r.Name}</td>
                                    <td>
                                        <apex:outputText value="{0,date,MM/dd/yyyy}" >
                                            <apex:param value="{!request.CreatedDate}"/>
                                        </apex:outputText>
                                    </td>
                                </tr>
                            </apex:repeat>
                        </tbody>
                    </table>
                    </div>

I am trying to pass caseId as hidden element to my visualforce remote javscript

Added Page Source

  <div class="col-lg-9 col-md-9 col-sm-12"><span id="j_id0:requests">
                <ul class="nav nav-pills">
                    <li class="active" id="Open"><a onclick="changeCurrentRequestStatus('Open');">Open Requests <span class="badge">10</span></a></li>
                    <li id="Closed"><a onclick="changeCurrentRequestStatus('Closed');">Closed Requests <span class="badge">1</span></a></li>
                    <li id="Pending fix"><a onclick="changeCurrentRequestStatus('Pending fix');">Requests Pending Fix <span class="badge">0</span></a></li>
                </ul><span id="j_id0:requestsList">
                <div class="row">
                <div class="col-md-6 col-sm-12" style="border-left: solid #DDD 1px">
                    <table class="table" id="tab">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Category</th>
                                <th>Location</th>
                                <th>Request Date</th>
                            </tr>
                        </thead>
                        <tbody id="tbod">
                                <tr>
                                    <td><a onclick="send('500e0000002YLJkAAO')">test123</a><input id="caseId" type="Hidden" value="500e0000002YLJkAAO" /></td>
                                    <td>Problem</td>
                                    <td>Rosslyn</td>
                                    <td>11/11/2013
                                    </td>
                                </tr>
                                <tr>
                                    <td><a onclick="send('500e0000002YLJpAAO')">test123</a><input id="caseId" type="Hidden" value="500e0000002YLJpAAO" /></td>
                                    <td>Feature Request</td>
                                    <td>Rosslyn</td>
                                    <td>11/11/2013
                                    </td>
                                </tr>

It looks like your component reference and the components id are a different case. I'm not sure that's the issue, but you should try {!$Component.requestsList} ("L" is capitalized) instead of your current version. — Ralph Callaway
– Ralph Callaway, Commented Nov 13, 2013 at 20:00

sfdcfox · Accepted Answer · 2013-11-13 20:14:30Z

7

You have to specify the entire component path. This means that all intervening managed elements must have a literal ID value in order to function. In other words, {!$Component.requests.requestsList}. You should be aware that not all elements emit an ID, however. A "safer" bet would be to wrap the content inside a normal span tag, then you can query it as a literal ID:

<apex:outputPanel ...>
    <span id="requestList">
        <!-- ... -->
    </span>
</apex:outputPanel>

Finally, note that ID values tend to be case sensitive, so be sure you honor that.

answered Nov 13, 2013 at 20:14

sfdcfox

1

I have added <span id="caseId"><input type="Hidden" value="{!request.Id}" /></span></td> and the alert statement still shows as null alert('Id'+document.getElementById('{!$Component.requestsList.caseId}'));

sfdc
– sfdc

2013-11-13 20:32:17 +00:00
Commented Nov 13, 2013 at 20:32
1

If you're not using a managed element, do not use $Component-- simply use the normal ID, such as document.querySelector('#caseId)`.

sfdcfox
– sfdcfox

2013-11-13 21:54:02 +00:00
Commented Nov 13, 2013 at 21:54
document.querySelector('#caseId)` gets first caseId ..but i need to get onclick caseid <a onclick="send('{!request.Id}')">{!request.Subject}</a><input type="Hidden" id="caseId" value="{!request.Id}"/>

sfdc
– sfdc

2013-11-13 23:11:49 +00:00
Commented Nov 13, 2013 at 23:11

Add a comment |

Scott Pelak · Accepted Answer · 2013-11-14 01:27:19Z

I find using $Component to be a rough experience. The approach I take is to add CSS classes to the elements you're interested with, and then use jQuery to access the data of those elements.

Example:

<apex:inputHidden value="{!someFieldInYourController}" styleClass="inputHidden-1"/>

Scripts: jQuery

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"/>
<script>
    var j$=jQuery.noConflict();  // use this to avoid conflicting with how SF uses "$"

    j$(document).ready(function(){
        // ☜Ҩ.¬_¬.Ҩ☞   UPDATE   ☜Ҩ.¬_¬.Ҩ☞
        if(getInputHiddenValue()=='**nothing special**'){
          // do something
          confirm('Is this really '+getInputHiddenValue()+'?');
        }
        // ☜Ҩ.¬_¬.Ҩ☞   UPDATE   ☜Ҩ.¬_¬.Ҩ☞
    }

    // get your value
    function getInputHiddenValue(){
        var theValue = j$('.inputHidden-1').val();
        alert('The inputHidden value = '+theValue.toString());
        return theValue;
    }

    // ║▌║█║▌│║▌║▌█║▌║█║▌   UPDATE   ║▌│║▌║▌█║▌║█║▌│║▌║▌█
    function showTheInput(){
        if(getInputHiddenValue()!=null){
            j$('.inputHidden-1').parent().parent('.theSpecialDiv').fadeIn();
        }
    }
</script>

wherever you want to access the input's value, for instance, in another javascript function. see the updated example — Scott Pelak
– Scott Pelak, Commented Nov 14, 2013 at 1:18

Stack Exchange Network

Getting value of Inputhidden to Javascript

2 Answers 2

You must log in to answer this question.

Linked

Hot Network Questions

Getting value of Inputhidden to Javascript

2 Answers 2

You must log in to answer this question.

Linked

Related

Hot Network Questions