How to know whether JQuery library loaded properly or not in Visual Force Page

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.

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.MyStaticResourceName, '/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')}" />  

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