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