Jquery Mobile and Mobiscroll: my popup only works once

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?

Do you get any error messages in the console? Do you have a link to demonstrate the problem? Where is this code located? — Jasper, Sep 27 '12 at 19:45
This code is in a php file. The actual code itself is located with the
. Its a private application which would require someone's username/password so I can't link you to it. How would I go about getting error messages? I have not seen any. — user1467225, Sep 27 '12 at 19:52
possible duplicate of [Jquery Mobile - $.mobile.changepage not loading external .JS files](http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files). Try my suggestions in this answer. I believe that the AJAX-nature of jQuery Mobile is parsing-out your code during page-change. — Jasper, Sep 27 '12 at 20:35

score 2 · Accepted Answer · answered Oct 03 '12 at 20:51

2

@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>

answered Oct 03 '12 at 20:51

user1467225

119
1
1
10

Jquery Mobile and Mobiscroll: my popup only works once

1 Answers1