0

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

eyescream
  • 18,088
  • 2
  • 34
  • 46
Sam
  • 1,311
  • 2
  • 23
  • 47
  • is your `noconflict` statement before that script tag, otherwise `j$` would be just `$`. – adeneo Nov 06 '12 at 15:30
  • Yes there's a noConflict statement before the (document).ready. I forgot to mention the same in the above script.. – Sam Nov 06 '12 at 16:33

1 Answers1

2

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: page layout editor

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.
eyescream
  • 18,088
  • 2
  • 34
  • 46
  • Yes, this could be done. I have a jQuery which I have currently placed it in a sidebar component. This jQuery script does some operation on the standard page. Now If for some reason the admin disables the sidebar, then I wanted to place the jQuery in an inline VF page.. Any other place where I can place this script in a standard page? – Sam Nov 06 '12 at 16:36
  • Does it have to run as soon as user enters the page? If it can be on demand then the best place for it is a custom button / link. You could also hack it into a hidden section header (see http://stackoverflow.com/a/13104454/313628) but that's very nasty. – eyescream Nov 06 '12 at 16:42
  • Thanks for the response. I placed a simple script statement( ) in the section header and it worked. But when i created a js file and stored it in the static resource and used this script to refer the js file() in the section header an error occurred in javascript console(uncaught syntax error: unexpected token <). testjQuery is the name of the static resource. – Sam Nov 07 '12 at 02:01