Page needs reloading in order for mobiscroll to work when using with jQuery Mobile about mobiscroll HOT 7 CLOSED

I suppose you downloaded by selecting jQueryMobile as framework. That includes 
an additional jQuery Mobile widget. In this case indeed you must include the 
script after the Jquery Mobile scripts. The benefit of this is that you can use 
it like this:

<input name="dob" id="dob" data-role="mobiscroll" data-options='{ "display": 
"bottom", "animate": "slideup" }' />

If you don't want to load mobiscroll after jQuery Mobile, than download again 
by selecting jQuery as framework. After that you can include the script before 
jQuery Mobile (but after jQuery of course)

I'm afraid that still didn't work. Based on the solution on issue #55, I tried 
with live() but it is recommended to use on(). I downloaded the two different 
frameworks, jQuery and jQuery Mobile and tried also with and without the 
example you gave above for the input tag,

I still have to reload the page. I have absolutely no idea what I'm doing 
wrong. Below is the code I used with more explanation on how I did it. Thanks 
for your help.

I tried this downloading the jQuery framework

<link rel="stylesheet" 
href="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" 
/>
<link rel="stylesheet" type="text/css" 
href="css/mobiscroll.datetime-2.4.min.css" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(document).on('pagecreate', function(){
        $.mobile.listview.prototype.options.headerTheme = "a";
        $.mobile.defaultDialogTransition = 'pop';
        $.mobile.defaultPageTransition = 'flip';
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
        // I tried with and without $.mobile.ajaxEnabled=false;
    });
</script>

<script src="js/mobiscroll.datetime-2.4.min.js"></script><!-- jQuery framework 
-->

<script>
$(document).on('pagecreate', function(){
    $('#dob').mobiscroll().date({
        theme: 'jqm',
        display: 'bottom',
        mode: 'scroller'
    });
});
</script>

<script 
src="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></
script>


with

<fieldset>
<legend>Verify Your Age</legend>
<div data-role="fieldcontain">
    <label for="dob">Date of Birth<span class="alert">  *</span></label>
<input name="dob" id="dob" /></div>
</fieldset>






I then tried this with the jQuery Mobile framework

<link rel="stylesheet" 
href="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" 
/>
<link rel="stylesheet" type="text/css" 
href="css/mobiscroll.datetime-2.4.min.css" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(document).on('pagecreate', function(){
        $.mobile.listview.prototype.options.headerTheme = "a";
        $.mobile.defaultDialogTransition = 'pop';
        $.mobile.defaultPageTransition = 'flip';
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
        // I tried with and without $.mobile.ajaxEnabled=false;
    });
</script>

<script 
src="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></
script>
<script src="js/mobiscroll.datetime-2.4.min.js"></script><!-- jQuery Mobile 
framework -->

<script>
$(document).on('pagecreate', function(){
    $('#dob').mobiscroll().date({
        theme: 'jqm',
        display: 'bottom',
        mode: 'scroller'
    });
});
</script>

with

<fieldset>
<legend>Verify Your Age</legend>
<div data-role="fieldcontain">
    <label for="dob">Date of Birth<span class="alert">  *</span></label>
<input name="dob" id="dob" /></div>
</fieldset>






And also tried this with again, the jQuery Mobile framework

<link rel="stylesheet" 
href="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" 
/>
<link rel="stylesheet" type="text/css" 
href="css/mobiscroll.datetime-2.4.min.css" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(document).on('pagecreate', function(){
        $.mobile.listview.prototype.options.headerTheme = "a";
        $.mobile.defaultDialogTransition = 'pop';
        $.mobile.defaultPageTransition = 'flip';
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
        // I tried with and without $.mobile.ajaxEnabled=false;
    });
</script>

<script 
src="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></
script>
<script src="js/mobiscroll.datetime-2.4.min.js"></script><!-- jQuery Mobile 
framework -->


with

<fieldset>
<legend>Verify Your Age</legend>
<div data-role="fieldcontain">
    <label for="dob">Date of Birth<span class="alert">  *</span></label>
<input name="dob" id="dob" data-role="mobiscroll" data-options='{ "display": 
"bottom", "animate": "slideup" }' /></div>
</fieldset>

I suppose this occurs after a page transition.
A problem can be if you are using the same id (#dob) in more than one pages, 
during the transition they are present at the same time.

[deleted comment]

It does occur after a page transition. I have two pages with a form with a date 
input using the same id. How can the id(s) be present at the same time if these 
are two different pages? It is not a multi-page. Regardless, I'm going to try 
changing those id(s). Not a simple task since it is the same php form called by 
the two pages.

BTW Thanks for your help.

I tried it with different id(s). I still have to reload the page. I assume the 
problem has to do with Ajax. If I give the link that takes me to the page where 
I need mobiscroll to be display a data-ajax="false", mobiscroll loads as it 
should. 

Unfortunately, I have too many files that link to that page.

I had the same problem, IT seems to happen if you Come from a jqm page because 
it uses Ajax to load  the page and therefore doesn't get the files in the 
header. I think there are 2 Solutions.
1 include the mobiscroll js on    the page you are linning from.
2. In the links to the page you can tell  jqm that it should avoid using Ajax 
when fetching next page.