Here, this my html code
<html >
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<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/bootstrap.min.css" />
<title>Hello World</title>
</head>
<body ng-app="socketApp" ng-controller="NewsController">
<script id="users" type="text/template">
</script>
<script>
onload = function(){
var users = document.getElementById('users').innerHTML;
// var names = ['loki', 'tobi', 'jane'];
var html = ejs.render("<ul><li><%= session.User.name %></li></ul>", { });
document.body.innerHTML = html;
}
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/sails.io.js"></script>
<script type="text/javascript">
io.sails.useCORSRouteToGetCookie = false;
io.sails.url = 'http://192.168.1.4:1337/';
</script>
<!--script type="text/javascript" src="http://cdn.socket.io/socket.io-1.0.3.js"></script-->
<!--script type="text/javascript" src="js/socket.io.js"></script-->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/ejs.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
from the above code
var html = ejs.render("<ul><li><%= session.User.name %></li></ul>", { });
Here, i want to get sails server created session object in my cordova front end view. i tried many times , but i have't get session name. I'm very new to cordova . So , Please help me .
Related
I've written an app in cordova 4.0 with jquery mobile & jquery, and when I try to run the app on Galaxy 2 with android 2.3.5 (gingerbread) all I get is white screen without any error or anything going on.
note: I capture any exceptions from javascript and alert them, so if there was an exception I should have seen a message. but there's nothing.
any idea why? does Cordova suppose to work properly on android 2.x? I found mix opinions on that subject...
thanks!
EDIT: adding the source code. note that I have js that wrap cordova so everything under utils.* is a wrapper layer for cordova. this is index.html, the first page that should be loaded. another thing I want to say is that I added a code to catch and alert any exceptions (window.onerror = function(message, url, lineNumber)...) and alert them, and it usually work but in this case I see no alert.
<!DOCTYPE html>
part of pages we load does not work.
-->
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=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" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- My extensions to jquery-mobile css -->
<link rel="stylesheet" type="text/css" href="css/my-jquerymobile-extend.css" />
<!-- all basic css -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/msgbox.css" />
<link rel="stylesheet" type="text/css" href="css/intro.css" />
<link rel="stylesheet" type="text/css" href="css/splash.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/result_page.css" />
<link rel="stylesheet" type="text/css" href="css/intlTelInput.css" />
<title>SeekWhale</title>
<!-- include cordova and jquery -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="telephonenumber.js"></script>
<script type="text/javascript" src="js/jquery/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery/custom_loading_gif.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-draggable.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.ui.touch-punch.min.js"></script>
<!-- Include utils -->
<script type="text/javascript" src="js/utils/config.js"></script>
<script type="text/javascript" src="js/utils/flags.js"></script>
<script type="text/javascript" src="js/utils/ajax.js"></script>
<script type="text/javascript" src="js/utils/debug.js"></script>
<script type="text/javascript" src="js/utils/visuals.js"></script>
<script type="text/javascript" src="js/utils/device.js"></script>
<script type="text/javascript" src="js/utils/contacts.js"></script>
<script type="text/javascript" src="js/utils/events.js"></script>
<script type="text/javascript" src="js/utils/navigation.js"></script>
<script type="text/javascript" src="js/utils/phone_numbers.js"></script>
<script type="text/javascript" src="js/utils/prompt.js"></script>
<script type="text/javascript" src="js/utils/forms.js"></script>
<!-- Replace UI language with chosen language -->
<script type="text/javascript" src="js/languages/dictionary.js"></script>
<script type="text/javascript" src="js/languages/hebrew.js"></script>
<!-- function to init pages -->
<script type="text/javascript" src="js/init_page.js"></script>
</head>
<body data-role="page">
<img class="splash" src="img/bg-entry.png"></img>
<script type="text/javascript">
// set language
ui_dictionary.set_dictionary_words();
// called when cordova is ready to run page init script
function InitApp()
{
setTimeout(function()
{
utils.prompt.log("app started!");
var effect = utils.navigation.transition.slidedown;
// if should skip directly to main
if (utils.flags.skip_to_main)
{
utils.prompt.log("skip to main page");
utils.navigation.load_page(utils.config.get_last_page(), effect);
}
// if require first setup open the first setup page:
else if (utils.config.get_successfully_registered() == false)
{
utils.prompt.log("load register");
utils.navigation.load_page("register.html", effect);
}
// if registered but not confirmed, go to confirm page
else if (utils.config.get_is_device_confirmed() == false)
{
utils.prompt.log("load confirm page");
utils.navigation.load_page("confirm.html", effect);
}
// if all goes well, open the main page!
else
{
utils.prompt.log("load main page");
utils.navigation.load_page("main.html", effect);
}
}, 1);
}
utils.events.on_device_ready(InitApp);
</script>
</body>
<script type="text/javascript" src="cordova.js"></script>
this one should be the first js to be loaded. put all other js files after it.
I am getting following exception...
ReferenceError: cordova is not defined
at cordova.addConstructor(function()
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<!-- ionic css -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="libs/leaflet/leaflet.css" />
<!--<link rel="stylesheet" href="libs/leaflet/leaflet-routing-machine.css" />-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="libs/leaflet/leaflet.ie.css" />
<![endif]-->
<!-- ionic/angularjs scripts -->
<title>"Test App"</title>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views
Additional attributes set its look, ion-nav-bar animation and icons
Icons provided by Ionicons: http://ionicons.com/
-->
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
<div id="time"></div>
<input type="hidden" value="" id="currentLatitude"/>
<input type="hidden" value="" id="currentLongitude"/>
<script type="text/javascript" src="cordova.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>-->
<script src="libs/leaflet/leaflet.js"></script>
<!--<script type="text/javascript" src="js/core.js"></script>-->
<script src="libs/leaflet/angular-leaflet-directive.min.js"></script>
<!--<script src="libs/leaflet/leaflet-routing-machine.min.js"></script>-->
<!-- cordova script (this will be a 404 during development) -->
<!-- your app's script -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAEWnOhu5ePxhmZ1Cx7ZgcamoRvN88mw2Y&sensor=true"></script>
<script type="text/javascript" src="js/samplePlugin.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', function()
{
alert("HI1")
window.plugins.SamplePlugin.getTime
(
function(result)
{
alert("HI2")
displayTime(result)
},
function(error)
{
console.log(error)
}
);
}, true
);
function displayTime(result)
{
document.getElementById("time").innerHTML = result.time;
}
</script>
</body>
</html>
and
samplePlugin.js
var SamplePlugin = function()
{
};
SamplePlugin.prototype.getTime = function(successCallback, failureCallback)
{
return cordova.exec(
successCallback, //Function called upon success
failureCallback, //Function called upon error
'ExamplePlugin', //Tell PhoneGap to run "ExamplePlugin" Plugin
'getTime', //Tell the which action we want to perform, matches an "action" string
[]); //A list of args passed to the plugin, in this case empty
};
cordova.addConstructor(function()
{
cordova.addPlugin("SamplePlugin", new SamplePlugin());
});
ihave followed this tutorial
http://www.speakingcode.com/2012/05/29/call-native-android-java-code-from-html5javascript-using-phonegap-plugins-and-implement-async-callbacks/
I use Cordova.jar 2.9.0.
Here is the code:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#BtnNavigation").click(function () {
alert("dfgdfgh");
window.location.assign("guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World");
});
});
</script>
</head>
<body>
"http://example.com"
<button id="BtnNavigation" name="Map" style="padding: 50px 100px;">Map</button>
</body>
</html>
Button click shows error:
The Protocol Not Supported(guidance-drive://v2.0/navigate/destination/?latlon='25.245789','75.254789'&title=Hello World)
some text to get rid of "it looks like your post is mostly code; please add some more details"
The Url Scheme used with Windows Phone 8 devices is not implemented with Nokia X devices, and thus you can not use it with Nokia X devices. Also as far as I know, there is no public offering for HERE Drive usage implemented with Nokia X, thus I could not even suggest any alternative API to use.
I have created a application using Phonegap 2.9.0 .The Build which is running all the android phone version less than 4.0. When i instal in Android 4+ devices it shows blank screen.The same build works fine with ios all versions.Here the index.html
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title></title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
</head>
<body>
</body>
Here the explore snap
What change requires to run in android 4.0+ devices.Pelase help me to solve this issue
Try this
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title></title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
</head>
<body>
</body>
I'm using Modernizr to detect non-capable SVG browsers and loading an additional stylesheet for those that don't support it. The images are set by background-urls in css.
The images don't show in my android browser at first but when I refresh the page they load. I made certain the cache was cleared before doing so. I'm also using Jquery Mobile but not using any of its styles.
Here is my header:
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>My Website</title>
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="viewport" content="width=device-width, target-densityDpi=160, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="<?php bloginfo('template_url'); ?>/css/reset.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<script type="text/javascript" src="http://use.typekit.com/abv4xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mobile.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/modernizer.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.svg,
nope: '<?php bloginfo("template_url"); ?>/css/nono-svg.css'
});
</script>
<?php wp_head(); ?>
</head>
I found the solution. I had to move my js scripts into the load command of modernizr.
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>My Website</title>
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="viewport" content="width=device-width, target-densityDpi=160, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="<?php bloginfo('template_url'); ?>/css/reset.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<script type="text/javascript" src="http://use.typekit.com/abv4xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/modernizer.js"></script>
<script type="text/javascript">
Modernizr.load({
load: ['https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
'<?php bloginfo("template_url"); ?>/js/mobile.js',
'http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js'
],
test: Modernizr.svg,
nope: '<?php bloginfo("template_url"); ?>/css/nono-svg.css'
});
</script>
<?php wp_head(); ?>
</head>