Jquery Mobile $(document).ready();

Question

I'm trying make a mobile web page. The page has an image slider. But I have a problem about document.ready()

I have searched about this problem and everybody tells me to use:

$(document).bind('pageinit', function() {});

But I think the slider wants to

$document.ready ( or I can't run) 

The Slider name is bxslider (bxslider.com)

I think different solutions for that :

1. disable ajax loading for jquery mobile and every page will be reload and document ready will work.

2. Change image slider.

Does anybody have a suggestion?

EDIT : i forgot add the code sorry http://d.pr/n/SNW7

Answer 1

I have had the same issue with JQM+bxSlider, and after investigating and testing a lot I found the solution for JQM.

You have to use $document.ready and $(document).on('pageshow'

take a look to this example. In this example you have a slider called bxslider in a page with ID "Quiz":

<script>
    $(document).ready(function() {
        myCarousel=$('.bxslider').bxSlider({
            captions: false,
            infiniteLoop: false,
            hideControlOnEnd: true,
            slideMargin: 10,
            adaptiveHeight : true
        });   
    });

    $(document).on('pageshow', '#Quiz', function(){ 
        myCarousel.reloadSlider();
    });
</script>

Hope this helps.

Answer 2

Use event like pageshow pagehide

$( 'div' ).on( 'pageshow',function(event, ui){
  alert( 'This page was just hidden: '+ ui.prevPage);
});

$( 'div' ).on( 'pagehide',function(event, ui){
  alert( 'This page was just shown: '+ ui.nextPage);
});

http://jquerymobile.com/demos/1.2.1/docs/api/events.html

or something like

$(document).on('pagebeforeshow', '#index', function(){ 
    $('.bxslider').bxSlider({
        slideWidth: 360
    });    
});