1

I've got the following code:

<apex:pageBlock title="Parameters" mode="edit" id="criteria">
    <apex:includeScript value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.11.4.custom/external/jquery/jquery.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.11.4.custom/jquery-ui.js')}"  />
    <apex:stylesheet value="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

    <script type="text/javascript">

     j$ = jQuery.noConflict();
     j$("#slider").slider(
     {
            value:50,
            min: 0,
            max: 200,
            step: 1      
     });

    </script>


   <table cellpadding="2" cellspacing="2">
    <tr>
     <td style="font-weight:bold;">Number to display:<br/>
        <div id="slider"></div>
     </td>
    </tr>
   </table>

</apex:pageBlock>

If I place it at the start of the page outside the pageblock it works fine, however I can't see it once I nest it inside the pageBlock, inside the table tags.

Does anybody have any insight into why this may be? I've tried including the scripts and CSS just before the script so that the correct versions are in scope. Is jQuery UI not supported inside pageBlock elements

3
  • 1
    where is your jquery file?
    – Ratan Paul
    Mar 9 '16 at 12:30
  • @Ratan Sorry I forgot to include it, it's in there now.
    – user24634
    Mar 9 '16 at 12:33
  • 1
    Do you have any other control that refreshes that page block? I found that putting javascript inside blocks that get refreshed can get messy...
    – mkorman
    Mar 9 '16 at 12:52
1

Wrap your JavaScript in a ready function to make sure that the DOM element you are applying it to is present when the JavaScript executes:

<script>
j$ = jQuery.noConflict();
j$(document).ready(function() {
    j$("#slider").slider(
    {
        value:50,
        min: 0,
        max: 200,
        step: 1      
    });
});
</script>

Otherwise the jQuery selector "#slider" will silently match nothing and so not add the slider.

(Inline JavaScript is executed as it is encountered and in your case that is before the div has been encountered by the browser's parser. But even if the JavaScript was after, ready is the safe mechanism to use.)

2
  • Thanks Keith, I didn't think it'd be something so simple. It works exactly as expected.
    – user24634
    Mar 9 '16 at 13:49
  • 1
    @SamCousins Yeah often you can get away without it if you put the JavaScript at the end of the page (which is normally best to get the page to render ASAP) so it's easy to forget to include.
    – Keith C
    Mar 9 '16 at 13:58

Your Answer

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