learn4sfdc: jQuery

Friday, June 1, 2012

jQuery in Visual force page

jQuery in Visual force page:

jQuery is an freely available just go to site and download js files and CSS, actively supported, JavaScript library used to add client-side manipulation to HTML pages. You can use it to do the same on your Visualforce pages.

It provides more flexible UI with salesforce.com. It is also used in Facebook integration with Salesforce.com.

For example if you want to display Account and when you select a Contact than show the phone number.

Steps for using jQeury in Visual force pages:

Download JQuery css and JavaScript files for that Go to URL http://www.jqueryui.com/download and click on Download.
Go to Salesforce.com Setup/Develop/Static Resource/New

Enter all fields’ value and select zip file named as “jquery-ui-1.8.11.custom.zip”.

3. Create Visual force page

Code:

<apex:page showheader="false" standardController="Account" recordsetVar="accounts" >

<head>

<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.5.1.min.js')}" />

<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-ui-1.8.11.custom.min.js')}" />

<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/css/ui-lightness/jquery-ui-1.8.11.custom.css')}" />

$j = jQuery.noConflict();

$j(document).ready(function() {

$j("#phone").dialog({ autoOpen: false, modal: true, position: 'center' });

});

function showDialog(name, phone){

$j("#phoneNumber").html(phone);

$j("#phone").dialog("open");

$j('#phone').dialog("option" , "title" , name);

$j('#phone').dialog('option', 'position', 'center');

return false;

}

</script>

<style>

.accountLink { color: blue; cursor: pointer; cursor: hand; }

</style>

</head>

<body>

<apex:dataList value="{!accounts}" var="account" id="theList">

</apex:dataList>

<div style="float:left">Phone:</div><div id="phoneNumber"></div>

</div>

</body>

</apex:page>

Description:

In visual force call Show dialog box in that passing parameter Name and Phone then sets position and title etc. and with the help of conflict show dialog box.

Conclusion:

Using jQuery we can create visual force page with standard lookup and used our own CSS. Also write JavaScript in visual force pages.

Friday, March 9, 2012

Using jQuery in a Visualforce Page

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. See Creating a Consistent Look and Feel with Static Resources to see specifics on uploading and using a static resource with your Force.com application.
For the purposes of the code in this recipe, we'll assume you've named the static resource "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')}"  /> 

About Using jQuery

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.
With jQuery, you typically locate an element based on a CSS selector, attach it to an event or widget, and then perform a specific function. Take this example:

  $j = jQuery.noConflict();
  $j("#phone").dialog({ autoOpen: false, modal: true, position: 'center'  }); 

This instructs jQuery to find an element with the id of "phone", create a dialog widget from it and set the initial parameters.
It's a best practice to make use of the onReady event of jQuery to initialize your JavaScript. This event will fire when DOM elements are ready, but before assets like images download. So for example, you'd write something like this:

$j(document).ready(function() { /* …. Your actions …. */ }

A Code Sample

Here's a complete code sample. Assuming you've followed the pre-requisites, simply create a new Visualforce page with this source: