Question

The only way I can get the mobiscroll datetime picker to work is if I disable ajax and set rel=”external” from other files. I want the smooth transition of Jquery’s ajax, but I can’t get it to work. This is how I have the declaration set up:

   $('#gauge_page').live('pageinit', function(event)  
{
    alert( 'This page was just enhanced by jQuery Mobile!' );
   var now = new Date();
    var then = new Date();
    then.setHours(then.getHours()-12);


    $('#start_datetime').scroller({
         preset: 'datetime',
        theme: 'android-2',
        display: 'modal',
        mode: 'scroller',
        dateFormat: 'mm/dd/yy',
        timeFormat: 'hh:ii a' 
    });

    $('#start_datetime').scroller('setDate', then, true);



     $('#end_datetime').scroller({
        preset: 'datetime',
        theme: 'android-2',
        display: 'modal',
        mode: 'scroller',
        dateFormat: 'mm/dd/yy',
        timeFormat: 'hh:ii a' 

    });

    $('#end_datetime').scroller('setDate', now, true);


}); 

<div id="date_form_start">
        <h4><b>Start</b></h4>       
        <input type="text" name="start_datetime" id="start_datetime"  class="date_form_field_datetime" />           
    </div>

The alert() message shows up every time, but the date fields are only initialized if I refresh the page. So how do I get it to properly initialize with the pageinit event?

Answer 1

@Jasper was right. For any code outside of the <div data-role="page"> it is not executed if you are utilizing AJAX. To get my code to work I had to place the code WITHIN that <div>