1

Can anyone tell me how to use the below Select2 jQuery in a visualforce page?

HTML:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>

  <!-- stylesheets -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="select2.css">
  <style type="text/css">
  body {
    padding: 40px;
  }
  </style>

  <!-- scripts -->
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="select2.js"></script>

  <script>
    $(function(){
      // turn the element to select2 select style
      $('#select2').select2();
    });
  </script>
</head>

<body>



  <p>select2 select box:</p>
  <p>
    <select id="select2" style="width:300px">
      <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
      </optgroup>
      <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
      </optgroup>
      <optgroup label="Mountain Time Zone">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
      </optgroup>
      <optgroup label="Central Time Zone">
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="IL">Illinois</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="OK">Oklahoma</option>
        <option value="SD">South Dakota</option>
        <option value="TX">Texas</option>
        <option value="TN">Tennessee</option>
        <option value="WI">Wisconsin</option>
      </optgroup>
      <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
      </optgroup>
    </select>
  </p>
</body>

</html>

I have tried the following visualforce page:

<apex:page standardStylesheets="false" showHeader="false" controller="DatePicker" docType="html-5.0" >


    <head>

      <!-- stylesheets -->


      <apex:stylesheet value="{!URLFOR($Resource.select2,'/select2/select2.css')}"/>
      <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>



      <style type="text/css">
          body {
            padding: 40px;
          }
      </style>

      <!-- scripts -->
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <apex:includeScript value="{!URLFOR($Resource.select2,'/select2/select2.js')}" />


      <script>

          $(document).ready(function() { $("#select2").select2(); });


      </script>
    </head>

    <body>


  <p><b>select2 select box:</b></p>
  <p>
    <select id="select2" style="width:300px">
      <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
      </optgroup>
      <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
      </optgroup>
      <optgroup label="Mountain Time Zone">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
      </optgroup>
      <optgroup label="Central Time Zone">
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="IL">Illinois</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="OK">Oklahoma</option>
        <option value="SD">South Dakota</option>
        <option value="TX">Texas</option>
        <option value="TN">Tennessee</option>
        <option value="WI">Wisconsin</option>
      </optgroup>
      <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
      </optgroup>
    </select>
  </p>
</body>
</apex:page>

But it doesnt work..Which means I didnt get the expected result.

wanna this kind of select box in visualforce page enter image description here

user3332076
  • 747
  • 2
  • 21
  • 42
  • Can you expand upon "I didnt get the expected result"? As that doesn't really tell us anything about what you expected, or what went wrong. – Alex Tennant Oct 30 '14 at 09:46
  • Please provide more information. In the meantime check if your browser blocked the externally referred script. In chrome you will get the grey shield on the right side of the address bar. https://support.google.com/chrome/answer/1342714?hl=en – AslamK Oct 30 '14 at 10:09
  • @AlexTennant: I wanna display Select2 select box – user3332076 Oct 30 '14 at 10:11
  • It works in html but not in visualforce page – user3332076 Oct 30 '14 at 10:11
  • The first thing to change is to use https to pull in the jQuery code as otherwise you will see in the JavaScript console "... was loaded over HTTPS, but ran insecure content from '...' this content should also be loaded over HTTPS" which tells you that the file did not load at all. Find out how to open and look at your browser's JavaScript console for errors. – Keith C Oct 30 '14 at 10:38
  • I get same thing when I use https – user3332076 Oct 30 '14 at 10:47

2 Answers2

1

Using these HTTPS URLs the page works:

  <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.css"/>
  <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>

  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.js" />

Visualforce is normally served using HTTPS so the scripts must be too to avoid this sort of error:

... was loaded over HTTPS, but ran insecure content from '...' this content should also be loaded over HTTPS

appearing in the JavaScript console that lets you know the JavaScript ha not been loaded.

When using JavaScript, always check the JavaScript console for errors. There is more information on this in How do I start to debug my own Visualforce/JavaScript?.

Community
  • 1
Keith C
  • 135,775
  • 26
  • 201
  • 437
0

you use this code instead of that one ... salesforce provides the some predefined tag lib. and html also we can embedded in vf page also. 

<!-- Page: -->
<apex:page controller="chooseColor">
    <apex:form>
        <apex:selectList id="chooseColor" value="{!string}" size="1">
            <apex:selectOption itemValue="red" itemLabel="Red"/>
            <apex:selectOption itemValue="white" itemLabel="White"/>
            <apex:selectOption itemValue="blue" itemLabel="Blue"/>
        </apex:selectList> 
    </apex:form>
</apex:page>

/* Controller */

public class chooseColor {
    String s = 'blue';

    public String getString() {
        return s;
    }

    public void setString(String s) {
        this.s = s;
    }
}
Boris Bachovski
  • 16,216
  • 8
  • 47
  • 85
Ravi Sharma nanda
  • 3
  • 1
  • My question is to display select to select box but it doesnt work. please check the link below http://runnable.com/Umt4ZM6SgSFGAAAp/basic-usage-of-select2-for-jquery – user3332076 Oct 30 '14 at 10:13
  • Ravi, If you Google you will discover that "Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.". The standard Visualforce tags do not have these features. – Keith C Oct 30 '14 at 10:32
  • For that I have to create a visualforce page with select2 js and css – user3332076 Oct 30 '14 at 10:34
  • But I didnt get the actual solution – user3332076 Oct 30 '14 at 10:35
  • @Ravi : my question is display custom select box using select2 plugin – user3332076 Oct 30 '14 at 11:10