I have a phone gap application with jquery mobile and I can get external links to work and single page navigation working but I cannot open another file in my application. All the files are located in the www folder. The error message is "Failed to load webpage with error: The requested URL was not found on this server. If i comment out the jquery-1.6.4.min.js file it will work but that's not a good solution. I've tried rel="external" and several other things I've seen by googling but nothing seems to work
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="include/jquery.mobile-1.0.min.css" />
<script src="include/jquery-1.6.4.min.js"></script>
<script src="include/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
//do something
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="manage">
<div data-role="content" id="inputs">
About
</div>
</div>
</body>
</html>
Make sure that you update your PhoneGap manifest. Look for PhoneGap.plist, open it and look for ExternalHosts. You need to add the urls one by one, or you can simply add "*". This will allow the use of all urls within the application. PhoneGap blocks all urls by default.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avacados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ar.marketscale.com/test/test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a style="display:none" id="ar-link" href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only&link=https://www.google.com&sourceid=chrome&ie=UTF-8&title=Acocados#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avovados</a>
<footer>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
$(document).ready(function(){
setTimeout(function(){
// $('#ar-link').trigger('click');
$('#ar-link').click(function() {
this.click();
}).click();
},1000);
});
} else {
window.location.href = "https://ar.marketscale.com/test/testfallback.css"
}
</script>
</footer>
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am using Scene Viewer and triggering the explicit intent from HTML. It's running in ar_only. The goal is when you visit this website it launches AR automatically. I have a URL and I have a QR code that points to that URL.
When you scan the QR code it starts AR no problem. When you type in the URL it sends you to the fallback website. I know the phone is compatible because it works when you scan the QR code. I have also tried this on other phones and it gives me the same results.
I think Javascript is the issue. I'm using it to "click" or run this automatically. Any ideas on what could be going on?
the link is ar.marketscale.com/test/ar_avacado.html
here is a QR code that links to that URL:
QR CODE
i downloaded the nicedit with mathtype js plugin files
but i cannot setup the editor
i get the window.opener is null error
second thing i cannot find the com.wiris.jsEditor class in any js files
<i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="area"></textarea>
<div id="editorContainer">
</div>
<script src="../js/nicEdit.js"></script>
<script>
_wrs_currentPath = "/var/www/html/nicedit/"
nicedit_wiris_path = "nicedit_wiris"
</script>
<script src="../nicedit_wiris/core/WIRISplugins.js?viewer_image"></script>
<script src="../nicedit_wiris/nicedit_wiris.js"></script>
<script src="../nicedit_wiris/core/core.js"></script>
<script src="../nicedit_wiris/core/display.js"></script>
<script src="../nicedit_wiris/core/displaymathml.js"></script>
<script src="../nicedit_wiris/core/cas.js"></script>
<script src="../nicedit_wiris/core/editor.js"></script>
<script>
bkLib.onDomLoaded(function () {
nicEditors.allTextAreas()
// editor = new com.wiris.jsEditor.JsEditor('editor', null);
});
</script>
</body>
</html></i>
unfortunately, we do not give support to NicEdit anymore. The version of the MathType plugin that you have is 5 years old and does not work for the current version of NicEditor.
On the other hand, we do have MathType plugins implementations for the main HTML editors like TinyMCE, CKEditor or Froala.
In case you really need to use NicEdit, you could build your own implementation upon our Generic integration. In that case, we will give some assistance. Please, find some documentation below.
https://www.npmjs.com/package/#wiris/mathtype-generic
Best!
Please find 2 set of code blocks below and let me know which one is to follow and why?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set 1</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/customStyle.css" />
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"></div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed"></div>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</body>
</html>
and set 2 is....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set 1</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/customStyle.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
(ie) which one is right, putting all the scripts at the top or at bottom?
Both of them are correct, only difference is how are you going to bind events.
In the first case, because HTML is already loaded into the DOM events can be bound directly like this:
$('#buttonID').on('click', function(){
});
Because button is already into the DOM, click event can be bound directly to it.
In the second case, because jQuery Mobile is loaded before page content all event binding must be done like delegation:
$(document).on('click', '#buttonID',function(){
});
This is a safer but slower solution. It don't require for object to exist to bind an event to it.
To make a story short, solution 1 is slightly faster.
First case to improve performance .... this is said to be general practise to keep javascript down the page ...so that content is loaded faster .... though no facts or analysis personally I have on same. Check this nice post sameelegantcode.com/2010/03/30/your-javascript-goes-where/
It will good to place all javascript at the bottom of the page. Never forget that page rendering can be delayed by javascript parsing/execution. Well, I believe you love to read http://developer.yahoo.com/performance/rules.html#js_bottom
so basically I've been making a jQuery Mobile site, I've hit a lot of speed bumps but as soon as I start making progress, this happens!
The culprit: http://www.ehustudent.co.uk/cis21318140/cis3104/cw2/find-your-nearest-jospice.html
Whenever you click on a link, it just keeps spinning forever. It started happening when I actually got the map to work! The map was inline, so I put it in its own file and it's still happening.
IT STOPS HAPPENING WHEN I REMOVE THIS LINE OF CODE
<script src="map-kensington.js"></script>
Please help me :(. I need to put that line of code in the body or the map won't load, but when I do put it in there the page won't load!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Find Your Nearest Jospice | Jospice Charity Shops</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=yes">
<!-- Start of jQuery External Links -->
<link rel="stylesheet" href="CSS/jospice2.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<!-- End of jQuery External Links -->
<link rel="stylesheet" href="CSS/custom.css" />
</head>
<body>
<div data-role="page" id="homePage" data-theme="b">
<div data-role="header" data-theme="b">
Menu
<h1>Jospice</h1>
Contact
</div>
<div data-role="content" data-theme="b">
<h2>Find Your Nearest...</h2>
<p>Use the list below to find your Jospice Store of choice! Click on the button to be provided with information and directions to the store.</p>
Furniture Store (Kensington)
Allerton
Crosby
Kensington
Maghull
Netherton
Old Swan
Southport
Walton Vale
</div>
</body>
</html>
It's the same for every page, 7 hours left to finish the site, please help :(
Your script is failing with a 'google is not defined' error.
You need to add google script references to the individual map pages
Something like this:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
I'm struggling to integrate Cordova(=Phonegap) with Ember.js, and jQuery Mobile. Ember.js + jQuery Mobile works fine, as loading index.html in any desktop browser successfully loads the app.
Using xCode 4 and the iPhone 5.1 simulator, it doesn't show any content within handlebar tags. Which means Ember.js fails to load.
index.html:
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
</head>
<body>
<script type="text/x-handlebars" data-template-name="main">
this text is NOT displayed
</script>
<div> this text IS displayed </div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/jquery.mobile.js"></script>
<script src="js/vendor/ember.js"></script>
<script src="js/app/app.js"></script>
<script src="js/vendor/cordova-1.5.0.js"></script>
<script type="text/javascript">
// If you want to prevent dragging, uncomment this section
function preventBehavior(e){
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
document.addEventListener("deviceready", onDeviceReady, false);
/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady(){
// do your thing!
}
</script>
</body>
</html>
Found the problem. XCode was reporting:
ERROR whitelist rejection: url='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css'
Following this, I added *.jquery.com to the ExternalHosts array, within Cordova.plist.