Слайдер пользовательского интерфейса не отображается при загрузке страницы в контейнер - PullRequest
Новая
       120

Слайдер пользовательского интерфейса не отображается при загрузке страницы в контейнер

0 голосов
/ 04 августа 2020

У меня есть ползунок диапазона на странице моего веб-сайта, который по какой-то причине не отображается. Я не могу понять почему.

  • Тело индекса. php состоит из панели навигации с 4 ссылками и отдельного контейнера с id="pageContent".

  • В моем JavaScript, когда страница загружается, она загружает другую страницу (HomePage. php) в #pageContent ($(#pageContent).load('HomePage.php');).

  • Что касается панели навигации; он принимает имя нажатой ссылки как переменную, добавляет. php к ее концу и загружает это в #pageContent: 

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

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

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

    return false;

});

  • На одной из страниц сайта (var page) есть ползунок диапазона. Моя проблема в том, что ползунок не отображается, когда эта страница загружается [в #pageContent].

  • Я тоже не получаю ошибок консоли браузера.

Вот код для ползунков:

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]);
            
        }
        
});

Когда я запускаю страницу отдельно ползунок показывает, но когда я запускаю его с остальной частью моего сайта [в #pageContent], это не так. Кто-нибудь знает, что я делаю не так?

1 Ответ

0 голосов
/ 05 августа 2020

Мне нужно было запустить код ползунка, когда был загружен дополнительный код HTML.

Функция jQuery .load () имеет дополнительные необязательные параметры - один из них "завершен".

Я настраиваю функцию $ (...). Load () соответственно: 

$('#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 ;
});
...