7 Replies Latest reply on Sep 19, 2012 2:38 PM by Andre Pollard

    Mobiscroll date and time picker

      i am trying to use mobiscroll date and time picker because it looks nice

      http://mobiscroll.com/

       

      It depends on jquery which i have 1.6.4 loaded.

      I tried several different ways to load in the layout.erb but the javascript never kicks in

      This is what their docs says you need to use and it should work with jquery greater than 1.6

       

      Add an input to your HTML markup

      <input id="scroller" name="scroller" />

      2. Mobiscroll is relying on jQuery or Zepto.js (library with jQuery compatible API), so make sure you include what you're going to use under scripts.

      Requires jQuery >= 1.6 or Zepto.js


      <script src="jquery-1.7.2.min.js"></script> <!-- or --> <script src="zepto.js"></script>

      3. Initialize your control

      Default date picker

      $(function(){ // create a datepicker with default settings $("#scroller").scroller({ preset: 'date' }); });

      Default time picker

      $(function(){ // create a timepicker with default settings $("#scroller").scroller({ preset: 'time' }); });

      Default datetime picker

      $(function(){ // create a datetimepicker with default settings $("#scroller").scroller({ preset: 'datetime' }); });


        • Re: Mobiscroll date and time picker

          Any jquery experts? or can someone recommend a nice javascript date-time picker?

            • Re: Mobiscroll date and time picker
              Jon Tara

              Unfortunately, jQuery compatability does not imply jQuery Mobile compatability.

               

              You need to either find a data/time picker that is designed to work with jQuery Mobile, or else see if others have worked-out how to use the one that you are trying to use, or else undertake to do the adaptation yourself.

               

              The jQuery Mobile environment is quite different from a standard browser environment. Normally, page and document are the same thing. Actually, HTML and browsers have no concept of a page in the sense that jQuery Mobile understands a page. jQuery Mobile loads multiple pages into the same document. That is how it is able to do transitions between pages. This causes great grief for developers wanting to use, for example, Javascript map packages or ad-serving packages that weren't designed for JQM.

               

              I would suggest seeking advice from the developers of this date/time picker, or whatever support community that exists for it. Somebody else is likely to have wanted to use it with JQM, and you can see if they had success, and if they did, what they had to do.

               

              Edit: I looked at the website for mobiscroll, and it does say it works with jQuery Mobile. So, I would suggest you look for jQuery Mobile-specific documentation on their site.

                • Re: Mobiscroll date and time picker

                  Folks, please help, this datetime picker looks good! It does work with jquery > 1.6

                   

                  I also enlisted the help of the mobiscroll developer who sent me working rhomobile code. http://appcraft.theacidmedia.net/TestingMobiscroll.zip

                  but he is putting page div's in the main index file and does not understand how transitions happen with layout in rhostudio.

                   

                  i put the initialization script below here in the layout and it does load on my first page but when i click on another page, it does not load.  So something with how the layout and jqmobile-patch.js is breaking the script that was declared in the layout

                   

                      <% if System::get_property('platform') == 'APPLE' || System::get_property('platform') == 'ANDROID' || System::get_property('platform') == 'WP7' || is_bb6 || System::get_property('webview_framework') =~ /^WEBKIT/ %>

                          <script src="/public/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>

                          <script src="/public/jquery/jquery.json-2.3.min.js" type="text/javascript"></script>

                          <script src="http://demo.mobiscroll.com/Content/js/mobiscroll-2.0.2.full.min.js"></script>

                         

                          <link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.0.1.min.css">

                          <link rel="stylesheet" href="/public/css/jqmobile-patch.css">

                          <link rel="stylesheet" href="http://demo.mobiscroll.com/Content/css/mobiscroll-2.0.2.full.min.css">

                   

                   

                          <script type="text/javascript">

                              $(document).bind("mobileinit", function(){

                                  // jQuery-Mobile init options initialization goes here. For example, you may

                                  // enable automatically generated 'Back' buttons on headers this way:

                                  //$.mobile.page.prototype.options.addBackBtn = true;

                   

                   

                                  // You can disable (with false value) or change page loading message

                                  $.mobile.loadingMessage = false;

                                  //$.mobile.loadingMessage = "loading"; // it is default value

                   

                                  // For documented init options look here:

                                  // http://jquerymobile.com/demos/1.0.1/docs/api/globalconfig.html

                   

                                  // For poorly documented options search for ".prototype.options"

                                  // in the jQuery Mobile source code

                   

                                  // Rhodes custom option!

                                  // how long to wait transition end before "loading.." message will be shown

                                  $.mobile.loadingMessageDelay = 300; // in ms

                   

                   

                                  // Uncomment these options in case of performance problem in pages transition

                                  //$.mobile.defaultPageTransition = 'none';

                                  //$.mobile.defaultDialogTransition = 'none';

                                  //$.mobile.ajaxEnabled = false;

                                  //$.mobile.pushStateEnabled = false;

                                  //$.mobile.loadingMessageDelay = 50; // in ms

                   

                              });

                              $(function(){

                                $("#i").scroller({

                                      preset: 'datetime'

                                });

                                $("#i2").scroller({

                                                    preset: 'date',

                                                    display: 'inline'

                                              });

                                $('#showBtn').click(function(){

                                  $("#i").scroller('show');

                                });       

                              });

                          </script>

                    • Re: Mobiscroll date and time picker
                      Jon Tara

                      1. I don't see where you are loading jQuery Mobile at all. You need to load jquery.mobile.js after your MobileInit event handler.

                       

                      As such, you aren't going to get any transitions, nor are your jQuery Mobile widgets going to be instantiated. And your settings in your mobileinit even function aren't doing anything, because JQM isn't even being loaded.

                        • Re: Mobiscroll date and time picker

                          sorry, i stopped at where mobiscroll get initialized

                          Here is the rest of the initialization

                           

                          ..

                          .

                                      $(function(){

                                        $("#i").scroller({

                                              preset: 'datetime'

                                        });

                                        $("#i2").scroller({

                                                            preset: 'date',

                                                            display: 'inline'

                                                      });

                                        $('#showBtn').click(function(){

                                          $("#i").scroller('show');

                                        });       

                                      });

                                  </script>

                                  <% if System::get_property('platform') == 'WP7' %>

                                    <script type="text/javascript" charset="utf-8" src="/public/js/jquery-wp7-patch.js"></script>

                                  <% end %>

                                  <script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.0.1.min.js"></script>

                                  <script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script>

                           

                           

                              <% end %>

                            • Re: Mobiscroll date and time picker
                              Jon Tara

                              The initialization of the scrollers shown above is dependent on using a multi-page document, because both pages need to be present at the time that the document is loaded. The content of <head> (other than the title) is literally discarded by JQM on every page load except for the first.

                               

                              You either need to move the initialization out of the <head> and into the corresponding pages, or else use a delegation to document with a pageinit event.

                               

                              Not the cause of your trouble, but you really need to move this Javascript out of the <head> itself. You should be including external Javascript files. You don't want to be serving-up all this stuff with every page.

                              1 of 1 people found this helpful
                                • Re: Mobiscroll date and time picker

                                  Thanks Jon

                                   

                                  The mobiscroll developer responded with the same answer.  I tested by pulling it out of layout and put it in each page

                                   

                                  <div data-role="page" data-add-back-btn="true">

                                  <script type="text/javascript">

                                        $(function(){

                                                $("#iscroller").scroller({

                                                                    preset: 'date',

                                                                    display: 'inline'

                                                              });

                                              });

                                  </script>

                                   

                                  This is solved now.  Thanks for clarifying the loading order also

                                  Will try to put in application.js and test that also

                                  Cheers