+ Start a Discussion

Simple Custom component developement: javascript function not found


I created a simple VF custom component from the cookbook example (increment-decrement custom component).
There is also some javascript in the custom component.
I have used this custom component in other VF page.When this custom component get rendered in the VF page, all this custom component gets rendered in a <span> tag, so also the javascript is also in this span tag. When any function from this javascript is called, Error comes and says that function is not defined.

Has any one of you created a custom component with javascript, and used that javascript function in your component. Looks like a bug in rendering of the custom component or there should be some other way to use the custom component or to use the javascript in custom component.

Any thoughts/ suggests are welcome.

Easiest solution is to externalize your javascript into a .js file and then have your component include it via the the includeScript component:

<apex:includeScript value="http://mysite.com/myscript.js" />

This will contribute the script tag (correctly) to the header.

It would be nice if VF had a way for pages/components to dynamically contribute anything to the <head> element of the page, like some of the Java web frameworks allow, but it doesn't.

Thanks for your response.
But it has not worked for me. I created a Javascript file on my desktop and uploaded that to the Static Resources in my Dev Org with the name "dummy_script".
And then included that one in my VF custom component as: <script type="text/javascript" src="{!$Resource.dummy_script}"/>
It still says that function is not defined.
In the actual VF page (in the frame) custom component when rendered with the script tag as :
<script src="/resource/1228739047000/dummy_script" type="text/javascript"></script>

I am not sure what could be the problem.


"It would be nice if VF had a way for pages/components to dynamically contribute anything to the <head> element of the page, like some of the Java web frameworks allow, but it doesn't." Agreed.

Jeremy - have you created an Idea for this to get some community support behind this excellent enhancement? BTW I opened a feature request on this for my team over a year ago but we have held off working on it primarily because there has been 0 interest expressed either directly or indirectly from the community...

Well, not to bite the hand that feeds me, but this is the type of feature that using a 'democratic' system will be unlikely to ever bubble to the top. There probably isn't big support for this feature, because 95% of people using VF/Apex haven't lived in a Java component framework like Wicket or Tapestry (I'm sure there are good ones in .NET too) which allows pretty good page-component communication and features like <head> contribution.

I'll submit it as an idea but suspect that if SFDC only uses ideas feedback as the gauge of a feature's usefulness, this one will never make it. It solves TONS of little problems for users, makes coding components much more granular, but also has a pre-existing workaround for many of the use cases, such as the one here, and frankly most people who have run into issues this would solve probably won't immediately realize this would have solved it.

I'll buy you a drink if you code this over a weekend and then present it to your team as a fait accompli, which is probably what I would do :)
Heh - all ideas in IdeaExchange are not democratic w.r.t. to Visualforce - my team only cares about the VF specific ideas and there are only a dozen or so out there that we have not implemented so you're really looking at 1 in 12 or so...

BTW apex:includeScript and apex:stylesheet are both implemented as non-positional <head> contributors (we'll even inject the <head></head> block if needed) and also implement include once and only once semantics.

We have just not exposed a general "inject this subtree's contents into the head" as of yet.
Don't know where to submit this, so I am just piggying back on this thread.
First of all I new to SalesForce.com, so the question I am going to ask might sound stupid for some of you but I am strugling.
Ok here is what I want to do:
1. I have a custom object called "Service"
2. This object has many text fields and few buttons
3. There is a button called "Auto DN"
4. Whenever I press this button it should populate a field called "AAA_test_Auto_Directory_number__c" with some random value
5. The updated field value should be immediately displayed on the page
Please help me as to how I can do this.
Many thanks in advance.
Well, since you posted here, I am assuming you intend to implement this through a custom VisualForce page. You probably need to start by reading the VisualForce and Apex dev guides, as they cover these bases.


But if I'm understanding what you are describing, and you wish to have the ability to assign a "directory number" to a custom object that is "random" - and I'm assuming by "random" you mean "unique, but number doesn't matter" - I would just use an auto-number field in Salesforce with a format of something like {000000} and a starting value of 100000. Obviously if you use a truly random number, and you're using it for some sort of directory ID, you will get duplicates over time.


Thanks for your quick reply. I have going through the documentation you mentioned. Meanwhile I have following:

1. Object named "Service" already created

2. It has one text field called "AAA test Auto Directory number" (field name: AAA_test_Auto_Directory_number, API Name: AAA_test_Auto_Directory_number__c)

3. I have button called "Auto DN" (field name: Auto_DN, Display Type: Detail Page Button, Behaviour: Execure Java Script)

4. For this button I have defined following:

var mRN=Math.random();
var mAutoNumber = "{!Service__c.AAA_test_Auto_Directory_number__c}";
mAutoNumber = '01001644' + mRN.toString().substring(2, 5);
{!Service__c.AAA_test_Auto_Directory_number__c}.value = mAutoNumber;

The above code is generating the number the I want it, however I dont know how to assign this generated number to the text field "AAA test Auto Directory number" and also display the updated field value on the page.
I agree that I need to go through the documentaion you mentioned in detail, but this is kind of urgent.
Your inputs will be much appreciated.
Many thanks in advance.
This is an S-Control / Javascript question, not a VisualForce question, and I'm not the one to answer it for you. I'd suggest posting this question to "General Development" as this board is for VisualForce discussion and you probably won't get the answers you need.
Going back to the original thread with Doug about submitting a VF idea -- I have submitted one here, please vote on it!