Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to use jquery plugin select2 in my VF page to make the select look better. For some reason i cant get it to work.

I have loaded in all the js and css as static resources. There is no error on the console, but the select just shows the normal ui box with options in it.

    <apex:includeScript value="{!URLFOR($Resource.select2, '/js/jquery-2.1.0.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.select2, '/js/select2.js')}"/> 

<apex:stylesheet value="{!URLFOR($Resource.select2, '/css/select2.min.css')}" />
    <script type="text/javascript">
      $('select').select2();
    </script>

and my select is

<select  data-placeholder="Type to search Targetting"  multiple="multiple" >
                            <apex:repeat value="{!s.TargetingOptions}" var="stage">
                               <option value="{!stage.value}">{!stage.label}</option> 
                            </apex:repeat>
                        </select>

Any thoughts on what am i missing? I am not stuck with this plugin, i am ok as long as i am able to get something neat and allows multiple selections

share|improve this question
1  
There is a small chance that you are invoking $('select').select2(); before the element is in the DOM; its usual to use ready to avoid that risk as in the first example in examples. – Keith C Mar 3 at 20:49
    
You nailed it. I have been spending hours to find what the issue was. Thank you. If you can add it as an answer so i can accept it – Prady Mar 3 at 20:53
    
Good that you've got it sorted. Added as an answer. – Keith C Mar 3 at 21:03
2  
note also best practice to use something other than $ to avoid VF conflicts - developer.salesforce.com/page/Developing_Apps_with_jQuery – cropredy Mar 3 at 22:52
    
Thanks @crop1645 i have used jQuery.noConflict() in my code now :) – Prady Mar 4 at 6:24
up vote 4 down vote accepted

There is a small chance that you are invoking $('select').select2(); before the element is in the DOM; it's usual to use ready to avoid that risk as in the first example in the select2 examples. (Though it's a pity not all the examples follow that pattern.)

PS

Combining Sebastian's answer with crop1645's comment about $ and avoiding adding to the global namespace (and also suggesting that all the JavaScript should usually be added at the end of the Visualforce):

<apex:includeScript value="{!URLFOR($Resource.select2, '/js/jquery-2.1.0.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.select2, '/js/select2.js')}"/>
<script>
(function($) {
    $(document).ready(function() {
        $('select').select2();
    });
})(jQuery.noConflict());
</script>
share|improve this answer
    
I upvoted, Keith, but wanted to provide a specific example for the OP, since he didn't mark your question as answered. – Sebastian Kessel Mar 4 at 0:37
    
Nice self executing anonymous function! – Adrian Larson Mar 4 at 1:20

Try this as your javascript code, it is better to run your JS code in your document.ready function that just dropping it in the script tag.

$( document ).ready(function() {
  $('select').select2();
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.