What does "Unable to inject Capacitor" mean and how can I fix it? - capacitor

I tried migrating a Cordova test app to Capacitor according to 1 and encountered the following error in logcat on Android:
E/Capacitor( 3537): Unable to inject Capacitor, Plugins won't work
and the deviceready event seems to be missing.
Here is www/index.html:
<html>
<body>
<h1>demo-app</h1>
<div id="status"/>
<script src="cordova.js"></script>
<script src="app.js"></script>
</body>
</html>
Here is www/app.js:
document
.getElementById('status')
.appendChild(document.createElement('b'))
.appendChild(document.createTextNode('status:'))
document.addEventListener('deviceready', function () {
document
.getElementById('status')
.appendChild(document.createElement('i'))
.appendChild(document.createTextNode('ready'))
})
FYI the Cordova test app was generated by generate-cordova-package and modified to remove the extremely simple HEADER and CSS.
[1] https://capacitor.ionicframework.com/docs/cordova/migrating-from-cordova-to-capacitor/

After a bit of research, I discovered the following gem from this comment on ionic-team/capacitor issue 1572:
Capacitor injects itself into html files searching for the head tag
So just inserting <head></head> into the HTML resolves this issue and causes the Cordova-compatible deviceready event to be sent.
I really hope to see this documented in 1 and 2 the near future.
[1] https://capacitor.ionicframework.com/docs/cordova/migrating-from-cordova-to-capacitor/
[2] https://capacitor.ionicframework.com/docs/getting-started/
P.S. This subject is also discussed here: https://forum.ionicframework.com/t/unable-to-inject-capacitor/178713
I raised this PR to get this documented: https://github.com/ionic-team/capacitor/pull/3024

Related

JavaScript error on click in DataGrid table after update to Wicket 9

I have updated my application from Wicket 8.8.0 to 9.2.0 Unfortunately the links in a table do not work anymore after that. As table I use the DataGrid from wicketstuff-inmethod-grid.
The JavaScript error when clicking on a table row is:
"An error occurred while executing Ajax request: TypeError:
InMethod.XTable is undefined"
Another JavaScript error when refreshing the page:
Uncaught TypeError: InMethod.XTableManager is undefined
What could be the reason?
Content Security Policy is disabled (getCspSettings().blocking().disabled()), because otherwise my css files were not found.
I use not by wicket managed
bootstrap.css (Bootstrap v4.0.0-alpha.5)
mdb.css (Material Design for Bootstrap 4)
Also not managed JavaScript:
bootstrap.js (Bootstrap v4.0.0-alpha.5)
bootstrap-confirmation.js (Bootstrap: tooltip.js v3.3.7)
mdb.js (Material Design for Bootstrap 4)
I use Java 11 and among others the following dependencies:
"org.wicketstuff:wicketstuff-inmethod-grid:9.2.0"
"org.apache.wicket:wicket-auth-roles:9.2.0"
"org.apache.wicket:wicket-extensions:9.2.0"
"org.apache.wicket:wicket-native-websocket-javax:9.2.0"
"org.apache.wicket:wicket-spring:9.2.0"
The relevant part of <head> of generated HTML:
<head>
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-3.5.1-ver-1606382888000.js"></script>
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1606382888000.js"></script>
<script type="text/javascript" src="./wicket/resource/js.RemoteControlDummyHookClass/remotecontrol-ver-1602070208000.js"></script>
</head>
Network Tab:

window.tableau is undefined in IE Edge

