Develop Reference

How to include external JS file in JSP file in Spring WebMVC framework?

I have tried below answer but it didn't work..
How include an external JS file in a JSP page
I have been searching on google but couldn't find anything useful...my JS file is at same level as that of WEB-INF..any help would be appreciated...
Below is the code that I'm using to include my JS file in JSP :-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/formValidation.js"></script>
below code is in web.xml :-
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/dispatcher-servlet.xml</param-value>
</context-param>
Below code is in dispatcher-servlet.xml file :-
<context:component-scan base-package="com.programcreek.helloworld.controller" />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>

You might want to add ResourceHandler to resolve your static resources like js/css directory
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/js/**")
.addResourceLocations("/js/")
.setCachePeriod(3600)
.resourceChain(true)
.addResolver(new PathResourceResolver());
}
This method apply for java configuration class extends WebMvcConfigurerAdapter
The xml version should look like this
<mvc:resources mapping="/js/**" location="/js/"/>
This will resolve any .js file under /webapp/js/ directory, using something like below in .jsp file
<script src="js/custom.js"></script>

for help you can see this github link click here
I hope it will help you
and this is the project structure

Using standard HTML Elements in KotlinJS safely typed

I'm trying to dynamically create an image which I will then append to the DOM.
import org.w3c.dom.HTMLImageElement
fun main(args: Array<String>) {
// load footer banner image
val img: HTMLImageElement = HTMLImageElement()
with (img){
src = "img/footer.png"
classList.add("img-responsive")
}
}
However, it doesn't like my constructor HTMLImageElement() since HTMLImageElement is an interface.
Removing the constructor and Kotlin complains that img must be initialised.
What is the correct way to make use of the HTMLImageElement in a type-safe way ?
Update: I'm now using maven which generates everything as it should.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.blah</groupId>
<artifactId>blah</artifactId>
<packaging>jar</packaging>
<version>1.0.0</version>
<name>Blah</name>
<properties>
<kotlin.version>1.0.2</kotlin.version>
<kotlin.html.version>0.5.8</kotlin.html.version>
</properties>
<repositories>
<repository>
<id>bintray-kotlinx</id>
<name>bintray</name>
<url>http://dl.bintray.com/kotlinx/kotlinx</url>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>org.jetbrains.kotlinx</groupId>
<artifactId>kotlinx.html.js</artifactId>
<version>${kotlin.html.version}</version>
</dependency>
</dependencies>
</project>
which compiles a blah.js, blah.js.map, blah.js.meta, kotlin.js, kotlinx.html.js, kotlinx.html.meta.js, kotlinx.html.shared.js, kotlinx.html.shared.meta.js and stdlib.meta.js.
In my html file (which is sitting in my root directory) I'm including the following:
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="target/classes/kotlin.js"></script>
<script type="text/javascript" src="target/classes/kotlinx.html.shared.js"></script>
<script type="text/javascript" src="target/classes/blah.js"></script>
I've got a println("hello world") in my Main.kt which executes fine in the browser printing "hello world" in the browswer console.
Now I still want to append that image dynamically using Kotlin ...
The docs say I should be doing document.create.div("panel") to create a div, but document.create... autocompletes to createAttribute, createComment etc, no create() method in sight anywhere. (document is from package 'kotlin.browser').
I'm not exactly sure how to use kotlinx.html since what I'm seeing in IntelliJ doesn't match the docs.
How do I append a dynamically created image to an existing div using KotlinJS ?

I just write sample project with kotlin2js and kotlinx.html IRus/kotlin-kotlinx.html. Looks like current version of kotlinx.html (0.5.8) not compatible with Kotlin 1.0.2, but works well with kotlin 1.0.1-2.

Custom Cordova plugin iOS index.js dosent recognise my .js file

I have written a custom Cordova plugin that brings have as a dependency "Media" plugin.
When i run "cordova plugin add "myPlugin"" the plugin is installed to the sample project however when in my index.js i try to init my plugin it does not recognise it and if i try to create "Media" object it does.
Here is my plugin .xml file :
<?xml version="1.0" encoding="utf-8"?>
<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
id="cordova-plugin-MyPlugin"
version="1.0.0">
<name> MyPlugin </name>
<description>Cordova MyPlugin Plugin</description>
<author> MyPlugin </author>
<license>MIT</license>
<keywords> MyPlugin </keywords>
<dependency id="org.apache.cordova.media"/>
<js-module src="www/MyPlugin.js" name="MyPlugin">
<clobbers target="window.plugins.MyPlugin" />
</js-module>
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="MyPlugin">
<param name="ios-package" value="CDVMyPlugin" />
</feature>
</config-file>
<!-- Sources -->
<header-file src="src/ios/CDVMyPlugin.h"/>
<source-file src="src/ios/CDVMyPlugin.m"/>
<!-- iOS Frameworks -->
<framework src="libz.dylib" />
</platform>
</plugin>
Thanks for the help.

The problem apparently was in my "MyPlugin.js" file at the bottom of the file the line :
module.exports = MyPlugin;
Needs to be added then in the Index.js file (or the file of your choosing) add the following :
//Get a reference to the custom .JS file.
myCustomPlugin = cordova.require("cordova-plugin-MyPlugin.MyPlugin");
myPluginInstance = new myCustomPlugin(someParams,onSuccess,onError,null);
Now you can access the methods of your .JS file.
Credit to https://stackexchange.com/users/366553/marat-strelets for helping with the solution.

How to include js files in the view. ASP.NET MVC 4

I wonder why my js file work when I call it in the view:
#section Scripts {
<script>
function myFunction() {
alert("Hello1");
}
</script>
}
but does not work when I call it:
#section Scripts {
<script type="text/javascript" src="~/Views/Home/script.js"></script>
<script>
myFunction();
</script>
}

It's because .js files are not accessible in the ~/Views/ folder. You have to enable it.
To enable access to .js files in the Views folder, you can add the following to your Views' folder's web.config directly under the handlers tag:
<add name="JavaScriptHandler"
path="*.js"
verb="*"
preCondition="integratedMode"
type="System.Web.StaticFileHandler" />
Alternatively put your script into the ~/Scripts/ folder and reference it like such:
#Scripts.Render("~/Scripts/script.js")

Its better practice to place your Js file in Script folder and access it from there. You could write this code in view's head to use the js file
#Scripts.Render("~/Scripts/script.js")

you have to add your script in the Bundle config :
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js", "~/Views/Home/script.js"));
this worked for me

You should Add rendersection to your Layout Page which your view using.
#RenderSection("scripts", required: false)

Echo file name during ant process

I am currently using YUI compressor during an ant build process to minify CSS and JavaScript files. Whilst is it minifying each file, I would like it to output the name of the file it is currently trying to apply the executable to so that if an error occurs, I know which file has cause the error. For instance:
[echo] Minifying JS files...
[echo] Trying to minify file1.js...
[echo] Trying to minify file2.js....
Every solution I have seen seems to just echo all of the filename within the fileset after the the apply instruction has been applied to all of the files.
My ant build currently looks like this:
<target name="minifyJS" depends="overwriteCSSWithMinified">
<echo message="minifying js files and saving them to fileName-min.js" />
<apply executable="java" parallel="false" dest="${toWebHome}">
<fileset dir="${toWebHome}">
<exclude name="**/*.min.js" />
<include name="**/*.js"/>
</fileset>
<arg line="-jar"/>
<arg path="yuicompressor-2.4.7.jar" />
<arg line="-v"/>
<srcfile/>
<arg line="-o"/>
<mapper type="glob" from="*.js" to="*-min.js"/>
<targetfile/>
</apply>
</target>
Maybe there is another way of doing this so rather than using a fileset, use an instruction that loops through every file one at a time and performs the apply on the file?

For this you will need to include ant-contrib. Then you can do this:
<target name="minifyJS" depends="overwriteCSSWithMinified">
<echo message="minifying js files and saving them to fileName-min.js" />
<foreach target="yui" param="jsFile">
<fileset dir="${toWebHome}">
<exclude name="**/*.min.js" />
<!-- should this be -min.js instead of .min.js ? -->
<include name="**/*.js"/>
</fileset>
</foreach>
</target>
<target name="yui">
<echo message="${jsFile}"/>
<exec executable="java">
<arg value="-jar"/>
<arg value="yuicompressor-2.4.7.jar"/>
<arg value="-v"/>
<arg value="-o"/>
<arg value="'.js$:-min.js'"/>
<arg value="${jsFile}" />
</exec>
</target>