function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Hitesh chaudhariHitesh chaudhari 

unable to call action function from javascript

<table id= "maintable" width="100%" >
          <tr>
            <td width="1%">
            	<table id="linkdetails" class="linksection">
                  <tr>
                    <th><a href="" onclick="callmyjs('CreateAccount');">Create Account</a></th>
                  </tr>
                  <tr>
                    <th><a href="" onclick="callmyjs('UpdateAccount');">Update Account</a></th>
                  </tr>
                  <tr>
                    <th><a href="" onclick="callmyjs('RetriveAccount');">Retrive Existing Account Details</a></th>
                  </tr>
               </table> 
            </td>
            <td>
            	<apex:outputPanel id="createacc">
            	            Create 
            	</apex:outputPanel>
            	
            	<apex:outputPanel id="updateacc">
            	            update 
            	</apex:outputPanel>
            	
            	<apex:outputPanel id="retriveacc">
            	            retrive 
            	</apex:outputPanel>
            </td>
          </tr>
        </table>
        
        <apex:actionFunction name="showcreateacc" rendered="createacc">
        </apex:actionFunction>
        
        <apex:actionFunction name="showupdateacc" rendered="updateacc">
        </apex:actionFunction>
        
        <apex:actionFunction name="showretriveacc" rendered="retriveacc">
        </apex:actionFunction>
    

    <script>
            function callmyjs(val)
            {  
                if(val == 'CreateAccount')
                {
                        alert('Create Account');
                        showcreateacc();                       
                }        
                if(val == 'UpdateAccount')
                {
                        alert('Update  Account');
                        showupdateacc();
                }        
                if(val == 'RetriveAccount')
                {
                        alert('Retrive Account'); 
                       showretriveacc();
                }        
                
            }
    </script>
</apex:form>
Above is the piece of code I am refering where i am trying to call action function from javscript method 

but when i am calling it is showing me error as Uncaught ReferenceError: showcreateacc is not defined 

what i want to do here is on create only create output panel should show other should be disable and same for retrive and udpate as well
devedeve
Hi Nick,

Action function is used to call a controller function directly from script but you only need to disable two output panel which you can do by this

<table id= "maintable" width="100%" >
          <tr>
            <td width="1%">
                <table id="linkdetails" class="linksection">
                  <tr>
                    <th><a href="" onclick="callmyjs('CreateAccount');">Create Account</a></th>
                  </tr>
                  <tr>
                    <th><a href="" onclick="callmyjs('UpdateAccount');">Update Account</a></th>
                  </tr>
                  <tr>
                    <th><a href="" onclick="callmyjs('RetriveAccount');">Retrive Existing Account Details</a></th>
                  </tr>
               </table> 
            </td>
            <td>
                <apex:outputPanel id="createacc">
                            Create 
                </apex:outputPanel>
                
                <apex:outputPanel id="updateacc">
                            update 
                </apex:outputPanel>
                
                <apex:outputPanel id="retriveacc">
                            retrive 
                </apex:outputPanel>
            </td>
          </tr>
        </table>

    <script>
            function callmyjs(val)
            {  
                if(val == 'CreateAccount')
                {
                        alert('Create Account');
                         document.getElementById('updateacc').style.display = 'none';  
                         document.getElementById('retriveacc').style.display = 'none';  
                }        
                if(val == 'UpdateAccount')
                {
                        alert('Update  Account');
                        document.getElementById('createacc').style.display = 'none';  
                         document.getElementById('retriveacc').style.display = 'none'; 
                }        
                if(val == 'RetriveAccount')
                {
                        alert('Retrive Account'); 
                       document.getElementById('createacc').style.display = 'none';  
                         document.getElementById('updateacc').style.display = 'none'; 
                }        
                
            }
    </script>
</apex:form>
Hitesh chaudhariHitesh chaudhari
Hi Deve,

Thanks for quick reply I tried your solution of using style.display

But it is giving me error in javascript : Uncaught TypeError: Cannot read property 'style' of null
devedeve
Try it now 
<table id= "maintable" width="100%" >
          <tr>
            <td>
                <apex:outputPanel id="createacc">
                            Create 
                </apex:outputPanel>
                
                <apex:outputPanel id="updateacc">
                            update 
                </apex:outputPanel>
                
                <apex:outputPanel id="retriveacc">
                            retrive 
                </apex:outputPanel>
            </td>
            <td width="1%">
                <table id="linkdetails" class="linksection">
                  <tr>
                    <th><a href="" onclick="callmyjs('CreateAccount');">Create Account</a></th>
                  </tr>
                  <tr>
                    <th><a href="" onclick="callmyjs('UpdateAccount');">Update Account</a></th>
                  </tr>
                  <tr>
                    <th><a href="" onclick="callmyjs('RetriveAccount');">Retrive Existing Account Details</a></th>
                  </tr>
               </table> 
            </td>
          </tr>
        </table>

    <script>
            function callmyjs(val)
            {  
                if(val == 'CreateAccount')
                {
                        alert('Create Account');
                         document.getElementById('updateacc').style.display = 'none';  
                         document.getElementById('retriveacc').style.display = 'none';  
                }        
                if(val == 'UpdateAccount')
                {
                        alert('Update  Account');
                        document.getElementById('createacc').style.display = 'none';  
                         document.getElementById('retriveacc').style.display = 'none'; 
                }        
                if(val == 'RetriveAccount')
                {
                        alert('Retrive Account'); 
                       document.getElementById('createacc').style.display = 'none';  
                         document.getElementById('updateacc').style.display = 'none'; 
                }        
                
            }
    </script>
</apex:form>
Hitesh chaudhariHitesh chaudhari
No still facing same issue looks like you changed the sequence of the tr and td