bxSlider not showing on page change on jQuery mobile page

Question

In my jQuery mobile application I have two pages A and B. Page A contains a link to B. B contains a slider.

Page B:

<div data-role="page">
   <div data-role="content">
      <div id="list-of-people">
            <div class="bxslider-header">
                <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" class="header-right">
                    <input type="radio" name="sliderNav" id="sliderPrevious"
                           value="sliderPrevious"/>
                    <label for="sliderPrevious">&lt;</label>

                    <input type="radio" name="sliderNav" id="sliderNext" value="sliderNext"/>
                    <label for="sliderNext">&gt;</label>
                </fieldset>
            </div>

            <div id="sliderPeople" class="navi">
                    {% for person in people %}
                        <div class="slide">
                                <p>{{ person.firstname person.lastname }}</p>
                        </div>
                    {% endfor %}
            </div>
    </div>
</div>

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
   <p>my footer</p>

   <script type="text/javascript">
       $(function() {
           var bxSliderPeople = $('#sliderPeople').bxSlider({
            adaptiveHeight: true,
            pager: false,
            onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                $('#sliderPeople .active-slide').removeClass('active-slide');
                $('#sliderPeople > div').eq(currentSlideHtmlObject + 1).addClass('active-slide');
            },
            onSliderLoad: function () {
                $('#sliderPeople > div').eq(1).addClass('active-slide');
            }
          });
       });
      </script>
   </div>
</div>

Here comes a description of my problem:

==> When I load page B, the slider is displayed just fine.

==> When I access page B via a link on page A (= page B gets loaded via ajax), the slider does not show at all . However, the slides are contained in the DOM. Inspecting my HTML, I see something like this:

<div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;">
   <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;">
       <div id="sliderPeople" class="navi" style="width: 1215%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"> 
           ... 
        </div> 
    </div> 
</div>

How can I achieve that my slider also gets displayed when I access page B via a page link on page A?

Answer 1

UPDATED ANSWER:

Instead of pagecreate, you can use the pagecontainer widgets show event

Start with the slides div hidden to prevent seeing them uninitialized on page show:

.navi {
    display: none;
}

Then have a global variable for the slider so it only gets initialized once, not on every page show. In the event handler check that page2 is being shown and that we have not yet initialized the slider. If not, show the container dive and call bxSlider():

var bxSliderPeople;
$(document).on("pagecontainershow", function(event, ui ){ 
    if (ui.toPage.prop("id") == 'page2' & !bxSliderPeople) {
        $(".navi").show();
        bxSliderPeople = $('#sliderPeople').bxSlider({
            adaptiveHeight: true,
            infiniteLoop: true,
            pager: false,
            onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                $('#sliderPeople .active-slide').removeClass('active-slide');
                $('#sliderPeople > div').eq(currentSlideHtmlObject + 1).addClass('active-slide');
            },
            onSliderLoad: function () {
                $('#sliderPeople > div').eq(1).addClass('active-slide');
            }
        });
    }
});

DEMO

ORIGINAL ANSWER:

Instead of putting your code in the generic jQuery ready function:

$(function() {... 

Try the jQM pagecreate event for pageb:

$(document).on("pagecreate","#pageB", function(){ ...

This will run the code after pageb has been loaded into the DOM. Note "#pageB" assumes your page div is

<div id="pageB" data-role="page">

Make your IDs correspond.

Answer 2

Below code will initialize bxslider once ajax is complete. In your case, the initialization happens on page load, whereas the bxslider components are added after page load.

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData(dataFromServer)
    })
}

function handleData(data) {
    var bxSliderPeople = $('#sliderPeople').bxSlider({
            adaptiveHeight: true,
            pager: false,
            onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                $('#sliderPeople .active-slide').removeClass('active-slide');
                $('#sliderPeople > div').eq(currentSlideHtmlObject + 1).addClass('active-slide');
            },
            onSliderLoad: function () {
                $('#sliderPeople > div').eq(1).addClass('active-slide');
            }
          });
       });
}

Below code will initialize bxslider on page load incase you need to see bxSlider directly

 <script type="text/javascript">
       $(function() {
         handleData();
 });
      </script>