Whenever we are working with any jQuery related stuff in visual force page first we have to load the JQuery library in visual force page.Now in this post I am going to explain how to load jQuery in visual force and how to test whether jQuery files are loaded properly or not.
1. Download the latest jQuery package from here
2. Place the downloaded package in Static resources of Salesofrce
3. Include that Static resource file in the visual force page
Loading the jQuery in VisaulForce Page
Using Static Resources
1. Download the latest jQuery package from here
2. Place the downloaded package in Static resources of Salesofrce
3. Include that Static resource file in the visual force page
<apex:includeScript value="{!URLFOR($Resource.
MyStaticResourceName
}" /> <apex:includeScript value="{!URLFOR($Resource.
, '/js/jquery-ui-1.8.6.custom.min.js')}" /> <apex:stylesheet value="{!URLFOR($Resource.
MyStaticResourceName
, '/css/ui-lightness/jquery-ui-1.8.6.custom.css')}" />
MyStaticResourceName
Directly including the Jquery CDN url in visual force page
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>
Test whether jQuery loaded properly or not
1.Cretae a below sample page and execute
<apex:page standardController="Account">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>
<script type="text/javascript">
var j$ = jQuery.noConflict(); //Which tells whether any conflict or not
if(j$)
{
alert('No conflict,jQuery loaded successfully');
}
else
{
alert('Error while loading the jQuery');
}
</script>
</apex:page>
2. The noConflict() (highlighted in yellow)method in jQuery will tells that whether it loaded properly or any conflicts got occurred while loading .If successfully loaded it reruns true else it returns false.
3. If succesfully loaded will alert the user with
No conflict,jQuery loaded successfully
else Error while loading the jQuery
Thanks for visiting..Enjoy
No comments:
Post a Comment