Phonegap / JQueryMobile App Build Loses Styling - javascript

Pulling my hair out!
Running a simple phonegap build, using JQueryMobile pages. The program runs through chrome/firefox etc. but on internet explorer is completely unstyled. IE brings up a warning: blocked content. If I click allow, it runs the javascript and picks up the styling.
Downloading my phonegap build onto an android tablet, and it too doesn't pick up the styling. It looks identical to IE before the blocked content. There has to be something in that surely?
I have tried downloading the JQuery CSS/js files and running them locally on the android but no luck. I have simplified back to one page below. Can anyone help?
Thanks
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="ims">
<div data-role="header">
<h1>Main</h1>
</div>
<div data-role="content">
Labs
Equipment
</div>
<div data-role="footer">
<center><p>Copyright</p></center>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
ims.initialize();
</script>
</body>

It seems that you missed some jquery files or css or might have incorrectly referenced in your HTML file.
If you have downloaded jquery mobile: js & css; check if it is referenced correctly within 'script' and 'link' tag.
Use document ready function at application start-up.
http://learn.jquery.com/using-jquery-core/document-ready/

Related

How do I eliminate load flicker loading <head> from file (preferably synchronously)?

Server side includes don't work here since it's not traditionally "served".
I'm trying to import the head content from a shared file to reduce shared code (I'm doing this with other shared elements across all pages just fine), but because it includes the styles, it's causing a flicker in the form of unstyled elements.
I'm using jQuery at present to load the content asynchronously (which isn't optimal, but I haven't found a synchronous solution that actually works), but I'm more than open to a vanilla JS solution so there's not the overhead of having to load jQuery first (to reduce the delay despite it being locally hosted).
Here is the existing code:
plan.html:
<head>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script>$(function(){ $("head").load("head.html") }); </script>
</head>
head.html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Styles/Fonts-->
<link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href="styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">
<link href="styles/marketing-plan-styles.css" rel="stylesheet" type="text/css">
<!--IE Compatibility - Modernizr-->
<script type="text/javascript" src="scripts/modernizr.js"></script>
<!-- Adding the favicon -->
<link rel="shortcut icon" type="image/png" href="images/js-logo-small.png"/>
<title>Sales and Marketing Planner</title>
Use document.write()
<head>
<script type="text/javascript">
document.write('<link href="/use/abs/path/here/styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">');
</script>
</head>
It fails to work with <base> element in some browsers, so better use absolute urls.
In Chrome it triggers a console warning referring to https://developers.google.com/web/updates/2016/08/removing-document-write even if there's no script insertion. This situation may change in the future.
EDIT: Oops, I haven't paid enough attention to your case. I'm afraid it's not possible without combining document.write and sync AJAX. Please don't do that.

ReactJS doesn't work with Material Design Lite

I'm developing a site with ReactJS and I'm using MDL.
Well my problem is basically the css of the framework is working perfectly but for some reason the js of the framework doesn't work. As for example the tabs
but I saw when I refresh the page the js of the framework works.
I cannot see any error in the console. Any idea how to fix it and why is happening it? probably I'm adding the dependencies of the framework in a wrong way.
below is the code of my index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Gonzalo Barba - personal website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Gonzalo Barba</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.grey-pink.min.css" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="root" class="mdl-layout mdl-js-layout mdl-layout--fixed-header"></div>
<script src="bundle.js"></script>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</body>
</html>

window.print() not working in iOS 9.2.1 when page is saved to home screen

I have a web app I've been using for a while without problems. With Apple's update to iOS 9.2.1, window.print() no longer works when the page runs as a web app saved to the home screen. If I run the page directly within safari, it works just fine. When I save it to the home screen then click the print button, the app hangs on the print dialog then will crash after a minute or so. Print preview also no longer works. At this point, I'm assuming it is a bug in iOS 9.2.1 but wanted to post my code here in case someone sees a problem or can offer a suggestion.
Here's the test HTML:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=0.6667, user-scalable=no" /> -->
<meta name="version" content="Version 3.0 Beta 3" />
<meta name="apple-mobile-web-app-capable" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="ADDRESS">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
</head>
<body>
<p>test page</p>
<form >
<input type="submit" value="Print" onClick="window.print();">
</form>
</body>
</html>
And here's the cache file:
CACHE MANIFEST
#version 3.1 Beta 3 7-20-2015
CACHE:
#internal HTML documents
index.html
NETWORK:
*

WebStorm built-in web server gets 404 for every css and js file included in index.html

Here is my index.html for posterity's sake:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<base href="/" />
<title>Cart</title>
<link href="content/external/bootstrap.css" rel="stylesheet" />
<link href="content/external/bootstrap-theme.css" rel="stylesheet" />
<link href="content/external/font-awesome.css" rel="stylesheet" />
<link href="content/external/angular-toastr.css" rel="stylesheet" />
</head>
<body ng-app>
{{3+4}}
drfg
<script src="scripts/external/jquery-1.9.1.js"></script>
<script src="scripts/external/bootstrap.js"></script>
<script src="scripts/external/angular.js"></script>
<script src="scripts/external/angular-ui-router.js"></script>
<script src="scripts/external/angular-resource.js"></script>
<script src="scripts/external/angular-mocks.js"></script>
<script src="scripts/external/angular-toastr.tpls.js"></script>
<script src="scripts/external/angular-animate.js"></script>
</body>
</html>
Whenever I hit run in webstorm to open in chrome, I get a 404 for every single javascript and css file. However, if I scope to the project directory and run node's http-server, my site loads just fine. I can't seem to find anything in settings related to this. Any ideas?
the problem is caused by tag in index.html:
<base href="/"/>
that tells the browser to resolve all URLs in the page relative to the web server root (localhost:63342 when using built-in webserver). Obviously no resources can be found there, as the built-in webserver serves files from http://localhost:63342/<project root>
So, you need to comment out '<base href="/"/>' to get your code working. Or, modify your hosts file to make webserver serve files from http://<some name>:63342 - see http://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559

push.js Uncaught TypeError: Cannot read property 'removeChild' of null

When I click a link on my page the URL updates and I see the correct page content flash momentarily, then the content of the previous page takes hold. This only appears to happen when I use the data-transition attribute. The same problem occurs both in Chrome emulate mode or using Xcode emulator.
In Chrome's console I get this Uncaught TypeError on line 373 of push.js
I stripped two pages down to basics to try to troubleshoot and am pasting one of them below. (the second page is the same only linking to one.html with diff text)
Any idea why the previous page contents reload? (as I said the URL updates -- a refresh displays correct content)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test one</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<!-- Include the compiled Ratchet JS -->
<script src="js/ratchet.js"></script>
<script src="js/push.js"></script>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">one</h1>
</header>
<div class="content">
go to two
</div>
</body>
</html>

Categories