Question

I have created a simple vf page and placed and small jQuery script in the vf page (below code). I have added this vf page as an inline VF page in the Case detail page. In the jQuery I am trying to pick up the case number by passing the id of the div in which the case number is present and alerting the result. But I am getting a blank pop-up.
But when I try the same, by placing the jQuery in the sidebar, its working just fine.

<apex:page standardController="Case">
<script src="/resource/jQueryLatest" type="text/javascript"></script>
<script type="text/javascript">
j$(document).ready(function(){
    var caseNumber = j$("#cas2_ileinner").text();
    alert(caseNumber);
});
</script>
</apex:Page>

Problem: not able to access the DOM elements of the standard detail page from a jQuery script which is placed in the inline vf page on the same page.

please help!

Regards
Sam

Answer 1

Yep, that “works as expected”. Visualforce is served from different domain (*.visual.force.com) and your browser prevents cross-site Javascript.

Use merge field in the VF page instead, you don’t need JS to obtain it 🙂

var caseNumber = '{!Case.CaseNumber}';

---

EDIT:

The nasty trick with embedding static resource in section header:

You need a static resource that has pure JavaScript code, no tags, styles etc.

alert('Hello StackOveflow!'); //is OK,
<script>alert('Hello StackOveflow!');/* is not OK */</script>

Then you simply reference it in the page block section name:

Considerations:

1. If you have dependencies (first to load jQuery, then some code that relies on it) I think it’s best to use 2 section headers (you could also put your code after jQuery code but that defeats the purpose of reusable library). Use checkboxes to control when you want to display it.
2. It’s best to place these sections at the bottom of the “detail” – they look a bit ugly (especially on edit page) and if they want to refer to fields on the page the fields would have to be already loaded.
3. The Javascript is injected exactly as written in the static resource. {!megefields} syntax will not be substituted server side with values you’d expect.