Import javascript into html on play 2.0 framework - javascript

I'm having problems including local javascript files into my html that is on the play framework. The paths are correct and I even tried including the javascript file in the same directory. However, imports from the web (the main libraries i'm using) work just fine.
#(execId: String)
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript" src = "../../public/javascripts/profilesJS/stack.js"> </script>
</head>
<body>
<input id="profiles" type="button" value="Profiles" />
<script type="text/javascript">
alert(tester());
</script>
</body>
</html>
the javascript file simply looks likes this
function tester(){
return "test";
}
And the error i get is:
tester is not defined
at the line with the alert

According to the assets documentation (and routing in general) you need to use the reverse routing in your template:
<script type="text/javascript" src='#routes.Assets.at("javascripts/profilesJS/stack.js")'></script>
it builds the correct src path to your /public/javascripts/profilesJS/stack.js file (by default routing config it will be /assets/javascripts/profilesJS/stack.js)

Related

How to implement script tag in html for remote javascript module in Vaadin 8?

I am trying to implement FriendlyCaptcha in a Vaadin 8 application. To do this, I need to integrate two script tags which load remote javascript modules.
<script type="module" src="https://unpkg.com/friendly-challenge#0.9.8/widget.module.min.js" async defer></script>
<script nomodule src="https://unpkg.com/friendly-challenge#0.9.8/widget.min.js" async defer></script>
I am unfamiliar with Vaadin, I have spent hours trying to implement this, but I am not making any progress.
I implemented it in a simple HTML file, where it works just fine:
<!DOCTYPE HTML>
<html>
<body>
<form METHOD="POST">
<input type="checkbox">
<div class="frc-captcha" data-sitekey="MY-SITE-KEY" data-callback="myCallback"></div>
<input type="submit" id="sub" disabled=true>
</form>
<script>
function myCallback(){
document.getElementById("sub").disabled = false;
}
</script>
<script type="module" src="https://unpkg.com/friendly-challenge#0.9.8/widget.module.min.js" async defer></script>
<script nomodule src="https://unpkg.com/friendly-challenge#0.9.8/widget.min.js" async defer></script>
</body>
</html>
This is an image of the above code with the sitekey included
I tried it like this, the div shows up, but the captcha isn't displayed:
captchaDiv = new Label(
"<div class=\"frc-captcha\" data-sitekey=\"MY_SITE_KEY\" data-callback=\"myCallback\"></div>" +
"<script type=\"module\" src=\"https://unpkg.com/friendly-challenge#0.9.8/widget.module.min.js\" async defer></script>\n" +
"<script nomodule src=\"https://unpkg.com/friendly-challenge#0.9.8/widget.min.js\" async defer></script>", ContentMode.HTML);
addComponent(captchaDiv);
setComponentAlignment(captchaDiv, Alignment.MIDDLE_CENTER);
How do I make sure the js modules are loaded on the client-side? In Vaadin 14 there is #JsModule, but this annotation doesn't exist in Vaadin 8 yet.
It should be as easy as using the url in the #JavaScript annotation in your Java class.
#JavaScrip("https://unpkg.com/friendly-challenge#0.9.8/widget.min.js")
public class MyCaptchaView implements View {
...
}
But, I recommend to download the js file instead and use it withing the project file as loading directly from cloud is always a risk.
See more in documentation: https://vaadin.com/docs/v8/framework/articles/IntegratingAJavaScriptLibraryAsAnExtension

Load external javascript file inside HTML file from android assets folder into WebView

I'm trying to load an external JavaScript file into an HTML file. Both are placed in the assets folder.
This is my htmlTest.html file:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="test.js"></script>
</head>
<body>
<script type="text/javascript">
func();
</script>
</body>
And this is my test.js file:
function func(){
$(document).ready(function () {
$('#EDIFICI').children().click(function () {
alert($(this).attr('id'));
});
});
}
Both files are located in the root of the assets folder.
I load htmlTest.html into my WebView like this:
wv.loadUrl("file:///android_asset/htmlTest.html");
If I put JavaScript code inline directly inside the HTML page it works, but it doesn't when I link an external JavaScript file.
1.on onCreate add getSettings().setJavaScriptEnabled(true)
2.change .js like this
<head>
<script type="text/javascript" src="test.js"></script>
</head>
This worked for me:
<head>
<script type="text/javascript" src="file:///android_asset/xxxxx.js"></script>
</head>
And xxxxx.js is in the assets folder.
In the code
WebView.enableSlowWholeDocumentDraw();
oWebView.clearCache(true);
oWebView.setPadding(0, 0, 0, 0);
oWebView.setInitialScale(1);
oWebView.getSettings().setUseWideViewPort(true);
oWebView.getSettings().setLoadWithOverviewMode(true);
oWebView.getSettings().setSupportZoom(true);
oWebView.getSettings().setBuiltInZoomControls(true);
oWebView.setScrollbarFadingEnabled(false);
oWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
oWebView.getSettings().setJavaScriptEnabled(true);
oWebView.setWebViewClient(new WebViewClient());
Try something like this
webView.evaluateJavascript(yourFileAsString)
Try to add your script as follow
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
And add test.js file to folder with html
There was an error in my javascript file. It works like I stated in my example. Sorry for wasting your time.

