Applying Kendo SPA and Template with jQuery Mobile

2 posts, 1 answers
  1. Pit
    Pit avatar
    7 posts
    Member since:
    Feb 2013

    Posted 19 Aug 2014 Link to this post

    [English]
    I'm applying the template jFlatu to my project, before already had views and routers working under Kendo SPA. But now, applying the template jFLatu, it gives me an error of GET, where tries to bring the file jQuery and not Kendo, to check the console, seems that jQuery Mobile the problem is.
    If I put jQuery Mobile with comments, everything works, and Kendo does what he has to do, but I need jQuery Mobile for the operation of the template.

    [Spanish]
    Estoy aplicando la plantilla jFlatu a mi proyecto, que ya tenia las vistas y routers funcionando bajo Kendo SPA. Pero me da un error de GET, donde jQuery intenta traer el archivo y no Kendo, al revisar la consola parace que es jQuery Mobile el problema.
    Si pongo jQuery Mobile con comentarios, todo funciona y Kendo hace lo que tiene que hacer, pero necesito jQuery Mobile para el funcionamiento de la plantilla.

    <head>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="kendo/js/jquery.min.js"></script>
            <!--<script src="js/libs/jquery.mobile-1.3.0.min.js"></script>-->
            <script type="text/javascript" src="kendo/js/kendo.all.min.js"></script>
    <script src="assets/flex-slider/jquery.flexslider-min.js"></script>
    </head>

    <body>
            <div id='app'></div>

            <script type="text/x-kendo-template" id="indexTemplate">
                <article>
                    <header>
                        <h1>Citizen Connected</h1>
                        <h2>Inicio De Sesión</h2>

                        <!-- Login -->
                <!--
                        <div id="logged-in">
                            Bienvenido, <span id="login-name"></span>.
                            <button id="log-out">Cerrar Sesión</button>
                        </div>
                -->
                        
                        <div id="logged-out">
                            Puedes iniciar sesión con:
                            <button id="buttonFacebook">Facebook</button>
                            <button id="buttonTwitter">Twitter</button>
                        </div>
                        <!-- End FB Login-->

                        <form id='add-item'>
                            <button type='submit' id='refresh'>Actualizar</button>
                            <button type='submit'>Añadir</button>
                            <div><input type='text' id='new-item-text' placeholder='Ingresa una denuncia.' /></div>
                        </form>
                    </header>
                    
                    <ul id='todo-items'></ul>
                    <p id='summary'>Cargando...</p>
                </article>

                <footer>
                    <ul id='errorlog'></ul>
                </footer>
            </script>

            <script type="text/x-kendo-template" id="reportarTemplate">
            <!-- page -->
            <div data-role="page" data-theme="a">
                
                <!-- sideNavigationPanel -->
                <div data-role="panel" id="sideNav" data-position="left">
                    <ul id="sideButtons">
                        <li><a href="https://www.facebook.com/pages/Citizen-Connected/255467614605481"><i class="icon-facebook"></i></a></li>
                        <li><a href="https://twitter.com/CitizenConnecte"><i class="icon-twitter"></i></a></li>
                        <li><a href="https://www.facebook.com/PeterConchaR"><i class="icon-facebook"></i></a></li>
                        <li><a href="https://twitter.com/PeterConchaR"><i class="icon-twitter"></i></a></li>
                    </ul>
                    <ul id="sidePanel" class="clleft">
                        <li id="active"><a href="#"><i class="icon-home"></i>Inicio</a></li>
                        <li><a href="about.html"><i class="icon-lightbulb"></i>Sobre CC</a></li>
                        <li><a href="contact.html"><i class="icon-envelope"></i>Contáctanos</a></li>
                    </ul>
                </div>
                <!-- /sideNavigationP -->
                
                <!-- header -->
                <div data-role="header" data-position="fixed">
                    <h1>Citizen Connected</h1>
                    <a href="#sideNav" id="navIcon"><i class="icon-th-list"></i></a>
                </div>
                <!-- /header -->
        
                <!-- content -->
                <div data-role="content">

                    <div id="logged-in">
                        Bienvenido, <span id="login-name"></span>.
                        <button id="log-out">Cerrar Sesión</button>
                    </div>
              
                    <!-- slogan  -->
                    <div class="ui-grid-solo">
                        <h1 class="intro">Registra tu denuncia</h1>
                        <!-- Mapa -->
                        <div id="map_canvas" style="width: 290px; height: 200px;"></div>    
                        <a href="#" onclick="checkIn()" data-role="button" class="btn swatch-2">Check In</a>
                    </div>
                    <!-- /slogan -->
          
                    <hr/>
                    
                    <!-- footer -->
                    <div class="footer text-center">
                      <p>COPYRIGHT 2013 Universidad de Guayaquil</p>
                    </div>
                    <!-- /footer-->
                </div>
                <!-- End Content -->
            </div>
            <!-- /page -->

            </script>

            <script type="text/x-kendo-template" id="layoutTemplate">

            </script>

            <script>
                // Views
                var indexView = new kendo.View("indexTemplate");
                var reportarView = new kendo.View("reportarTemplate");

                // Routers
                var router = new kendo.Router();

                router.route("/", function () {
                    indexView.render("#app");
                });

                router.route("/reportar", function () {
                    reportarView.render("#app");
                });

                $(function () {
                    router.start();
                });
            </script>

            <!-- Google Maps API -->
            <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>

            <script type="text/javascript" src="js/index.js"></script>

            <script type="text/javascript" src="js/libs/MobileServices.Web-1.1.0.min.js"></script>
            <script type="text/javascript">
                app.initialize();
            </script>
        </body>
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 20 Aug 2014 Link to this post

    Hello Peter,

    jQuery mobile and the Kendo UI SPA components are not compatible. Both libraries are implementations of the SPA pattern and respond to the URL changes in a different manner. 

    Regards,
    Petyo
    Telerik
     
    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
Back to Top