function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
b-liub-liu 

Adding jQuery to VisualForce Page... What am I missing??

I have been trying to implement jQuery into my visualForce pages to create a nicer appeal with simple animations and a better view of things. I have a prebuilt website demo for the new UI but already I am having trouble getting started by having the jQuery work. I've added the jQuery standard development to my static resources. But not even the simple hide() function isnt working.

 

Can anyone know what I am doing wrong or can lead me the right direction? The tutorials and things I've tried replicating off sites have not worked.

 

 

CB312CB312

  Hey,

 

Can you post a snippet of your code here? If its inside a component did you use j$ no confilct? You might be having an error when Visualforce renders the HTML. 

 

Did you check out tehNrds demo: http://www.tehnrd.com/setting-up-jquery-with-salesforce-com/

or 

dhoechst jquery tutorial: http://verticalcode.wordpress.com/2011/02/19/salesforce-javascript-remoting-jquery-and-autocomplete/
b-liub-liu
<apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery-ui-1.7.2.custom.min.js')}"/>
<script> 
jQuery(document).ready(function(){ 
jQuery(".slidingDiv").hide(); 
jQuery(".show_hide").show(); 
jQuery('.show_hide').click(function(){ 
var targetNumber = jQuery(this).attr('rel'); jQuery(".slidingDiv[rel="+targetNumber+"]").slideToggle(); 
}); 
}); 
</script>


CB312CB312
<apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery-ui-1.7.2.custom.min.js')}"/>
<script> 
$j = jQuery.noConflict();
$j(document).ready(function() {
$j("#slidingDiv").hide(); 
$j("#show_hide").show(); 
$j('#show_hide').click(function(){ 
var targetNumber = $j(this).attr('rel'); $j("#slidingDiv[rel="+targetNumber+"]").slideToggle(); 
}); 
}); 
</script>

 just some rough notepad stuff here, but I think the first thing since I don't know where this is running is to throw a noconflcit, then I think the way you are accessing the Divs should be chagned but without seeing the html markup, this is as far as I can get.
SteveBowerSteveBower

 

You need to include both the jquery library and the jquery-ui library.  Best, Steve.

 

 

	<script type="text/javascript" src="{!URLFOR($Resource.jQuery, 'js/jquery-1.6.1.min.js')}"></script>
	<script type="text/javascript" src="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.13.custom.min.js')}"></script>
 	<apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.13.custom.css')}"></apex:stylesheet>
<script type="text/javascript">
var j$ = jQuery.noConflict();
j$(document).ready(function(){
    j$("#AccordionContainer").accordion({header: '.Accordion', autoHeight: false, collapsible: true, active: false});
});
</script> 

 

 
b-liub-liu

so according to u it should look like

 

<head>
<script type="text/javascript" src="{!URLFOR($Resource.jQuery, 'js/jquery-1.6.1.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.13.custom.min.js')}"></script>
<apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.13.custom.css')}"></apex:stylesheet>
<script type="text/javascript">
    var j$ = jQuery.noConflict();
    j$(document).ready(function(){
    j$("#AccordionContainer").accordion({header: '.Accordion', autoHeight: false, collapsible: true, active: false});
});
</script> 


<style type="text/css">
.showHideBtn{
    height:20px;
    width:120px;
    background: #ccc;
    color: #fff;
}

.slidingDiv{
    width:800px;
    min-height:300px;
    background: #ebebeb;
}


</style>

</head>
<body>
    <h3>Dealer Details</h3>
    <div id="AccordionContainer" rel="1">
        <p>Blacsd sdkjnbaskjdb qw dkj da wqoub foufb ew fihejf ish fa we fhjds falhf a wfhw dshifs laef alweh faluhds f q fhi sdluahsd f ashf l</p>
    </div><!--ends slidingDiv-->
    <div class="showHideBtn"><a href="#" class="show_hide" rel="1">Show/Hide</a></div>
</body>


SteveBowerSteveBower

Well, *I* was using an Accordian control from jquery, but I'm not suggesting that you need one.  It was just an example of usage.  My point was that you didn't have the full set of scripts included.
yvk431yvk431

just check for the jQuery Archive - js folder, i doubt that the resource name you are using might be different