I'm working on the migration of an application from Wicket 1.4 to Wicket 6. One page is not responding as it is supposed to and I suspect this is caused by a missing JavaScript file.
The file is present in a Java package. In the original application the file is added in a wizard step in the same package. For debug purposes (I'm not sure the missing file causes the problem) I moved to call to the application abstract page which is in another package.
The following call is added to an overwrite of renderHead. Which already contains files which are added correctly and contains super.renderHead.
response.render(
JavascriptHeaderItem.forReference(
new PackageResourceReference(ClassInSamePackage.class, "jsName.js")
)
);
The script-tag is present in the html-body instead of in the head.
I checked that the script is present at the location linked in the script-tag. But it seems impossible to render it in the html-head.
It turned out to be a combination of an used JavaScriptFilteredIntoFooterHeaderResponseand an error in the wicket output because wicket was in DEVELOPMENT mode instead of DEPLOYMENT mode. When wicket was in DEPLOYMENT mode the code was added to the footer correctly and it was also working correctly.
Related
Please read carefully before marking as dupe.
I want to read a javascript file on frontend. The javascript file is obviously being used as a script on the webpage. I want to read that javascript file as text, and verify if correct version of it is being loaded in the browser. From different chunks of text in the js file, I can identify what version is actually being used in the end user's browser. The js file is main.js which is generated by angular build.
I know we can do something like creating a global variable for version or some mature version management. But currently, on production site, that will mean a new release, which is couple of months from now. Only option I have right now is html/js page, which can be directly served from production site, without waiting for new release.
So my question is, is it possible we can read a javascript file as text in hmtl/js code in the browser.
an idea can be :
use fetch api to get a container that can be use to async load the script
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
use text() method which return a promise to get text content
fetch('http://localhost:8100/scripts.js').then((res) => res.text()).then(scriptContent => {
// scriptContent contain the content of your script
// if (scriptContent.includes('version : 1.1.1')
console.log(scriptContent);
});
this is absolutely not an efficient way, but since you want to work without any new version release or working with a version management system
here is the thing
assume file's checksum (md5 sha125 or anything) of V1.0 equals X and you will calculate before the coding part.
if checksum(X) != X{
location.reload()
}
would help for a security features too since it's an important project.
another way of controlling this situation is changing the main.js file's name if it is possible.
I'm taking over a flask project where the previous dev wrote quite a bit of their javascript/jquery in inline script tags in template files instead of separate js files in a static folder.
There's an issue with table cell highlight occuring after a long delay and I can't find the source in firefox/chrome debugger to step through the code. All the javascript I see is from the base template(can't see this either in chrome).
How do I view this injected template html and internal javascript in the debugger or is there another way to debug this without reworking the entire template and moving the javascript to another file?
I did not see in firefox debugger a javascript file that I placed in the static folder and referred from *.html file.After following this tutorial I saw that it is possible. I started commenting out parts from my application, hoping to find which part is causing this issue.In the end, I found out that my javascript file contained wrong syntax in one of the "if" conditions:
if foo() {
instead of
if (foo()) {
I have inherited an Angular 6 project that uses Google Charts. Specifically, it uses a package called ng2-google-charts. As far as I can tell, this is a package that tries to make Google Charts easy to use for Angular 2+. (Is this correct?)
When I load a page, I can see from the developer console that it retrieves files in this order:
https://www.gstatic.com/charts/loader.js
https://www.gstatic.com/charts/45.2/loader.js
https://www.gstatic.com/charts/45.2/js/jsapi_compiled_undefined_module.js
The last one is not found (404 error). When I look in the code in the first loader.js, it says this, which I assume retrieves the second file:
d=I.f.H.from("https://www.gstatic.com/charts/%{version}/loader.js")
When I look in the code in the second loader.js, it says this, which I assume retrieves the third file:
compiled:R.f.H.from("https://www.gstatic.com/charts/%{version}/js/jsapi_compiled_%{package}_module.js")
So I assume that %{package} is undefined for some reason, and it's put it into the URL for the third file, which then makes the URL invalid. Why is this happening? The charts seem to be working fine in the application, as far as I can tell.
question reworked for clarity and brevity
I am trying to install the [Slider Revolution][1] plugin on my Rails 4 application and I am having trouble with dynamically created relative paths in the jquery.themepunch.revolution.js file. The javascript snippet that I've placed on the page (as per the docs) sets a parent directory via this code:
jsFileLocation:"../../revolution/js/",
This directory tells the code in jquery.themepunch.revolution.js where to find the "extensions" folder.
But, if I use that bit of js on my page I get this error
Slider Revolution 5.0 Error !
Failure at Loading:revolution.extension.navigation.min.js on Path:extensions/
as the js is telling the browser to search HERE for the file:
http://localhost:5000/revolution/js/extensions/revolution.extension.actions.min.js
when in reality the actual location is something like:
http://localhost:5000/assets/javascripts/plugins/revolution/extensions/revolution.extension.actions.min.js
I've tried setting the js snippet to the following options:
jsFileLocation:"../../assets/",
jsFileLocation:"../../assets/javascripts/",
jsFileLocation:"/assets/",
jsFileLocation:"/assets/javascripts/plugins/revolution/",
jsFileLocation:"/assets/plugins/revolution/",
It still doesn't work.
Please try /assets/plugins/revolution/ as the js location. I am assuming you haven't tried it.
We have a product that is a widget people load onto their site, which consists of a single JS file that also needs angular to run, so angular is bundled into the JS file.
However, if a site already is using and loading angular themselves, when they load our widget they get an error which kills everything with the following:
WARNING: Tried to load angular more than once
Which makes complete sense since angular was indeed loaded more than once.
What we'd like to do is either of the following:
In our script, rename / namespace angular so it does't conflict with
the host sites already loaded angular, or
Detect if angular is
already loaded, and if so don't load angular ourselves.
To show examples of our code would be difficult since it's spread over about 20 files etc, however it's based off the following angular seed project which uses requirejs to load everything, then we're compiling to a single file: https://github.com/tnajdek/angular-requirejs-seed
Would really appreciate any feedback / tips / solutions
NB This is not a duplicate of any "check if angular loaded correctly" type questions, angular is packaged inside our widget js, the issue comes when angular is also already loaded by the parent page. We need a way to rename angular inside our package.
I'd advise taking a look at this answer, it has to do with a chrome extension running in the same circumstance. The idea here is to separate your loading of angular from the website's, and it assumes that your widget will be loaded after the main content of the page has been loaded.
If you are loading in html content with an ng-app directive or ng-controller, wrap your html content in a container with ng-non-bindable as an attribute.
Angular looks immediately for an element with the ng-app attribute when you load in angular.js. If two ng-apps are present i.e., on your site, and the widget, it will cause errors. Defer the parsing with: window.name = "NG_DEFER_BOOTSTRAP!" + window.name; Then load in your script.
Once your script has loaded, set window.name to '' or whatever it was before.
Individually bootstrap (the term for angular finding an ng-app attribute) your html content using:
var appRoot = document.querySelector('#id');
angular.bootstrap(appRoot, ['angularModuleName']);
And that should do it... Caveat, I have no idea how this would work if your widget Angular is on a different version than the client website, and I've only made it work with extensions, which are a little bit different because they live in their own isolated 'worlds'.
That being said, I feel like this should get people going in the right direction when dealing with this problem.