6

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 Nov 13 '13 at 20:00
  • even after updating to requestsList component id is null – sfdc Nov 13 '13 at 20:06
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.

  • 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 Nov 13 '13 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 Nov 13 '13 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 Nov 13 '13 at 23:11
5

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>
  • where are you calling getinputhiddenvalue() – sfdc Nov 13 '13 at 20:49
  • wherever you want to access the input's value, for instance, in another javascript function. see the updated example – Scott Pelak Nov 14 '13 at 1:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.