UI slider isn't visible when page loads into container

Question

I have a range slider on a page of my website that isn't visible for some reason. I can't figure out why.

• The body of index.php consists of a navigation bar with 4 links and a separate container with the id="pageContent".

• In my JavaScript, when the page loads it loads another page (HomePage.php) into #pageContent ($(#pageContent).load('HomePage.php');).

• As for the navigation bar; it takes the name of the clicked link as a variable, adds .php to the end of it and loads that into #pageContent:

$('#navContent a').on('click', function() {

    var page = $(this).attr('href'); // Get link name 

    $(#pageContent).load(page + '.php'); // Load clicked page

    return false;

});

• One of the site's pages (var page) has a range slider on it. My problem is the slider doesn't show when that page loads [into #pageContent].

• I'm not getting any browser console errors either.

Here's the code for the sliders:

HTML

<div class="SliderContainer">
                    
    <input type="hidden" id="minWT" value="2.5" />
    <input type="hidden" id="maxWT" value="30" />

    <p class="wtNumber" id="showWT">2.5Ct - 30Ct</p>

    <div class="rangeContainer">
        <div id="WTrange"></div>
    </div>

</div>

JS

 $('#WTrange').slider({
        
    range: true,
    values: [2.50, 30.00],
    min: 2.50,
    max: 30.00,
    step: 0.01,
    change:

        function(event, ui) {
            
            alert('Things have changed!');
            
        },
    slide: 

        function(event, ui) {
            
            // Prevent range thumbs from overlapping
            if ((ui.values - ui.values[1]) < 3) {

                return false;

            }
        
            $('#showWT').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct'); // Show value above range slider
            $('#minWT').val(ui.values[0]);
            $('#maxWT').val(ui.values[1]);
            
        }
        
});

When I run the page separately the slider shows but when I run it with the rest of my site [into #pageContent] it doesn't. Does anyone know what i'm doing wrong?

Answer 1

I needed to run the slider code when the additional HTML code has been loaded.

The jQuery.load() function has extra optional parameters - one being "complete".

I adjust the $(...).load() function accordingly:

$('#navContent a').on('click', function() {
    var page = $(this).attr('href'); // Get link name
    // load the clicked page ...
    $( "#pageContent" ).load( "/" + page + ".php", function( response, status, xhr ) {
        if ( status == "success" ) {
            // do we have a slider?
            if ( $('#WTrange').length ) {
                // yes, run the slider's code ...
                $('#WTrange').slider({
                    // rest of the slider code goes here ...
                });
            }
        }
    });
    return false ;
});