I am currently creating a mobile application based on Sencha Touch 2. At the moment, I'm just experimenting to see what Sencha is capable of too.
And today I am 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 its add-ons.
The strangest thing is that I cannot get any response when I create a jquery function.
I included the jquery library and my script in the index.html file in my sencha directory, and I just did a simple dumb test script too, see if it works, but I don't get any reaction at all when I try to do this in the browser. I see that the library and script are enabled through firebug. (As you can see, my jquery test is just a click event that the div should display, but it is not).
Am I just stupid - or what am I missing here?
Here is 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">
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>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<script id="microloader" type="text/javascript" src="sdk/microloader/development.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">
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function PictureSourceType() {};
PictureSourceType.PHOTO_LIBRARY = 0;
PictureSourceType.CAMERA = 1;
document.addEventListener("deviceready", onDeviceReady, false);
</script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
source
share