function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Apex Code DevelopmentApex Code Development 

document.getElementById(divId) is getting null in javascript function

Hii Folks!!!!

 

I want to call a javascript function on page load.Based on the Role of the user who logs in,one of the divs should be visible(or Editable) and the remaining divs should be hidden(or UnEditable).

 

I'm providing my code for better understanding.Kindly look at it and I would be very thankful if you suggest a solution for this.

 

<apex:page standardController="Project_Management__c">

    <apex:form >
        <!--ZM-00E90000000cNj8EAE
        Executive-00E90000000cNjDEAU
        Director-00E90000000cNj3EAE-->
        <script src="/soap/ajax/19.0/connection.js" type="text/javascript"></script>
        <script src="/js/functions.js"></script>
        <script src="/soap/ajax/19.0/apex.js" type="text/javascript"></script>


        <script>           
            function GETINFO()
            {
                try{
                    sforce.connection.sessionId="{!$Api.Session_ID}";
                    var user = sforce.connection.getUserInfo();
                    alert('Username:'+user.userName);

                    alert('Role Id:'+user.roleId);
                    if(user.roleId == '00E90000000cNj8EAE'){        
                        
document.getElementById("div3").style.display='block';

                    }

                   if(user.roleId == '00E90000000cNjDEAU'){        
                        
document.getElementById("div4").style.display='block';

                    }

                   if(user.roleId == '00E90000000cNj3EAE'){        
                        
document.getElementById("div5").style.display='block';

                    }

                  }
                  catch(error){
                      alert(error);
                  }         
            }
            window.onLoad=GETINFO();
         </script>
         
 
           <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:inputField value="{!Project_Management__c.Name}"/>
            </apex:pageBlockSection>
           </apex:pageBlock>
          
           <div id="div1" style='float:left;clear:right'>
              <table>            
                <tr><td>Sr.No</td></tr>
                <tr><td>1</td></tr>
                <tr><td>2</td></tr>
                <tr><td>3</td></tr>
              </table>
            </div>


            <div id="div2" style='float:left;clear:right'>
              <table>
                <tr><td>Document Name</td></tr>
                <tr><td>Agreement-Hardware</td></tr>
                <tr><td>Agreement-Software and Service</td></tr>
                <tr><td>Road Permit Declaration</td></tr>
              </table>
            </div>


            <div id="div3" style='float:left;clear:right'>
              <table>
                <tr><td>Attached</td></tr>
                <tr><td><input id="zm1" type="checkbox"/> </td></tr>
                <tr><td><input id="zm2" type="checkbox"/></td> </tr>
                <tr><td><input id="zm3" type="checkbox"/></td> </tr>
              </table>
            </div>


            <div id="div4" style='float:left;clear:right'>
              <table>
                <tr><td>Checked</td></tr>
                <tr><td><input id="mis1" type="checkbox"/></td></tr>
                <tr><td><input id="mis2" type="checkbox"/></td></tr>
                <tr><td><input id="mis3" type="checkbox"/></td></tr>
              </table>
            </div>


            <div id="div5" style='float:left;clear:right'>
              <table>
                <tr><td>Approved</td></tr>
                <tr><td><input id="director1" type="checkbox"/></td></tr>
                <tr><td><input id="director2" type="checkbox"/></td></tr>
                <tr><td><input id="director3" type="checkbox"/></td></tr>
              </table>
            </div>


            <div id="div6" style='float:left;clear:right'>
              <table>
                <tr><td>Received</td></tr>
                <tr><td><input id="finance1" type="checkbox"/></td></tr>
                <tr><td><input id="finance2" type="checkbox"/></td></tr>
                <tr><td><input id="finance3" type="checkbox"/></td></tr>
              </table>           
            </div>
       
    </apex:form>

</apex:page>

 

 

 

Thanks & Regards,

Jagadeesh K.

Best Answer chosen by Admin (Salesforce Developers) 
AvromAvrom

Hi Jagadeesh,

 

So, the problem you're seeing is caused by your line

 

 

window.onLoad=GETINFO();

 

 

There are two problems with this line:

 

1) If you *call* GETINFO here (by using the parantheses), it will get executed immediately. This happens before the divs have been rendered. You just want to *pass* the function GETINFO. This is the issue you're seeing now.

2) The function that gets called when the window is loaded is window.onload (all lowercase). Javascript is case-sensitive.

 

So the line you actually want here is

 

 

window.onload=GETINFO;

 

 

All Answers

AvromAvrom

Hi Jagadeesh,

 

So, the problem you're seeing is caused by your line

 

 

window.onLoad=GETINFO();

 

 

There are two problems with this line:

 

1) If you *call* GETINFO here (by using the parantheses), it will get executed immediately. This happens before the divs have been rendered. You just want to *pass* the function GETINFO. This is the issue you're seeing now.

2) The function that gets called when the window is loaded is window.onload (all lowercase). Javascript is case-sensitive.

 

So the line you actually want here is

 

 

window.onload=GETINFO;

 

 

This was selected as the best answer
Apex Code DevelopmentApex Code Development

Dear Avrom,

 

Thanks you very much for your quick solution.

 

It worked as per my requirement.

 

Regards,

Jagadeesh K.