I am attempting to learn how to use jQuery mobile and phonegap together. I have the following basic index page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.external-png-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-png-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-svg-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.4.3.css" />
<title>UIAdv</title>
</head>
<body>
<div class="app">
<h1>Welcome to UIAdv</h1>
Anchor
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
In there I have the following line which is supposed to render a button using jquery library:
Do Something
When the application is run using phonegap run ios and build is successful, I get the attached image output:
Whereas the button should look like this:
When I open the index.html in a browser (inside the directory of phonegap app), I get the following in console:
And I am guessing this is causing the problem. I need your support to solve this first-encounter problem (to myself). I downloaded all jQuery mobile zip file and placed all files within in respective folders in the phonegap app.
Thanks,
The cordova.js script tag should be in the header. Also you need to check that the cordova.js file is present in the www directory of the app. I have rewritten the html file. You can use the code below to test your jquery mobile app. Happy coding!!!
<html>
<head>
<title>UIAdv</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- link rel="stylesheet" type="text/css" href="css/index.css" /-->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.external-png-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-png-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-svg-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.3.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.4.3.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.js"></script>
<!-- script type="text/javascript" src="js/index.js"></script -->
<!-- script type="text/javascript"> app.initialize(); </script -->
</head>
<body>
<div class="app">
<h1>Welcome to UIAdv</h1>
Anchor
</div>
</body>
</html>
Related
I need one help.I want to set config file which will keep all javascript file path and in index page it will called dynamically and include using angular.js or Javascript. I am explaining my file below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<!--<script src="js/angularroute.js" type="text/javascript"></script>-->
<script src="js/angularuirouter.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link rel="stylesheet" type="text/css" media="all" href="css/angular-datepicker.css" />
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div ui-view>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/shortcut.js"></script>
<script src="js/defaults.js"></script>
<script src="js/logout.js"></script>
</body>
</html>
As you can see here i have many javascript and css file links.Here i need i will set path in any other file , call them to this index.html and will include using Loop.Please help me.
You can do what you want using gulp or grunt. In case you are not using one of them yet, I suggest you to take a look at them.
For your specific case, there are several tools you can use. For example, for gulp, you can use this gulp-inject.
Hi in the below code datepicker() is not working using jquery.But separately it's working fine.
After adding the code into my page it's not working this is my sample code.
html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Admission Form</title>
<link rel="stylesheet" href="css/admissionform.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.date-picker').datepicker();
});
</script>
<link rel="stylesheet" href="css/flexslider.css">
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
You have multiple calls to jQuery:
<script src="js/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Leave only only call (before any use of jQuery). Also check DevTools console for other errors (if any).
Also, you have <input id="datepicker"> but call datepicker for class selector .date-picker
Input element is with ID datepicker but you have used the class selector to create datepicker
<input type="text" id="datepicker">
jQuery('.date-picker').datepicker();
use id selector
jQuery('#datepicker').datepicker();
Check Console for errors
You have used 2 jquery files which might also cause some issue
I have a web app that works fine on safari. After I add it to home screen on an ipad/iphone, there is an inconsistent issue wherein the app when launched in web-clip mode, displays a blank white screen.
I tried debugging using the web console using Mac, but did not see any console errors or network activity happening. My initial guess was that it was the file loading time but the network tab would show this activity in such a case.
Could not trace any pattern for this since it is inconsistent, but noticed this first time on an iphone after I left it idle for sometime. Clearing the cache and running the app all over again did not help.
Have seen this in ios 7.0.x as well as 7.1.x devices. Read a few articles saying that the web clip mode on ios 7 was buggy but haven't really got any pointers to the above mentioned issue.
I am planning to put in alerts to check if any execution is happening.
Can someone help with any pointers to the issue/solution?
Adding code as requested
Adding the index.html code:
<html>
<head>
<title>XYZ</title>
<meta charset="UTF-8">
<!-- to avoid caching especially in webclip -->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=no" />
<!-- <meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- Bookmark Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="css/images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="css/images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="css/images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="css/images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="css/images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="css/images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="css/images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="css/images/favicons/apple-touch-icon-152x152.png">
<meta name="apple-mobile-web-app-title" content="Health eCircle Patient">
<link rel="icon" type="image/png" href="css/images/favicons/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="css/images/favicons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="css/images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="css/images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="css/images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-startup-image" href="css/images/favicons/startup.png">
<meta name="application-name" content="Health eCircle Patient">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<!-- Bookmark Icons:end -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- <link rel="apple-touch-icon" href="img/icons/health-ecircle-app-icon-tablet-ipad.png">-->
<!-- CSS section start-->
<link rel="stylesheet" href="css/libs/lib-all.css" />
<link rel="stylesheet" href="css/dist/knugget.min.css" />
<!-- CSS section End-->
<!-- JS section start -->
<script src="js/libs/lib-all.js" type="text/javascript" ></script>
<script src="js/dist/knugget.min.js" type="text/javascript" ></script>
<!-- JS section end -->
</head>
<body>
</body>
</html>
Adding the app launch code:
$(document).ready(function() {
function initialize() {
//router = new AppRouter();
//Backbone.history.start();
Handlebars.partials = Handlebars.templates; //for using one template inside the other.
HandlebarsHelper.registerCustomHelpers();
$.klplot.init();
$.ajaxSetup({
timeout: 40000 //15 seconds default time out.
});
var masterView = new MasterView();
}
initialize();
});
In masterview.js:
initialize: function() {
var contentbox = Handlebars.templates.contentbox();
$("body").append(contentbox);
this.$el = $(this.id);
this.currentView = new LoginView({
containerId:this.tagIds.contentBox,
viewId:this.viewIds.login});
this.backButtonStack.push("#");
this.bindEvents();
}
Im a bit of noob when it comes to coding. still learning as i go
Im trying to add this Javascript library to my website
http://buzz.jaysalvat.com
In their documents it say to add some code to specify the mp3 file
Here is my head Tag
<html>
<head>
<title>Through The Glass Eye</title>
<meta name="viewport" content="width=1120,user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.poptrox-2.1.js"></script>
<script src="js/config.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/buzz.js"></script>
<script>
var mySound = new buzz.sound("/Audio/rdn071.mp3");
</script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
</head>
The site is loading and i checked with firebug the Jscript is loading...
Am i doing this correctly???? Thanks a lot in advance
in case you want to make it play right after the page is loaded, use the ready event, your code could be as in this example:
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/buzz.js"></script>
<script>
var mySound = new buzz.sound("/Audio/rdn071.mp3");
$(document).ready(function(){
mySound.play();
});
</script>
</head>
tested in jquery 1.10.2
I'm stuck here for 2 days now, and I really hope you can help me.
I'm trying to use this theme I bougth on wrapbootstrap ( https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR ) with backboneJS and requireJS
So, basically, I have this file structure for the exemple :
index.html
app/
|___ js/
|____ main.js
assets/
|___ js
|___ ace.min.js
|___ ace-extra.min.js
|___ ace-elements.min.js
|___ bootstrap.min.js
|___ jquery.min.js
libs
|___ require
|___ require.js
So, when I use this basic template :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css" />
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script src="assets/js/ace-extra.min.js"></script>
</head>
<body>
<!--basic scripts-->
<script src='assets/js/jquery-2.0.3.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--page specific plugin scripts-->
<!--ace scripts-->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
</body>
</html>
No errors, all work perfectly. Then, I want, to load all the script
ace-extra.min.js
jquery.min.js
bootstrap.min.js
ace-elements.min.js
ace.min.js
In this order, juste like the template.
So, I add this line in the head
<script async data-main="app/main" src="libs/require/require.js"></script>
and created the main.js like this :
require.config({
// The shim config allows us to configure dependencies for
// scripts that do not call define() to register a module
shim: {
bootstrap: {
deps: ['jquery']
},
ace: {
deps: ['aceElement']
},
aceElement: {
deps: ['aceExtra', 'bootstrap', 'jquery']
}
},
paths: {
jquery: '../assets/js/uncompressed/jquery-2.0.3',
bootstrap: '../assets/js/uncompressed/bootstrap',
ace: '../assets/js/uncompressed/ace',
aceExtra: '../assets/js/uncompressed/ace-extra',
aceElement: '../assets/js/uncompressed/ace-elements'
}
});
require([
'jquery',
'bootstrap',
'ace'
], function() {
});
and I remove all the scripts, so I have this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css" />
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script async data-main="app/main" src="libs/require/require.js"></script>
</head>
<body>
...
</body>
</html>
but here, I have an error
Uncaught TypeError: Object #<Object> has no method 'handle_side_menu'
comes from here :
jQuery(function($) {
//ace.click_event defined in ace-elements.js
ace.handle_side_menu(jQuery);
ace.enable_search_ahead(jQuery);
ace.general_things(jQuery);//and settings
ace.widget_boxes(jQuery);
/**
//make sidebar scrollbar when it is fixed and some parts of it is out of view
//>> you should include jquery-ui and slimscroll javascript files in your file
//>> you can call this function when sidebar is clicked to be fixed
$('.nav-list').slimScroll({
height: '400px',
distance:0,
size : '6px'
});
*/
});
despite of this generated code, (Chrome dev tool) :
<html lang="en"><head>
<meta charset="utf-8">
<title>Blank Page - Ace Admin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css">
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css">
<link rel="stylesheet" href="assets/css/ace-responsive.min.css">
<link rel="stylesheet" href="assets/css/ace-skins.min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script async="" data-main="app/main" src="libs/require/require.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="app/main.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="app/../assets/js/uncompressed/jquery-2.0.3.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="app/../assets/js/uncompressed/bootstrap.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceExtra" src="app/../assets/js/uncompressed/ace-extra.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceElement" src="app/../assets/js/uncompressed/ace-elements.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="ace" src="app/../assets/js/uncompressed/ace.js">
</script></head>
<body style=""></body></html>
So, I really don't understand, I would be really happy if anyone have an answer.
Thansk !
Kai23
So, it turns out it's the order in which you are doing things in the ace.min.js file. To fix it, just move your second jQuery function which contains the ace.handle_side_menu to the bottom of your ace.min.js file. It is a bit of a coincidence, but here's why.
When require loads your main.js file, it starts asynchronously loading your js files. This gives the rest of the page and DOM a chance to load (which is precisely why we like require.js). By the time your ace.min.js file gets loaded, the window has already signalled the onReady event. So, in your ace file where you have
jQuery(function($) {
ace.handle_side_menu(jQuery);
jQuery immediately realizes the DOM is ready and immediately calls the function you're passing in (the function($) part). This function then starts to run before handle_side_menu gets attached to the ace object. If you use the Chrome debugger tools and place breakpoints on both places where you have handle_side_menu, you'll see that the one inside the jQuery callback gets hit first.
dude, it's a coincidence.
I used the same theme for my project, you can look into my html template:
https://github.com/pjyong/chenxi/blob/master/src/ChenXi/MainBundle/Resources/views/Default/index.html.twig
and my main JS file:
https://github.com/pjyong/chenxi/blob/master/web/app/js/main.js
If you have more questions, I will answer them.