Page needs reloading in order for mobiscroll to work when using with jQuery Mobile

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Clicking on a link that directs to the form where mobiscroll is to be 
displayed
2.
3.

What is the expected output? What do you see instead?
As expected, I should tap on the input with mobiscroll for it to display. 
Instead, I have to reload the page. Even with $.mobile.ajaxEnabled=false; the 
page needs to be reloaded.

What version of the product are you using? On what operating system?
2.4, I was using 2.3 as well

Please provide any additional information below.
I assume the problem is that the code that calls for mobiscroll as well as 
mobiscroll are added after jQuery Mobile which is not the optimal way according 
to http://jquerymobile.com/demos/1.3.0-beta.1/docs/api/globalconfig.html

Is should be

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

but mobiscroll does not work unless it is added as shown below:

<script src="jquery.js"></script>
<script src="jquery-mobile.js"></script>
<script src="custom-scripting.js"></script>

Here is the code I'm using inside the head tag and in the body tag inside the 
data-role="page":

<link rel="stylesheet" href="css/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="http://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;
        $.mobile.ajaxEnabled=false;
    });
</script>

<script 
src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.j
s"></script>
<script src="js/mobiscroll.datetime-2.4.min.js"></script>

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

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

Original issue reported on code.google.com by ultimate...@gmail.com on 26 Jan 2013 at 10:37

[GoogleCodeExporter]

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)

Original comment by diosla...@gmail.com on 28 Jan 2013 at 12:38

• Changed state: Invalid

[GoogleCodeExporter]

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>

Original comment by ultimate...@gmail.com on 28 Jan 2013 at 9:30

[GoogleCodeExporter]

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.

Original comment by diosla...@gmail.com on 29 Jan 2013 at 7:17

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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.

Original comment by ultimate...@gmail.com on 29 Jan 2013 at 7:45

[GoogleCodeExporter]

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.

Original comment by ultimate...@gmail.com on 29 Jan 2013 at 8:08

[GoogleCodeExporter]

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.

Original comment by jan.kaj....@gmail.com on 6 Nov 2014 at 1:42