Opened 3 years ago

Last modified 3 years ago

#15385 new bug

UI slider isn't visible when page loads into container

Reported by: fromA-Z Owned by:
Priority: minor Milestone: none
Component: ui.core Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by fromA-Z)

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.

Change History (1)

comment:1 Changed 3 years ago by fromA-Z

Description: modified (diff)
Note: See TracTickets for help on using tickets.