Jquery library not working with sencha touch?

Question

I am currently building an mobile application that is based on Sencha Touch 2. At the moment im just trying out some experiments to see what Sencha is capable too.

And today I got stuck on a thing that really seems strange - I just wanted to try if I could use the jQuery library for my application and use it's additions.

Strangest thing is I can't get any response from when I am making a jquery function.

I've included the jquery library and my script in the index.html file in my sencha directory and I just made a simple stupid test script too see if it works - but I don't get any reaction at all when im trying it out in the browser. I can see that the library and the script is included via firebug.(As you can see my jquery test is just a simple click event that should display a div, but it ain't).

Am I being plain stupid - or what am I missing out here?

Here's my index.html file

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>scroller</title>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("#show_me").click(function () {
            $('#magic').slideDown('slow');
        });

    });

</script>


<link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">
<style type="text/css">
     /**
     * Example of an initial loading indicator.
     * It is recommended to keep this as minimal as possible to provide instant feedback
     * while other resources are still being loaded for the first time
     */
    html, body {
        height: 100%;
        background-color: #1985D0
    }

    #appLoadingIndicator {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        text-align: center;
        width: 100%;
        height: 30px;
        -webkit-animation-name: appLoadingIndicator;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: linear;
    }

    #appLoadingIndicator > * {
        background-color: #FFFFFF;
        display: inline-block;
        height: 30px;
        -webkit-border-radius: 15px;
        margin: 0 5px;
        width: 30px;
        opacity: 0.8;
    }

    @-webkit-keyframes appLoadingIndicator{
        0% {
            opacity: 0.8
        }
        50% {
            opacity: 0
        }
        100% {
            opacity: 0.8
        }
    }
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<!-- script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script--->
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<!--<script type="text/javascript" src="app.js"></script>-->
<script type="text/javascript" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/phonegap_shortcuts.js"></script>
<script type="text/javascript" src="js/maps.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/proxy.js"></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<!--
<script type="text/javascript">
    document.addEventListener("deviceready", app.mainLaunch, false);
</script>
-->
<script type="text/javascript">
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }
    function PictureSourceType() {};
    PictureSourceType.PHOTO_LIBRARY = 0;
    PictureSourceType.CAMERA = 1;
    //var ja = phonegap.shortcuts.getLocation();
    //console.log('ja:'+ja);
    document.addEventListener("deviceready", onDeviceReady, false);
</script>
    </head>
    <body>
    <div id="appLoadingIndicator">
    <div></div>
    <div></div>
    <div></div>
    </div>
    </body>
    </html>

They should be compatible i think - i don't really understand why it aint working really since i'm making such a simple jquery call — Fruxelot
I think you'd better ask for help when you're stuck with Sencha instead of trying to make it work with jQuery. Both these frameworks are heavy and do pretty much the same things. — Titouan de Bailleul
Maybe - but there are some small essential stuff that i would need from the jquery library to make this work. — Fruxelot

Joost van Hassel Joost van Hassel · Accepted Answer · 2012-10-18T00:39:51

Maybe the element you are clicking on, doesn't have the id 'showme'. This can happen because the button you created has id 'showme' in Sencha, but the actual HTML that gets rendered contains another id.

If this is true (you can check this using FireBug of course), you might want to listen to the 'tap' event on the button instead of using jQuery to bind to the 'click' event. See http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap for documentation.

It is possible to use jQuery with Sencha, but it's important to keep in mind that components in Sencha aren't a direct representation of elements in the DOM, some components in Sencha consist of several DOM elements when rendered.

Hope this helps

Jquery library not working with sencha touch?

1 Answers