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??

  • Are you missing ! in '{$Component.errorPanel.msg}' or is it a mistake while posting? – highfive Aug 19 '14 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 '14 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 '14 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 '14 at 5:51
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.

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.