Ask Search:
Bikram DuttaBikram Dutta 

how to access the jquery in salesforce

Hi,
Below is my code in which i am using jquery but jquery part is not working. Need help 

<apex:page standardController="Account" sidebar="false" showHeader="true" recordSetVar="accounts">
<head>
<apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-1.9.1.js')}"  />
<apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-ui-1.10.1.custom.min.js')}"  />
<apex:stylesheet value="{!URLFOR($Resource.jquery, '/css/ui-lightness/jquery-ui-1.10.1.custom.css')}"  />
 
 
 
<script type="text/javascript">
    j$= jquery.noConflict();
    j$(document).ready(function() {
    j$("#flip").click(function() {
    j$("#panel").slidedown();
    });
    });
</script>  
  
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<apex:form >
<div id="flip">
Click to See
</div>
<div id="panel">
<p>Hello testing the jquery functionality</p>
<apex:actionFunction immediate="true" name="jq" />
</div>
</apex:form>
</body>
</apex:page>
Best Answer chosen by Moderator (salesforce.com) 
Bikram DuttaBikram Dutta
<apex:page standardController="Account" sidebar="false" showHeader="true" recordSetVar="accounts">
<head>
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js')}"  />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js')}"  />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.css')}"  />

<script type="text/javascript">
    j$= jQuery.noConflict();
    if(j$)
    {
         alert('jQuery Loded'); 
    }
    else
    { 
        alert('jQuery Not Loaded'); 
    }
    j$(document).ready(function() {
    j$("#flip").click(function() {
    j$("#panel").slideDown("slow");
    });
    });
</script>  
  
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<apex:form >
<div id="flip">
Click to See
</div>
<div id="panel">
<p>Hello testing the jquery functionality</p>
<apex:actionFunction immediate="true" name="jq" />
</div>
</apex:form>
</body>
</apex:page>

javascript functionality is case sensitive so check the commands and give complete path in static resources to access the jquery library.

All Answers

Rakesh GuptaRakesh Gupta
Please post your query on force.com discussion board..
SAMSAM
Hi Bikram,

Seems its a problem with static resource access,

<apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-1.9.1.js')}"  />
<apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-ui-1.10.1.custom.min.js')}"  />
<apex:stylesheet value="{!URLFOR($Resource.jquery, '/css/ui-lightness/jquery-ui-1.10.1.custom.css')}"  />

Dont put "/" at the start of URL,
just give the base folder name!

For Example,


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

 
SAMSAM
Bikram,
Is your issue resolved?
Bikram DuttaBikram Dutta
yes the issue is resolved. the issue was:

1. static resource path was not complete
2. since javascript has case sensitive feature so command has to be like this "slideDown".

Now working fine

thanks
SAMSAM
Glad it got resolved :)
you can mark it as best answer if it helped you! :)
Bikram DuttaBikram Dutta
<apex:page standardController="Account" sidebar="false" showHeader="true" recordSetVar="accounts">
<head>
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js')}"  />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js')}"  />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.css')}"  />

<script type="text/javascript">
    j$= jQuery.noConflict();
    if(j$)
    {
         alert('jQuery Loded'); 
    }
    else
    { 
        alert('jQuery Not Loaded'); 
    }
    j$(document).ready(function() {
    j$("#flip").click(function() {
    j$("#panel").slideDown("slow");
    });
    });
</script>  
  
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<apex:form >
<div id="flip">
Click to See
</div>
<div id="panel">
<p>Hello testing the jquery functionality</p>
<apex:actionFunction immediate="true" name="jq" />
</div>
</apex:form>
</body>
</apex:page>

javascript functionality is case sensitive so check the commands and give complete path in static resources to access the jquery library.
This was selected as the best answer