Grails plugin unable to load resources that is located within itself - javascript

I have a main Grails 2.3.2 project MainGrailsApp and I have a custom grails plug-in, MyGrailsPlugin, which is basically a module of the main project.
The plug-in has its own .gsps and its own .js files, while also referencing .css files, .gsp templates and image from the parent Grails project.
Let's say there is this PageController inside the plug-in that renders the view (which is also inside the plugin) MyGrailsPlugin/grails-app/views/page/index.gsp. Inside that index.gsp, it calls for global.css as stylesheet and _main.gsp as its template, which are both found on MainGrailsApp, while on the other hand uses a web-app/js/page.js file that is located within the plug-in.
Now, when I run-app the main project and go to the link localhost:8080/maingrailsapp/page, it shows the whole page, rendered using the specified .gsp template, loaded fully all the .css files, except for the page.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/maingrailsapp/page.js
Inside index.gsp I refer that resource using this line:
<script type="text/javascript" src="${resource(dir:'js',file:'page.js')}" />
Why can't it load its own .js file? Why can it fetch the resources that is from its parent application but unable to call its own resource? Should it, above anything else, able to locates the page.js file, after all that is its personal resource?

Grails resource tag has "plugin" attribute for specifying the name of the plugin where to look for the resource in. Check out grails docs for the resource tag.

Related

How to load a script for a specific route in angular 4

I have to load a script that calculates the analytics on a specific route in angular 4. But for other routes the script should not get loaded.
I tried adding the script in index.html but the script will be loaded for all the routes. Any workaround for this?
below is the script
(function(a,b,c,d,e,f){
a.hj=a.hj||function(){(a.hj.q=a.hj.q||[]).push(arguments)};
a._hjSettings={hjid:xx,hjsv:xxx};
e=b.getElementsByTagName('head')[0];
f=b.createElement('script');f.async=1;
f.src=t+a._hjSettings.hjid+d+a._hjSettings.hjsv;
e.appendChild(f);
})(window,document,'https://xx.xx.com/c/xx-','.js?sv=');
If you add it in index.html then the script will be loaded in all components, and this is not your need. So you can try loading the script from the ts file of the component in which you want to load the script. So in the ts file, you can do it as follow.
System.import('https://xx.xx.com/c/xx-','.js?sv='); //or below one
require('https://xx.xx.com/c/xx-','.js?sv=');
Reference: https://stackoverflow.com/a/41402204/10971575

How can I serve remote React app with a script tag?

We have at our company a react app (built with create-react-app) which is served today via an iframe, which works well.
A need has risen to serve the app (which is always embedded within other pages), with a script tag alone (no iframe tag).
I thought of something like:
<div id="app-placeholder"></div>
<script src="https://our-app.com/init.js"></script> // this will create a function called window.InitMyApp
<script>
InitMyApp('#app-placeholder', 'token', otherOptions)
</script>
I've tried to create init.js file in the react app's public folder. I can access the file.
From that file, how can I render the react app itself to the given selector (#app-placeholder)?
Because this file is served as-is, and doesn't get transpiled by webpack/babel, I cannot use import/jsx/require() and other stuff.
Am i on the right track?
Should I manually transpile this file?
Are there any other solutions to this rendering method?
You should try configuring the compiler with { output.library }. This should produce a compilation output that's ready for distribution, which means you can easily reference it in another document (and not need to worry about, say, transpiling/optimizing sources, because this was already performed by webpack).
Here's an example of a multi-part library produced by webpack. As you can see, the entrypoint exports are being assigned to window.

cordova window.location.href behaviour error

In my assets/www/index.html, I am trying to open html in the
/data/data/files/xyz/index.html with this javascript command:
window.location.href = cordova.file.dataDirectory + "xyz/index.html";
In the ../xyz/index.html it also included the cordova.js which exists on the same xyz directory:
<script type="text/javascript" src="cordova.js"></script>
The index.html can be loaded, but in the catlog show error like below
W/CordovaWebViewImpl﹕ Blocked (possibly sub-frame) navigation to
non-allowed URL: gap://ready
is there something wrong with my method? Is it wrong to use window.location.href to open another cordova application in the data folder ?
EDIT : I already found the root cause, that is my cordova.js in the /data/data/files/xyz/cordova.js is having different version with the one in asset folder. after i copied the same cordova js version, it can be loaded without error warning. Thanks.
You don't need to use "cordova.file.datadirectory". That's only if you use the file plugin for accessing data files, such as saving high-scores in a game or level data. You do not use the plugin for loading/unloading pages into the current webview.
You would want all of your HTML files to be in the same folder branch as your "index.html". Assume a directory structure like this:
/ index.html <!---- this is your current index.html
/ page2.html
/ js / index.js
/ xyz /index.html
All you would have to do is window.location='xyz/index.html'. However, I strongly encourage you to not replace entire pages if you're developing for iOS. It's almost a guarenteed way to get your app rejected. Try loading your pages in via AJAX using a framework like "Framework7".
NOTE: You can only view files within the webview, that are in the same folder or are children of, as your initial index.html.
EDIT: You want to load another Cordova webview application. I'd suggest still making it a child of the initial "index.html" folder. However, you might be able to write a plugin or customize the platform itself to access the other files. However, that's out of the scope of this question!

How can I add a .js file to an assembly in an ASP.NET project

I have an ASP.NET 4.5 WebForms project in VS 2013 and I need a function to clear the contents of all text boxes on a button click. I want to obviously do this client side so need javascript. I can't find this function in any of the preinstalled js files or jquery or bootstrap etc, so I need to create my own.
Fine. So I've created the js file with the function in it.
I added a reference in the _references.js file and I have added a script reference in my master page
However, when I run I get an error:
Assembly 'System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=xxxxxxxxxxxxx' does not contain a Web resource with name 'CustomerDetails.js'.
I don't have the option to add to an assembly in the properties of customerdetails.js (as this is a webforms project).
Can anyone tell me how to add to / create an assembly to reference this js file?!!
Muchos Gracias
If you want to add file to assembly, you should add it to resource file. But is it real need to embed script to the resource of assembly? Since your application uses asp.net you can just copy this script to specified folder and configure your script manager to handle it.

SpringMVC Resources Path Changes When using Href Tag

I have a Spring MVC application it uses jquery.webcam.js this file is located in a js folder in the resources directory on WAR -resources -js,css.. - WEB-INF. Thats the basic structure in the js directory there is a jquery.webcam.js.
When the form that uses jquery.webcam.js and other custom js files is fired its ok it finds all the js files. However on that form i click a button and i am then posted to another page, on this page i have a hyper link that has a url of "getData/${id}.htm". When i click on the hlink i am taken to the controller which has a mapping for this url:
#RequestMapping(value="getData/{id}.htm", method = RequestMethod.GET)
In the controller a select is preformed from the database and an object is returned to the previous page (first form - that uses the jquery.webcam.js). When i am returned to that page i am getting in firebug a 404 error for the jquery.webcam.js file.
Upon further inspection the url for the location of my resources has changed from http://localhost:8080/myApp/jquery.webcam.js to http://localhost:8080/myApp/getData/jquery.webcam.js
Why has getData now became part of the resources url and how can this be fixed?
Script files should be loaded like below..
If your js folder is under resource folder.
<script src="<%=request.getContextPath()%>/js/jquery.webcam.js"></script>

Categories

Resources