+ Start a Discussion
brdbrd 

jquery functions are not working

Hi All,

 

I am trying to implement the jquery in visualforce and have written a sampke code but everything is working except the jquery part. Need help on checking this . Below is code 

 

<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>

 

i am using recent jquery library and compressed zip is stored in static resources.

Best Answer chosen by Admin (Salesforce Developers) 
JHayes SDJHayes SD

1. Make sure the files are included in the zip
2. Function and object names are case-sensitive in Javascript ("jquery" should be "jQuery", "slidedown" should be "slideDown")

I modified your code as follows and it worked just fine for me:

 

<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>

 

All Answers

Rahul SharmaRahul Sharma

Check in firebug or chrome console for any error, might be the case that you are not loading the required jQuery files properly.

 

You could try accessing the jQuery files directly for testing putpose, as like below:

<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" />
<apex:stylesheet value="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.css"/>
<apex:stylesheet value="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css"/>

 

JHayes SDJHayes SD

1. Make sure the files are included in the zip
2. Function and object names are case-sensitive in Javascript ("jquery" should be "jQuery", "slidedown" should be "slideDown")

I modified your code as follows and it worked just fine for me:

 

<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>

 

This was selected as the best answer
Shiv ShankarShiv Shankar

Please put this code under your j$= jquery.noConflict(); code to check either jQuery is loded properly or not. or we can check it through crome consloe also.

if($j){
   alert('jQuery Loded');
}else{
   alert('jQuery Not Loaded');
}

 

brdbrd

Thanks JHayes ,

 

It is now working :)

Rahul SharmaRahul Sharma
A kudos for #2!!