2

When I use a static resource for my jquery ui, the icons are not loading, if I use the cdn links, it loads properly.

Here I referenced the css and js for jqueryui but I think the problem is that the css code in jquery-ui.theme.min.css is unable to find the path the image which actually exists on the static resource.

<apex:includeScript value="{!URLFOR($Resource.jQuery321)}"/>


<apex:includeScript value="{!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/jquery-ui.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/jquery-ui.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css')}"/>
Improve this question
3
  • I think you need to update the reference in CSS file as well.
    – Tushar Sharma
    Nov 2, 2017 at 5:46
  • Do you have the syntax on how to do it? I tried editing the static resource css with the following but it's still not working: .ui-button .ui-icon { background-image: url({!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/images/')}ui-icons_777777_256x240.png) }
    – Jimmy Bones
    Nov 2, 2017 at 14:09
  • 1
    URLFOR only works VF page . try to include this in VF page then it might work.
    – Tushar Sharma
    Nov 3, 2017 at 6:33

1 Answer 1

Reset to default
1

I had the same issue and finally find the solution to add custom styles in the visualforce page to modify the icon path.

After the modification, it works as expected now.

The result (The previous and next arrows are icons which were missed before the modification and now they are displayed as expected.)

enter image description here

The page

<apex:page showHeader="false">
<head>
<apex:includeScript value="{!$Resource.jQuery331}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI1121,'jquery-ui.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jQueryUI1121, 'jquery-ui.min.css')}"/>
<script>
   $j = jQuery.noConflict();
   $j(document).ready(function() {
     $j( "#datepicker" ).datepicker();     
  } );
</script>
<style>
  .ui-icon, .ui-widget-header .ui-icon, .ui-widget-content .ui-icon{
    background-image: url("{!URLFOR($Resource.jQueryUI1121, 'images/ui-icons_444444_256x240.png')}");
  }
</style>
</head>

<body>

  <p>Date: <input type="text" id="datepicker"/></p>

</body>

</apex:page>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.