We have given a task as per below screen -
We had written code as -
<!DOCTYPE html>
<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" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>My First App</h1>
<div id="deviceready" class="blink">
<p class="event listening">connecting</p>
<p class="event received">connected once device is ready.</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
When we compiling it then getting error as -
[0;36mConnecting to localhost on port 9515...
[0m
⚠ [0;31mError connecting to localhost on port 9515.[0m
[1;31m_________________________________________________[0m
[1;31mTEST FAILURE:[0m [0;31m1[0m error during execution;
[0;31m0[0m tests failed, [0;32m0[0m passed [0;90m(412ms)[0m
[0;31m ✖ home.spec[0m
[0;31mAn error occurred while retrieving a new session: "session not
created: Chrome version must be between 71 and 75"[0m
[0;90mError: An error occurred while retrieving a new session:
"session not created: Chrome version must be between 71 and 75"[0m
[0;31m Error: An error occurred while retrieving a new session:
"session not created: Chrome version must be between 71 and 75"[0m
[0;90m [0m
[0;36m SKIPPED:[0m
should display Heading My First App.
should display connected once device is ready.
Please let us know expert advice what could be the reason for it.
Related
I am new to phonegap, but I am catching on Quickly. I have built a phonegap apk online, and ran it on my phone, but before my mainpage loads, I get a phonegap blank page with a nav bar saying "hello world", unfortunately look i found no answer online to help me out. please how can i remove this ?
<!DOCTYPE html>
<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" />
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/MBD/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/MBD/mdb.min.css">
<title>Papyfire v.1</title>
</head>
<body style="background-color: #ffffff; ">
<div class="row">
<div class="card col-sm-4 mr-2">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening gradient-purple">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/MBD/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/MBD/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/MBD/bootstrap.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/MBD/mdb.min.js"></script>
<script type="text/javascript">
app.initialize();
setTimeout(function(){
window.location="main.html";
}, 3000);
</script>
</body>
</html>
The phonegap config.xml file built with the app has the default start page as index.html change your main page name to index.html.
I want to display an icon before the list for which i had used like.
Not sure if the below is supported for Angular2.
The below module 'MaterialModule' is not required i guess, cause after removing it is working for me.
If i import this module, i get: no exported 'MaterialModule'!
app.module.ts //Not required to import here
import {MaterialModule} from '#angular/material';
imports: [
MaterialModule
...
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
test.component.html
<md-list-item routerLink="2" routerLinkActive="active">
<md-icon md-list-icon>face</md-icon> <!--Icon not displaying here!-->
<div fxFlex="10"></div>
<div *ngIf="sidenavWidth > 6" class="sidenav-item">
<a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}}</a>
</div>
</md-list-item>
my \src\index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Food4Smiles</title>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/static/hmicon.png">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
UPDATED ANSWER:
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
test.component.html
<md-list-item routerLink="2" routerLinkActive="active">
<md-icon md-list-icon>face</md-icon> <!--Icon not displaying here!-->
<div fxFlex="10"></div>
<div *ngIf="sidenavWidth > 6" class="sidenav-item">
<a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}}
</a>
</div>
</md-list-item>
\src\index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Food4Smiles</title>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/static/hmicon.png">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
First of all I have seen every single question stating the same issue on Stack and non of them applied to mine
I was building my First PhoneGap App and i want to use jQueryMobile libraries
anyways, the JQuery Styles is not working properly,
My Index.html
<!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, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
btn1
<p>I Am Now A Mobile Developer!!</p>
btn2
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"/>
<script type="text/javascript" src="./js/jquery-1.12.0.min.js"/>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"/>
<script type="text/javascript" src="js/index.js"/>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the results are
as you can see the button inline and corner all attributes worked fine but still that is not the expectedP
You didnt reference them properly
Remove the dot. I following the folder structure of where your css files are, your java script files should be here /js not ./js
So reference like this
[code]
[/code]
I have main html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
Then in Home.js:
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});
When I tap on login button, it gives error $.mobile is undefined on this line:
$.mobile.changePage($('#nextPage.html'));
Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.
Finally I solved this issue by:
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
and later in js:
jq.mobile.changePage("the.html");
instead of
$.mobile.changePage("the.html");
Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.
Additionally, move the reference to jQuery Mobile to the HEAD a as well.
Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console
Works...
I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).
You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).
I've got it working in all other browsers tested -- Mac Chrome & Firefox, but it fails in Safari. Here is the current source: http://eventchampion.heroku.com
<!DOCTYPE html>
<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>EventChampion</title>
<meta name="google-site-verification" content="4ZMUXRmgofgl5Z8oVXF6RbhGNrwJkieaDhmqZOeU_Mw" />
<link href="/assets/application-1c9609bc58b1e77c196de29021583379.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-55cd299d6f8fe22d8853de1220f2c546.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="j8Q8B/apM+we+Kv8NK5bdN216GVpw6zIMYWNWQmHRt0=" name="csrf-token" />
</head>
<body>
<p class='notice'></p>
<p class='alert'></p>
<div id='janrainEngageEmbed'><a class="rpxnow" href="https://EventChampion.rpxnow.com/openid/v2/signin?token_url=%23%3Fauthenticity_token%3Dj8Q8B%252FapM%252Bwe%252BKv8NK5bdN216GVpw6zIMYWNWQmHRt0%253D">Sign In</a></div>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.haml</p>
<script src="https://rpxnow.com/openid/v2/widget" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
RPXNOW.token_url = 'http://eventchampion.heroku.com/users/sign_in?authenticity_token=j8Q8B%2FapM%2Bwe%2BKv8NK5bdN216GVpw6zIMYWNWQmHRt0%3D';
RPXNOW.realm = 'EventChampion';
RPXNOW.overlay = true;
//]]>
</script>
</body>
</html>
I changed a config setting from app_name = "AppName" to app_name = "appname" solved