Can't get select handler working

3 posts, 0 answers
  1. Chad
    Chad avatar
    3 posts
    Member since:
    Sep 2011

    Posted 10 Feb 2012 Link to this post

    I'm evaluating Kendo mobile for an upcoming project and am not having much luck getting a select handler on the tab strip to work as it should. I have this very simple page set up (using PhoneGap) and whenever I try to add a select handler, the UI completely fails to render and all I see is a white page with the text from all the views (no tab strip, no header, etc). If I remove the select handler, things render fine. 

    <!DOCTYPE html>
    <html>
      <head>
      <title></title>
       
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <meta charset="utf-8">
     
     
        <!-- iPad/iPhone specific css below, add after your main css >
        <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />       
        <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />      
        -->
        <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
        <script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>
      <script>
        if (typeof window._nativeReady === "undefined")
            window._nativeReady = true;
      </script
        <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/app.js"></script
      <script src="js/kendo.mobile.min.js"></script>
      <link href="styles/kendo.common.min.css" rel="stylesheet" />
      <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
      <script type="text/javascript">
     
     
        // If you want to prevent dragging, uncomment this section
        /*
        function preventBehavior(e)
        {
          e.preventDefault();
        };
        document.addEventListener("touchmove", preventBehavior, false);
        */
         
        /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
        for more details -jm */
        /*
        function handleOpenURL(url)
        {
            // TODO: do something with the url passed in.
        }
        */
         
        function onBodyLoad()
        {      
            document.addEventListener("deviceready", onDeviceReady, false);
        }
         
        /* When this function is called, PhoneGap has been initialized and is ready to roll */
        /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
        for more details -jm */
        function onDeviceReady()
        {
            // do your thing!
                   App.requireSession();
     
        }
         
        </script>
      </head>
      <body onload="onBodyLoad()">
      <div data-role="view" id="tabstrip-card" data-init="cardViewInit" data-title="My card" data-layout="mobile-tabstrip">
        card
      </div>
       
      <div data-role="view" id="tabstrip-providers" data-title="Providers" data-layout="mobile-tabstrip">
        providers!
      </div>
     
      <div data-role="view" id="tabstrip-savings" data-title="My savings" data-layout="mobile-tabstrip">
        savings!
      </div>
     
      <div data-role="view" id="tabstrip-logout" data-title="Log out" data-layout="mobile-tabstrip">
        log out!
      </div>     
     
      <div data-role="layout" data-id="mobile-tabstrip">
        <header data-role="header">
            <div data-role="navbar">
                <!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>-->
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
            </div>
        </header>
     
        <footer data-role="footer">
            <div data-role="tabstrip" id="footer-tabs">
                <a href="#tabstrip-card" data-icon="contacts">My card</a>
                <a href="#tabstrip-providers" data-icon="history">Providers</a>
                <a href="#tabstrip-savings" data-icon="favorites">My savings</a>
                <a id="logout" href="#tabstrip-logout" data-icon="settings">Log out</a>
            </div>
        </footer>
      </div>
     
      <script>
      
        $(document).ready(function() {
            var tabStrip = $("#footer-tabs").data("kendoMobileTabstrip");
            tabStrip.bind("select", function(e) { alert(1); })
        });
      </script>
     
      <script>
         window.kendoMobileApplication = new kendo.mobile.Application(document.body);
      </script>
      </body>
    </html>
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 11 Feb 2012 Link to this post

    Hi,

    Reason for that is that the tabstrip widget is not initialized yet in document.ready event. You should bind it on the first viewShow application event. 

        var tabStripBound = false;
         window.kendoMobileApplication = new kendo.mobile.Application(document.body, {
         viewShow: function() {
             if (!tabStripBound) {
             var tabStrip = $("#footer-tabs").data("kendoMobileTabstrip");
             tabStrip.bind("select", function(e) { alert(1); });
             tabStripBound = true;
             }
          }
    });

    Since this approach is far from convenient, we are going to introduce a declarative event binding through data attributes for our next release. 

    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Chad
    Chad avatar
    3 posts
    Member since:
    Sep 2011

    Posted 14 Feb 2012 Link to this post

    Ah great, that works. Definitely non-intuitive though, glad to hear another method is in the works!
Back to Top