5

I'm looking to call my scripts though an apex:component. So instead of having 3 includes on my page, I want

<c:scripts />   

and the 'scripts' component will contain the following.

<apex:component >       
     <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/jquery-1.9.1.js')}"/> 
     <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/jquery-ui-1.10.3.custom.min.js') }" /> 
     <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/anotherScript.js') }" />        
</apex:component>

But if I only want one of these scripts, can I pass a argument into the component call? Something like the following...

    <c:scripts
      myScript = true />

And then the component...

<apex:component >       
     Boolean myScript = <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/jquery-1.9.1.js')}"/> 
     <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/jquery-ui-1.10.3.custom.min.js') }" /> 
     <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/anotherScript.js') }" />        
</apex:component>

Is there an elegant way of doing this?

Cheers

10

Sure you can do this with an apex:attribute.

<apex:component>

    <apex:attribute name="includejQuery" type="Boolean" required="false" default="false" description="True to include jQuery" />

    <apex:outputPanel layout="none" rendered="{!includejQuery}">
        <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/jquery-1.9.1.js')}"/> 
    </apex:outputPanel>

    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/jquery-ui-1.10.3.custom.min.js') }" /> 
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/js/anotherScript.js') }" />

</apex:component>

Then in your page you would just do

<apex:page>
    ...
    <c:Scripts includejQuery="true" />
    ...
</apex:page>

On a side note, and maybe its just part of your example, but you would never want to include jQuery UI and not jQuery.

4
  • This was pretty much what I was writing up as an answer. This will work but could get cumbersome as you would likely need an attribute for each script and if you are doing a large number of scripts in the component, could get a large componenet tag in the VF page. This is the way I would also do it, just stating it may be just as cumbersome to maintain doing this as it would be to just list the scripts on the Vf page itself. Nov 6 '13 at 16:52
  • This is exactly what I wanted Phil, cheers!
    – Daft
    Nov 6 '13 at 16:55
  • 1
    As a side note, you could always use something like RequireJS if you want to skip adding attributes, etc. It's small, flexible, and guaranteed to load modules just once.
    – sfdcfox
    Dec 4 '13 at 21:37
  • 1
    +1 for RequireJS, but I think an apex:includeScript tag also guarantees resources are only loaded once.
    – Phil Rymek
    Dec 4 '13 at 22:13

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.