visualforce + jquery
-
13-11-2019 - |
Question
I am trying to implement a jquery gallery plugin in a force.com site. I have uploaded a zip file containing all the required files as a static resource.
I am referencing the style sheets and javascript as below:
<apex:includeScript value="{!URLFOR($Resource.jqueryadgallery, 'jquerygallery/jquery.ad-gallery.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jqueryadgallery, 'jquerygallery/jquery.ad-gallery.css')}"/>
This works and I am getting the associated CSS for the plugin(check it out here - http://coffeescripter.com/code/ad-gallery/). But the only part that's working is the image thumbnails are being displayed with the image border defined in the CSS file. You can see what I have done here - http://fusedev-developer-edition.ap1.force.com/ImageDemo. I have followed the documentation but it seems to me the JavaScript isn't working.
Any help appreciated, Cheers
Solution
Here are a few things to check:
Salesforce uses prototype.js, which like jQuery, uses the global variable
$
. It's always best to do something like$j = jQuery.noConflict();
at the top of your script in order to prevent jQuery from clobbering prototype. You'll also need to change all your javascript to use$j
instead of$
for jQuery stuff.It looks like your jquery plugin script is getting loaded before jQuery itself. Make sure your first
apex:includeScript
loads jQuery.My browser is reporting a syntax error in your VF page:
OTHER TIPS
<apex:includeScript value="{!URLFOR($Resource.jquery, '/jquery/external/jquery/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, '/jquery/jquery-ui.min.js')}"/>
<script>
j$ = jQuery.noConflict();
if(j$){
alert('Success');
}else{
alert('Failure');
}
</script>