How to use Visualforce IDs in jQuery

H

Prerequisites:

You will need to download the jQuery and jQuery UI libraries. jQuery is the core library which offers DOM manipulation methods and jQuery UI is a higher level library which constructs widgets for use on your page. From the jQuery UI site, you can download a zip tailored to the portions of the libraries you need.Once you have the ZIP in hand, you’ll need to upload it as a static resource.

About Using jQuery:

To access jQuery in your Visualforce pages, you then need to include the libraries with something like this:
<apex:includeScript value=”{!URLFOR($Resource.jQuery, ‘/js/jquery-1.4.2.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’)}”/>

else you can directly use  the Google AJAX Libraries content delivery network to serve jQuery to your users directly from Google’s network of datacenters.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js”></script>

To use jQuery within Force.com, you’ll need to make use of the jQuery.noConflict() function to reassign jQuery’s global variable to something which won’t conflict with any other libraries which may already be in use (including standard, native libraries used within Visualforce). You’ll see an example of this in the code below.

var j$ = jQuery.noConflict();

j$(document).ready(function()      {     //your actions  };

To use Visualforce Id’s with jquery there is somewhat different approach as compared to simple HTML element Id’s. You have to use selector as follows:

var compid = j$(“[id $=’skillpanel2′]”);
Now you can use this variable to perform actions on the elements.
like,

compid.hide(); // will hide the element.

Example:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js”></script>

<script>
var j$ = jQuery.noConflict();
j$(document).ready(function(){var compid = j$(“[id $=’skillpanel2′]”);
compid.hide();
});
</script>

About the author

ankit.shah
By ankit.shah

Category