Search jQuery

jQuery Forum

UI slider isn't visible after page loads into container

in Using jQuery UI • 2 years ago

- The body of index.php consists of a navigation bar with 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] but it works fine when I copy and paste the HTML into index.php (manually).

When I run the page [with the slider] 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 or why my slider isn't visible on .load()?

I want to reduce the code but I don't know to .load() an external page using CodePen

Replies(5)

jakecigar

Re: UI slider isn't visible after page loads into container

2 years ago

Make the slider after the load is completed…

$(document).ready(function () {
$("#navContent a").on("click", function () {
var page = $(this).attr("href"); // Get link name
$("#pageContent").load(page + ".php", function () { // function called after content loaded
$("#WTrange").slider({
range: true,
values: [2.5, 30.0],
min: 2.5,
max: 30.0,
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]);
}
});
}); // Load clicked page
return false;
});
});

https://api.jquery.com/load/ <--

JΛ̊KE

brilliant..

Re: UI slider isn't visible after page loads into container

2 years ago

I should have explained this, I didn't think it was necessary so when reducing my code I excluded a function in the slide: function(event, ui) {}. Will that function still work from another document? My actual .slider():

$('#WTrange').slider({
range: true,
values: [2.50, 30.00],
min: 2.50,
max: 30.00,
step: 0.01,
change:
function(event, ui) {
// When filters change, hide #Loader to 'flicker it'
$('#Loader').hide();
setTimeout(function() {
$('#Loader').show();
}, 500);
// Check if search is being edited
if (searchEditing === false) {
if ($('#ItemSearch').val()) {
$('#ItemSearch').val(''); // Reset search input
}
}
},
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]);
FilterData();
}
});