[react,ES6]I fail to access object in http script label in index.html , from my own JS page

This is the script in my index.html
<script type="text/javascript" src="http://api.map.baidu.com/api v=2.0&ak=eBGR7XzaPhB5UbYARl3E7ksdkMdgrCw7"></script>
and I try to access a object --"BMap" from the script in my JS page which look like this:
var map = new BMap.Map("allmap"); // 创建Map实例
then I get error:"error! BMap is not defined"
what should I do?
I am guessing that you wanted to use BMap that is provided by baidu api. I changed the src that is actually pointing to the script and it seems to work. Note that you probably want to change the https to http when you are developing locally, as it may not work otherwise. See working example below (I had to use https because stackoverflow uses it by default).
If you have any other js module that uses BMap, make sure that it is called after the baidu api script is declared. S
<html>
<head>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058"></script>
<script type="text/javascript" src="../path/test.js"></script>
<script type="text/javascript" src="../otherpath/someOtherjs.js"></script>
</head>
<body>
<script>
// You can use BMap here...
console.log(BMap);
</script>
</body>
</html>

how to add(link) my customized javascript code to any html/php page

i would like to add javascript to an html page. I don't want to have those scripts inline on the home page however, I would like them to be in an external javascript file. How do I link to an external javascript file so those scripts are run on the page?
<html>
<head> <title>asc Computer Grass Roots pvt. ltd.</title>
<script src="jquery.js"></script>
<script> my jquesry scrips here
</script>
</head>
<body> somecodes </body>
</html>
Instead of
<script>my jquesry scrips here</script>
put
<script src="myscript.js"></script>
Of course you will have to create a file named 'myscript.js' and type javascript code in it.
For example, let say that you have all your javascript code in a file called 'functions.js', to link that javascript file to your html page just do it the same way you linked you jquery file.
<html>
<head> <title>asc Computer Grass Roots pvt. ltd.</title>
<script src="jquery.js"></script>
<script src="functions.js"></script> <!-- linking your file -->
<script>
/*my jquery scripts here */
</script>
</head>
<body> somecodes </body>
</html>
Keep in mind that if the code in your 'functions.js' file needs jQuery to work correctly you have to add 'jquery.js' before adding your custom file, just as it is in the example.
In the map of your website create a file called script.js
put your jquery script in there
replace:
<script>my jquery scrips here</script>
with:
<script src="script.js"></script>
just like you did with the jquery.js, next time search the web before asking questions on SO.
Example
if you google "link javascript file" the first link is your answer to the question (link above is the website).

Simple comet application "org is not defined"

I am trying to update an old cometd javascript wrapper and test client (was 1.3.x) that I have to the newer comet 2.5.1 javascript implementation. I have all of the dependencies and the browser can find them all, yet I am getting errors in Firebug's console (see below)
The head of my HTML is as below:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
All of these are found by the browser. Looking at Cometd.js I see the following:
org.cometd.Cometd = function(name)
{
....
}
So is that not defining org? Note that none of the errors in the Console are from Cometd.js. Otherwise I see no other definition of "org.cometd". I would really appreciate it if anyone can help me out. I am using Tomcat 7 and below is the dir structure:
Thanks.
UPDATE - Further testing
I reduced the header to:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
</head>
And removed ALL JS from the index.html. The only JS now included is the Cometd.js from the comet.org. There is still the same error... coming from the very first line in that script:
org.cometd.Cometd = function(name)
Not sure what I have missed here.
EDIT - Add jquery.cometd-reload.js
This is the contents of the file. It looks like it is "re-binding" functionality from the cometd library to use the jquery one instead (?). I'm not up to speed enough in JS to debug this (I'm a C++ dev really).
(function($)
{
function bind(org_cometd, cookie, ReloadExtension, cometd)
{
// Remap cometd COOKIE functions to jquery cookie functions
// Avoid to set to undefined if the jquery cookie plugin is not present
if (cookie)
{
org_cometd.COOKIE.set = cookie;
org_cometd.COOKIE.get = cookie;
}
var result = new ReloadExtension();
cometd.registerExtension('reload', result);
return result;
}
if (typeof define === 'function' && define.amd)
{
define(['org/cometd', 'jquery.cookie', 'org/cometd/ReloadExtension', 'jquery.cometd'], bind);
}
else
{
bind(org.cometd, $.cookie, org.cometd.ReloadExtension, $.cometd);
}
})(jQuery);
So the problem was that I misunderstood the project layout from the Comet.org site. I should have followed the direction posted at cometd primer for non-maven setups a lot more closely. Basically when you are setting up the project you download the distribution, and then you need to take the code from the war files bundled inside the tarball.
SO, once you have extracted the tarball...
Take the org folder from cometd-javascript-common-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\jquery\target) or cometd-javascript-jquery-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\common\target)
Take the jquery folder from cometd-javascript-jquery-2.5.1.war
The org namespace definition was in the file org/cometd.js which I did not have before, as I wrongly assumed that it had been replace by the org/cometd/Cometd.js file. The namespaces org and comet are defined as below starting on line 17 of that file:
// Namespaces for the cometd implementation
this.org = this.org || {};
org.cometd = {};
org.cometd.JSON = {};
The functions are working correctly now.
Try loading jQuery before any of the other JavaScript files -
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script> <!-- load first -->
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>

Categories