This is a migrated thread and some comments may be shown as answers.

Applying Kendo SPA and Template with jQuery Mobile

1 Answer 89 Views
SPA
This is a migrated thread and some comments may be shown as answers.
Pit
Top achievements
Rank 2
Pit asked on 19 Aug 2014, 08:11 PM
[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>

1 Answer, 1 is accepted

Sort by
0
Accepted
Petyo
Telerik team
answered on 20 Aug 2014, 03:45 PM
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!
 
Tags
SPA
Asked by
Pit
Top achievements
Rank 2
Answers by
Petyo
Telerik team
Share this question
or