I have a simple form , which has a output panel and pageMessage inside it .

        <apex:outputPanel id="errorPanel">
            <apex:message id="msg" />

I have visual force remoting function which returns a json result object containing message, errorCode if there is error, and other key/value parameters. Now once this json object is returned, there is a call back function which must display the error message on the screen if there is an error. How can i display the error message using the global $Component syntax? I am trying to set the title of the message as shown below, but I get this error: "Cannot set property 'title' of null" .

function handleresult (result,event){
            //display error message 
            var element =  document.getElementById('{!$Component.errorPanel.msg}');
            element.title = result.message;


Please help me out solving this issue??

  • Are you missing ! in '{$Component.errorPanel.msg}' or is it a mistake while posting?
    – highfive
    Aug 19, 2014 at 5:21
  • It is a mistake while posting, i am not missing it. I basically want the <apex:pageMessage> to show error message on the page if there is an error. Only that component should be refereshed without using <action:Function>. Hopes this helps
    – user10684
    Aug 19, 2014 at 5:25
  • 1
    give an id to the form as well and use the full path !$Component.theForm.errorPanel.msg. If form has parents(other than the <apex:page>) give ids for them as well and use the full path
    – highfive
    Aug 19, 2014 at 5:32
  • It is not working , i tried var element = document.getElementById('{!$Component.formId.errorPanel.msg}'); and if i do console.log(element). It shows null in the inspector.
    – user10684
    Aug 19, 2014 at 5:51

1 Answer 1


Since your <apex:message /> component is nested one, you might need to use more complete path specifier as described in the documentation here.

So try below VF code

<apex:form id="myForm">
        <apex:outputPanel id="errorPanel">
            <apex:message id="msg" />

And access it in your JS function as below.

var element =  document.getElementById('{!$Component.myForm.errorPanel.msg}');

Also note that if your form component has any parent components you might need to introduce ids for them as well and use that full path in your JS function.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .