MobiScroll Initializing, but unable to change date

[Patricia]

Hello,

I'm new to MobiScroll and jQuery Mobile and I'm having some trouble
getting mobiScroll to work properly. It will popup when i click into
my textbox, but I am unable to change the date by clicking the +/-
or scrolling.


Here's my jquery code:

$("#mainPage").on("pageinit", function (e) {
$('#DateVolunteered').scroller({dateOrder: "Mddyy", mode:
'mixed'});

});

and here is the input html:
<input type="text" id="DateVolunteered" name="DateVolunteered"
placeholder="Date Volunteered class="required" />

It's part of a form with some other controls and stuff on it, but
commenting everything else out doesn't fix the problem.

The set and cancel buttons do work.

I'm using:
jQuery 1.7.1
jQuery Mobile 1.1.0
mobiscroll 1.6

Thanks for the help!

[Istvan Halmen]

Hello,

On what device/browser does the problem occur?
Does that happen on demo.mobiscroll.com with the same device/browser?

Istvan Halmen

[Patricia]

Hi Istvan,

It happens in Safari and Firefox (on windows 7),   the demo page works fine for both!

[Istvan Halmen]

Hi,

I'm not sure about this, as I don't see your full page code, but try to use the pagecreate event instead of pageinit, to init mobiscroll.
If it's not working, let me know and send the full html/javascript of your page.

Istvan

[Patricia]

Hi Istvan,

Thanks for the reply.

using the page create didn't solve the issue either. It's weird,
because it's clearing being partially setup, because it comes up, and
the set/cancel buttons work. just not the date picking part.

Here is my page code:

<div data-role="page" id="mainPage">

<div data-role="header" style="padding-left:4px;padding-top:4px;">
<div class="header-text">
Log Hours for Example City Museum
</div>
</div><!-- /header -->

<div data-role="content" id="mainPage">

<form id="LogHoursForm" action="/VolunteerSquared.Web/
VolunteerMobile/Timelog/LogHours" method="post">

<input type="text" id="ActivityName" autocomplete="off"
name="ActivityName" placeholder="Activity - Start typing the name " /
><input type="hidden" id="ActivityId" class="required"
name="ActivityId" />
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
<div id="OutcomeHolder">

</div>

<input type="text" id="DateVolunteered"
name="DateVolunteered" placeholder="Date Volunteered"
class="required" />

<br />Hours:<input type="text" id="Hours" name="Hours"
class="number required" placeholder="hh" />
<br />Minutes:<input type="text" id="Minutes" name="Minutes"
class="number required" placeholder="mm" />
<input type="submit" value="Log Hours" id="LogHours" />

</form>
<script src="../../ScriptsMobile/mobiscroll-1.6.js" type="text/
javascript"></script>
<script type="text/javascript">

$("#mainPage").on("pagecreate", function (e) {
console.log('pageshow');
$('#DateVolunteered').scroller("destroy").scroller();
});
</script>



</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">


</div>
</div>
</div><!-- /page -->

[Patricia]

Hello,
I've discovered that jQuery Validate is somehow interfering with the
plugin! If i remove the jquery Validate js it works fine. It even
has issues if i am not validating the form! I imagine i'll have to
take this up with the validate devs. but If you have any insight into
what it could be messing with it would be helpful!

Thanks,
Patricia

[Istvan Halmen]

Can you please provide some more details?
If i just include jquery.validate.js (latest), it does not brake mobiscroll.

Istvan Halmen