[SalesForce] Need help understanding why the Javascript remoting doesn’t work on a standard Page Layout

This is driving me nuts. I have the most simple JSRemoting setup and for whatever reason I can not get this VF page to render on my Contact Layout. It's giving me a cross domain error and the only way that I can fix it seems to be to remove the @RemoteAction annotation from the controller/extension. I searched the net and saw other people were able to remote from a standard layout and I thought JSRemoting was supported in this use case?

Anyway, I'm getting this error from the console :

Uncaught SecurityError: Blocked a frame with origin "https://c.cs20.visual.force.com" from accessing a frame with origin "https://cs20.salesforce.com". Protocols, domains, and ports must match.

Even if I am not referencing the remote action I get it but if I remove the @RemoteAction annotation, the error goes away.

Any help would be greatly appreciated. Here is the super simple code I'm trying to use :

<apex:page applyHtmlTag="false" standardStylesheets="false" controller="jrTesting" 

showHeader="false" >
 <script type="text/javascript" src="{!URLFOR($Resource.Bootstrap3, 'bootstrap_3.1.1/js/jquery-1.11.0.min.js')}"/><apex:messages />
<html>
<head>
</head>
<body>
<p id="ts" >This is my paragraph...</p>



<script type="text/javascript">

var $j = jQuery.noConflict();
$j(document).ready(function() {

console.log($j("#ts").text());

$j("#ts").text("New Text here!");
callRA();
callRA2();
});



function callRA() {
 Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.jrTesting.getTheString}',
            function(r, e){           
             $j("#ts").text(r);  
            });

}

function callRA2() {
jrTesting.getTheString(function(r, e){           
             $j("#ts").text(r + ' from number 2!');  
            });

}


</script>

</body>
</html>
</apex:page>

controller :

public with sharing class jrTesting {

    public jrTesting() {

    }




    @RemoteAction
    public static string getTheString() {
        return 'Here is my return string';
    }

}

**UPDATE
To access it, the class and methods need to be global!**

Best Answer

Thanks for your response, @Regal. Well, after reading further, I am a dummy! Apparently you have to make your class and method Global! Anyway, for anyone else out there banging their head on the table about this, you can find the answer in the JSRemoting documentation here

@RemoteAction Scope Visualforce Page    Non-Global Component    Global Component    

iframe
Global Remote Method    Allowed Allowed Allowed Allowed
Public Remote Method    Allowed Allowed Error   Error
Related Topic