Search code examples
jquerycssjquery-mobilemobiscrollscrollwheel

jQuery Mobile: Cannot get Mobiscroll demo to work

I'm using code from the Mobiscroll Select Scroller Demo, but the result in Safari, Firefox, and Chrome browsers is a dropdown list, not a wheel picker. I've checked out the existing questions/answers to no avail. I added the jQuery and jQuery Mobile scripts and the css, but this didn't make much difference.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll - Select Scroller</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <!--Includes-->
    <link href="css/mobiscroll.core-2.3.1.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.ios-2.3.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.select-2.3.1.js" type="text/javascript"></script>
    <script src="js/mobiscroll.core-2.3.1.js" type="text/javascript"></script>
    <script src="js/mobiscroll.ios-2.3.js" type="text/javascript"></script>

    <style type="text/css">
        body {
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
        }

    </style>

    <script type="text/javascript">

      $(function(){
          $('#demo').mobiscroll().select({
              theme: 'ios',
              display: 'inline',
              mode: 'scroller',
              inputClass: 'i-txt',
              width: 200
          });
      });

</script>

</head>

<body>
    <select name="States" id="sel">
        <option value="0">AL Alabama</option>
        <option value="1">AK Alaska</option>
        <option value="2">AR Arkansas</option>
        <option value="3">AZ Arizona</option>
        <option value="4">CA California</option>
        <option value="5">CO Colorado</option>
        <option value="6">CT Connecticut</option>
        <option value="7">DE Delaware</option>
        <option value="8">FL Florida</option>
        <option value="9">GA Georgia</option>
        <option value="10">HI Hawaii</option>
        <option value="11">ID Idaho</option>
        <option value="12">IL Illinois</option>
        <option value="13">IN Indiana</option>
        <option value="14">IA Iowa</option>
    </select>
</body>
</html>
Solution

  • Solution

    There are few error's in your code:

    1. mobiscroll.js needs to be initialized, this code example will not work without it. mobiscroll.js must be initialized AFTER jQuery and jQuery Mobile.

    2. Wrong SELECT is used for mobiscroll initialization:

      $('#demo').mobiscroll().select({

      and it should be:

      $('#sel').mobiscroll().select({

    3. jQuery Mobile should not be used with $(function(){ to initialize additional code. To find more about this topic and how to solve it with page events take a look at this ARTICLE in my personal blog.

    4. Content must be inside a page DIV if jQuery Mobile is to be used in this example.

    Example

    Working example: jsFiddle

    HTML: 

        <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="http://www.fajrunt.org/css/mobiscroll-2.4.custom.min.css" />    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script src="http://www.fajrunt.org/js/mobiscroll-2.4.custom.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <select name="States" id="sel">
                    <option value="0">AL Alabama</option>
                    <option value="1">AK Alaska</option>
                    <option value="2">AR Arkansas</option>
                    <option value="3">AZ Arizona</option>
                    <option value="4">CA California</option>
                    <option value="5">CO Colorado</option>
                    <option value="6">CT Connecticut</option>
                    <option value="7">DE Delaware</option>
                    <option value="8">FL Florida</option>
                    <option value="9">GA Georgia</option>
                    <option value="10">HI Hawaii</option>
                    <option value="11">ID Idaho</option>
                    <option value="12">IL Illinois</option>
                    <option value="13">IN Indiana</option>
                    <option value="14">IA Iowa</option>
                </select>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>   
    </body>
    </html>

    JS:

        $(document).on('pagebeforeshow','#index',function(e,data){    
        $('#sel').mobiscroll().select({
            theme: 'ios',
            display: 'inline',
            mode: 'scroller',
            inputClass: 'i-txt',
            width: 200
        });  
    });

    More info:

    If you want to find more about jQuery Mobile date pickers take a look at this article.