1

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

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

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){
if(!result.success){
            //display error message 
            var element =  document.getElementById('{!$Component.errorPanel.msg}');
            element.title = result.message;

            return;
}

Please help me out solving this issue??

Improve this question
4
  • Are you missing ! in '{$Component.errorPanel.msg}' or is it a mistake while posting? Commented 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 Commented 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 Commented 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. Commented Aug 19, 2014 at 5:51

1 Answer 1

Reset to default
2

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" />
        </apex:outputPanel>
</apex:form>

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.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.