When embedding Tableau visuals into a page, we include Tableau JavaScript API. We tried different ways based on some of the support threads:
<script src="https://xxx.xxx/javascripts/api/tableau-2.0.0.min.js"></script>
<script src="https://xxx.xxx/javascripts/api/tableau-2.min.js"></script>
<script src="https://xxx.xxx/ie-sp-embed-javascripts/api/tableau-2.0.0.min.js"></script>
Every other browser, including IE11, is able to load the script and window.tableau is defined and used to create a visual on the page. The Edge browser fetches the script, as can be seen in the Network tab of the developer tools, but window.tableau stays undefined.
Tableau Server Version: 10.5.23 (10500.20.0117.2214) 64-bit Windows
Looking for suggestions.
EDIT: the problem seems to stem from a security policy. Edge wouldn't load the script from inside of our VPN. However, everything works fine using Edge on outside computers.
I tried to refer to the sample example for Tableau JavaScript API from its official website.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Basic Embed</title>
<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
function initViz() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
options = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
var viz = new tableau.Viz(containerDiv, url, options);
// Create a viz object and embed it in the container div.
}
</script>
</head>
<body onload="initViz();">
<div id="vizContainer" style="width:800px; height:700px;"></div>
</body>
</html>
Output in MS Edge legacy browser (Microsoft Edge 44.18362.449.0):
Output in MS Edge Chromium browser (Microsoft Edge Version 83.0.478.13 (Official build) beta (64-bit)):
You can see that code is working fine and it is creating the visualization on the page.
I suggest you can try to run this example on your side and let us know about the results.
If the issue persists then please try to inform us which exact version of the MS Edge browser you are using for making this test? Please provide your sample code to reproduce the issue on our end. It can help us to understand the issue properly. We will try to check it and try to provide you further suggestions.

v5.6.1 publish instance redirecting for certain files

I started up a clean AEM 5.6.1 publish instance and am trying to change the default admin password. I went to http://localhost:4503/libs/granite/security/content/useradmin.html, but the page does not load correctly. I'm able to tell that some files load correctly (jquery.js, utils.js), but other files (userpicker.css, userpicker.js) respond with a JavaScript redirect:
<html>
<head>
<script type="text/javascript">var u="/content/geometrixx/en/toolbar/account/login.html?resource=%2Flibs%2Fgranite%2Fui%2Fcomponents%2Ffoundation%2Fform%2Fuserpicker%2Fclientlibs%2Fuserpicker.css&$$login$$=%24%24login%24%24"; if ( window.location.hash) {u = u + window.location.hash;} document.location = u;</script>
</head>
<body>
<!-- QUICKSTART_HOMEPAGE - (string used for readyness detection, do not remove) -->
</body>
</html>
What's interesting is that although I can't access userpicker.css, I am able to navigate to userpicker/userpicker.css without any problems.
Can someone explain what's happening here, and what I need to do to correct this behavior?

SailsJS load assets from local server when environment=DEV and load assets from CDN when environment=PROD

Hi I have a web app and when I'm working on my computer and on dev mode in a rural area I need to be able to use the assets form a local folder. But when I deply my code to the PROD server I need to able to switch the assets to be loaded from a CDN.
Is this possible in anyway with the help of sails.environment global ??
for example
<% if(sails.environment == 'PROD') { %>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-cookies.min.js"></script>
<% } else { %>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/angular.min.js"></script>
<script src="/js/angular-resource.min.js"></script>
<script src="/js/angular-cookies.min.js"></script>
<% } %>
Thank you.
Those tags are inserted by Grunt.
I think you can modify tasks/config/sails-linker.js to achieve what you want :
there is a section devJS and prodJs i think you should modify them according to your requirement.
Note that i don't know if it's the good practice in sails.
Edit few more things which could help :
sails lift --> Runs the default task (tasks/register/default.js).
sails lift --prod --> Runs the prod task (tasks/register/prod.js).
out from http://sailsjs.org/#/documentation/concepts/Assets/TaskAutomation.html
You can achieve what you were going for in your example using sails.config.environment or process.env.NODE_ENV, but a better solution might be to use the environment-specific config files to specify an asset path. For example, in config/development.js, you could have:
"assets_path": "/js"
and in config/production.js:
"assets_path": "//ajax.googleapis.com/ajax/libs/jquery/1.10.2"
Then in your view:
<script src="<%=sails.config.assets_path%>/jquery.min.js"></script>

Google Visualization library not loading - syntax error

I am trying to build a dashboard of charts as a Google UiApp and am having problems loading the necessary library. I am getting a syntext error on line 8, which is the "google.load('visualization', ..." line. I am literally copying and pasting the example from the tutorial and that line keeps coming up as an error. Any ideas? I'm pretty new to this, just trying to scrape together a demo by following the directions here: https://google-developers.appspot.com/chart/interactive/docs/basic_load_libs
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API library and the piechart library.
google.load('visualization', '1.0', {'packages':['corechart', 'piechart']});
google.setOnLoadCallback(drawChart);
// insert charts here
</script>
This is how I use it, which works for me (example on: http://jsfiddle.net/UT2G7/):
google.load('visualization','1.0',{'packages':['corechart']});