Use Jquery in Salesforce visualforce page

We can use Jquery in Visualforce pages of salesforce to acheive usability and bring new look and feel also overcome the drawbacks in salesforce.
Recently in one of my projects, I was tasked to implement the hide and show of specific rows in a table based on some clicks and also open dialog whenever user clicks on a link.
Initially I tried achieving the hide/show capability using plain simple javascript and after 1 day of coding accomplished it. The problem with this was changing the code whenever
the functionality changes. I found this to be extremely difficult and time consuming and though we were following agile methodology where requirement often changes.

In order to overcome the drawbacks, I started learning and using JQuery libraries in visualforce page.

JQuery scripts to work, we have to include or import 3 files in our Visualforce page. I downloaded the 11.02 version of JQuery.

1. A css file which we get whenever we download the JQuery library. (jqueryui.css)
2. A js file which hold most of logic. (jquery1102.js)
3. A js file required for User Interface. (jqueryui.js)

We have to add these files as individual resources, and use them in our Visualforce page as follows.



Once you include the above three lines we are good to go and use the capabilities of JQuery.

Note: I found that visualforce internally uses some JS library not sure if it is inturn JQuery. I tried using same in vain.
But since I was getting some JS conflicts in different other pages, I had to write the below lines in my JS code.

This entry was posted in salesforce and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>