Using Mobiscroll with jQuery Mobile

Installing Mobiscroll in your jQuery Mobile app takes a couple of minutes. Let's see how you can start with a simple app.

Start a trial

First, start a free trial by entering your email address on the Mobiscroll homepage and create your account.

This is how the free trial works:

1. You can try Mobiscroll for free.
2. The trial needs an active connection to Mobiscroll servers for validation. Don't worry, the licensed product will work offline with downloadable resource files.
   Read about the differences between trial and licensed products.
3. You can upgrade to the licensed product at any time during or after your trial.

Enter your first name, set a password and you're ready to go!

Select jQuery. Then hit the big blue button.

Initializing Mobiscroll components

One of the first things people learn in jQuery is to use the $(document).ready() (or $(function() { }) ) function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pageinit event. Otherwise the components initialization is the same as in the jQuery version.

$(document).on('pageinit', '#testPage', function () {
    // create a datepicker with default settings
    $("#scroller").mobiscroll().date();
});

Using Mobiscroll Form elements

The Mobiscroll form elements can only be used on a jQuery Mobile pages if the JQM auto enhancing is turned off. To prevent jQuery Mobile from enhancing an entire block of content add data-enhance="false" to the parent container and nothing within the container will be enhanced. To use data-enhance="false" you must also set $.mobile.ignoreContentEnabled to true prior to initialization. Make sure to set the $.mobile.ignoreContentEnabled to true before the jQuery Mobile script is loaded in the mobileinit event.

<script>
    $(document).on("mobileinit", function () { $.mobile.ignoreContentEnabled = true; });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Other ways to get started

To see how mobiscroll is installed in a jQuery Mobile project you can download the Starter for jQuery Mobile.