jQuery UI slider doesn't work inside PageBlock

Question

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

Answer 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.)