3

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

5
  • 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
    Commented Mar 3, 2016 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
    Commented Mar 3, 2016 at 20:53
  • Good that you've got it sorted. Added as an answer.
    – Keith C
    Commented Mar 3, 2016 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
    Commented Mar 3, 2016 at 22:52
  • Thanks @crop1645 i have used jQuery.noConflict() in my code now :)
    – Prady
    Commented Mar 4, 2016 at 6:24

2 Answers 2

4

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>
2
  • I upvoted, Keith, but wanted to provide a specific example for the OP, since he didn't mark your question as answered. Commented Mar 4, 2016 at 0:37
  • Nice self executing anonymous function!
    – Adrian Larson
    Commented Mar 4, 2016 at 1:20
3

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();
});

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .