+ Start a Discussion
prati@salesforceprati@salesforce 

jQuery in Visualforce

Hi.. I have just started learning jQuery in Vf page and was checking online resources . I cam accross these codes , needed some clarity on this.
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.11.4.min.js')}"  />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-ui-1.8.6.custom.min.js')}"  />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/css/ui-lightness/jquery-ui-1.8.6.custom.css')}"  />
  I have downloaded[ jquery-ui-1.11.4.custom.zip] and included as a static resource but I am not sure if I need to download something else as well?
Because in the example above there are 3 lines of code. Are they referring to the same jQuery zip folder?
Also please help me get some working example with jQuery in Visualforce page.
Best Answer chosen by prati@salesforce
mritzimritzi
There are two kinds of people
i) Who use static resources
ii) Who source libraries from CDNs
(there are significant number of people on both sides)
I prefer CDNs for now.

VF+jQuery (using CDN)
<apex:page standardStylesheets="false" doctype="html-5.0">
  <head lang="en">
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <style>
          #sampleDiv{border:2px solid black;}
          .red{background-color:red;color:white;}
      </style>
  </head>
  <body>
      <div id="sampleDiv">
          click anywhere in this div
      </div>
      <br/><br/>
      <apex:form >
          <apex:inputText id="output" html-placeholder="Click here"/>
      </apex:form>
      <script>
          $(document).ready(function(){
              alert('Hello, jQuery');
              /*
                  Notice the difference in the way element's Id have been referenced in jquery.
                  for pure html tag use -> $('#idName')
                  for VF tags use -> $('[id$=idName]')
                  And for Classes
                  pure html tag - > $('.className')
                  VF tags -> $('[class$=className]')
              
              */
              $('#sampleDiv').click(function(){
                  $(this).toggleClass('red');
              });
              $('[id$=output]').click(function(){
                  alert('InputText clicked');
                  
              });
          });
      </script>
  </body>
</apex:page>


Mark it as Best Answer, if it helps

All Answers

mritzimritzi
There are two kinds of people
i) Who use static resources
ii) Who source libraries from CDNs
(there are significant number of people on both sides)
I prefer CDNs for now.

VF+jQuery (using CDN)
<apex:page standardStylesheets="false" doctype="html-5.0">
  <head lang="en">
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <style>
          #sampleDiv{border:2px solid black;}
          .red{background-color:red;color:white;}
      </style>
  </head>
  <body>
      <div id="sampleDiv">
          click anywhere in this div
      </div>
      <br/><br/>
      <apex:form >
          <apex:inputText id="output" html-placeholder="Click here"/>
      </apex:form>
      <script>
          $(document).ready(function(){
              alert('Hello, jQuery');
              /*
                  Notice the difference in the way element's Id have been referenced in jquery.
                  for pure html tag use -> $('#idName')
                  for VF tags use -> $('[id$=idName]')
                  And for Classes
                  pure html tag - > $('.className')
                  VF tags -> $('[class$=className]')
              
              */
              $('#sampleDiv').click(function(){
                  $(this).toggleClass('red');
              });
              $('[id$=output]').click(function(){
                  alert('InputText clicked');
                  
              });
          });
      </script>
  </body>
</apex:page>


Mark it as Best Answer, if it helps
This was selected as the best answer
prati@salesforceprati@salesforce
Thank you... It helped
prakash jadaprakash jada
You can use Jquery by using CDN's or by the static resource.
The easy and simplest way to use jquery in visual force is through the static resources...
<apex:page >
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/jquery/jquery-ui.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/jquery/external/jquery/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jquery, '/jquery/jquery-ui.min.js')}"/>

    <script>
        j$ = jQuery.noConflict();
        if(j$){
            alert('Success');
        }else{
            alert('Failure');
        }
    </script>
</apex:page>
Anna Lu 6Anna Lu 6
That's great. Though, do you have any suggestion to use it in Lightning? It seems Lightning stopped using DOM, so $ is not that powerful now. 
Bullfrog84Bullfrog84
Is there a difference in how you upload them? Ex. Do plugins like tablesorter require the entire zip file or can you just add the single js file? I'm aware of the cacheing and that is enabled, but I'm still getting a 404 when my page loads.
 
Avihai ShindelmanAvihai Shindelman
Hello there,
We use DataTable static resource to present data in table of visualforce page (VFP).
In Controller I have SOQL that order by createdDate DESC:
 docs = [select Document_Name__c,CreatedDate from Document__c ORDER BY CreatedDate desc];

For some reason, when changing in script of VFP from  j$(document).ready( function () to  j$(document).click( function ()
The visualforce page style\design is impact.
How can I still keep the visualforce design and also have the data sorted \ order by createdDate column?

If I use only j$(document).ready( function () then we have the style but ORDER BY CreatedDate desc does not take place.

Thank you all.
Avihai
Avihai ShindelmanAvihai Shindelman
I found a solution by adding "order" attribute from static resource "DataTable" and that made jQuery design to work and present as excpeted.
priyanshu nema 2priyanshu nema 2
yes mritzi  is right, but in line no 5 script tag can not we close in same line, use it as below line
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>

Thanks!