GWT inject jQuery script after page load - gwt

I have html page with script file custom.js that is bootstrap for GWT
<!DOCTYPE html>
<html>
<head>
<!-- -->
<script type="text/javascript" src="login/login.nocache.js"></script>
<script type="text/javascript" src="common/js/custom.js"></script>
</head>
<div id="gwt-inject-place"/>
</html>
And that is ok, all works fine.
But in custom.js there is function that I need to fire after login/login.nocache.js inject some html in <div id="gwt-inject-place"/>. Normally custom.js is somehow run before injection take place.
So what should I do to inject JavaScript jquery file?
alert('global');
jQuery(document).ready(function ()
{
alert('inner');
}
This inject custom.js but only global alert shows.
public void onModuleLoad(){
RootPanel.get("gwt-inject-place").add(view);
ScriptInjector.fromUrl("../common/js/custom.js").inject();
}

From Google Docs :
<script src="js-url"/>
Automatically injects the external JavaScript file located at the location specified by src. See automatic resource inclusion for details.
So, You have to place the injection on module.gwt.xml
further Info: Link

Related

Configuring URL parameters in run configurations

My team is migrating to SAP BAS from SAP Web IDE. But when making run configurations I could not find how to configure something important to us: where to configure URL parameters like we could in the Web IDE.
I've consulted several pieces of SAP documentation such as this guide, but came away empty handed. The UI5 CLI also doesn't seem to offer anything interesting in this regard.
Does anyone know whether configuring URL parameters in run configurations is still possible, if necessary in the raw corresponding .env files?
Thank you in advance,
Joshua
I don`t know if you found yet how to do this but in any case, the solution that i found was to modify the Index.HTML file called and put a little piece of Script code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXTRATOCLIENTE</title>
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize" data-sap-ui-resourceroots='{"br.com.araguaia.EXTRATOCLIENTE": "./"}'
data-sap-ui-compatVersion="edge" data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true" data-sap-ui-frameOptions="trusted">
</script>
<script>
var oStartupParameters = jQuery.sap.getUriParameters().mParams;
var oComponent = sap.ui.getCore().createComponent({
name: "br.com.araguaia.EXTRATOCLIENTE",
settings: {
componentData: { startupParameters: oStartupParameters }
}
});
new sap.ui.core.ComponentContainer({
component: oComponent
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
After that you can put some parameter on the url like this :
index.html?Kunnr='123'&Kkber='ACRA'
Renan Pacheco
I also found a quick-and-dirty way to run with URL parameters. Run configurations are saved in the .vscode/launch.json file. In that file, there's an args array associated with each run configuration with a mention of the index.html file of your project. You can manually append your desired URL parameters to it.
There is a package.json which is created when you create any application.
It contains the script to start. You can add your URL parameters here.

CoffeeScript from CDN above 1.4.0 cannot call JavaScript function

CoffeeScript code is not working when the 1.10.0 version coffee-script.min.js is linked.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset='utf-8'> </head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </script>
<!--
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js" > </script>
-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.10.0/coffee-script.min.js" > </script>
<script type="text/coffeescript" >
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
The latest working CDN coffee-script.min.js is 1.4.0. What is the problem?
Those script hosted in CDN are not for browser, I think.
I tried your code, and as you say it did not work and there was the following console log.
Uncaught ReferenceError: require is not defined
require is a specification of commonJS and it is not implemented in browser default.
If you would not like to compile and make it work easily, the code below is available.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
</head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
<script type="text/coffeescript">
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
This way is introduced at the official site.
http://coffeescript.org/
While it's not recommended for serious use, CoffeeScripts may be included directly within the browser using tags. The source includes a compressed and minified version of the compiler (Download current version here, 39k when gzipped) as extras/coffee-script.js. Include this file on a page with inline CoffeeScript tags, and it will compile and evaluate them in order.
Error in packaging on the part of the CDN provider, see here:
https://github.com/jashkenas/coffeescript/issues/3811
https://github.com/cdnjs/cdnjs/issues/4869

Wicket with Javascript application(GWT made by LibGDX)

I can read english to some degree but I'm not good at writing.
Then I appologize for any rudeness.
I don't know well about wicket but I think it very good.
I want to deploy on wicket Javascript application made by LibGDX ,but on wicket's HTML file it does not work.
LibGDX logo was shown but next is not.(Maybe it seems to be not found next file (xxxx.cache.html) ??)
Please Tell me how to work Javascript(GWT) application on wicket.
Chrome shows this error.
Uncaught ED5709743BB488EF40123B0ADA51D171.cache.html:84393
com.badlogic.gdx.utils.GdxRuntimeException: Invalid assets description file.
My Javascript application is made by GWT which is client only created by LibGDX.
(LibGDX is multi platform game framework.
It can create WebGL application from java by GWT compiled.)
I think it can work in wicket because this GWT application is client only.
Javascript application is
assets
|...(many files used in game)
|-com
|-badlogic
|-gdx
|-...(some directory)
html
|html.nocache.js
|A0B51A68A37B38F9FF8A8855EDF848C7.cache.html
|Bxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|Cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|ED5709743BB488EF40123B0ADA51D171.cache.html
|Exxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|hosted.html
|soundmanager2.swf
|logo.png
|....(many files)
|-gwt
|-chrome
|chrome_rtl.css
|chrome.css
|-images
|-...(some directory)
|...(some files)
soundmanager2-jsmin.js
soundmanager2-setup.js
styles.css
My Javascript application can work in Struts JSP(deployment under webapp).
I wrote at wicket in this way :
src/main/java/.../testwicket/page/xxx.html
<!doctype html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<title>wicket + gwt(client only) test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="soundmanager2-setup.js"></script>
<script src="soundmanager2-jsmin.js"></script>
</head>
<body>
<a class="superdev" href="javascript:%7B%20window.__gwt_bookmarklet_params%20%3D%20%7B'server_url'%3A'http%3A%2F%2Flocalhost%3A9876%2F'%7D%3B%20var%20s%20%3D%20document.createElement('script')%3B%20s.src%20%3D%20'http%3A%2F%2Flocalhost%3A9876%2Fdev_mode_on.js'%3B%20void(document.getElementsByTagName('head')%5B0%5D.appendChild(s))%3B%7D">SuperDev Refresh</a>
<div align="center" id="embed-html"></div>
<script type="text/javascript" src="html/html.nocache.js"></script>
</body>
<script>
function handleMouseDown(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = 'default';
}
function handleMouseUp(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = '';
}
document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
</script>
</html>
Javascript application is in
src/main/webapp/
|-assets
|-html
soundmanager2-jsmin.js
soundmanager2-setup.js
style.css
Even if this code is added in GWT, it do not work(I don't call this code from java...Should I call it?).
public static native void setWindowHref(String url)/*-{
$wnd.location.href = url;
}-*/;

how to mix javascript js file(script embedded with php) and php code in netbeans?

if my hello.js is like this
function jst()
{
var i = 0 ;
i = <?php echo 35; ?>
alert( i );
}
what i really want in netbeans is to interpret that .js file through php interpreter without changing my extension of hello.js to hello.php or in other words i dont wan to change extension of my file from js . the reason behind this is Because netbean provide special support(i.e editing, coloring of text etc) for files with .js extension .
this is how i am including file in index.php
<script>
<?php include 'hello.php'?>;
</script>
code is working fine but i want to use hello.js instead hello.php in netbeans like as shown in following snippet
<script src="hello.js"></script>
what should i do?? how professional websites handle this issue??
*.js
http://s13.postimg.org/vl6vo4fif/image.png
*.php
http://s21.postimg.org/t7tuk42l3/after.png
every thing has converted to plain text after changing extension
You can only do as the most used way, via parameter
hello.js
function jst(alertMe)
{
alert( alertMe );
}
index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsFileTest</title>
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
var alertMe = <?php echo 35; ?> ;
</script>
</head>
<body>
<button onclick="jst(alertMe)">Try it</button>
</body>
</html>
Develop your js within your php file.
If everything works as expected then you can outsource everything as a separate file .js
But remember : php is parsed and interpreted on server side . So everything outside php tags is completely ignored. Therefore :
<script type="text/javascript" src="jsFile.js"></script>
is pure html and will be ignored. On server side php knows nothing about the existence of these .js file and it will not load and parse it. But this is required if you want php also interpret this file too.
If you want to include it with a php file, you can do it like
Put <script type="text/javascript"> at the beginning. code completion starts again.
jsFile.php
index2.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsFileTest</title>
<?php
include_once 'jsFile.php';
?>
</head>
<body>
<?php
echo "myID = ".$myId."<br>";
?>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Running :
But now we come to the important part.
Look at the html output source :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsFileTest</title>
<script type="text/javascript">
function myFunction()
{
alert("Hi from jsFile.php");
}
</script>
</head>
<body>
myID = idontknow<br>
<button onclick="myFunction()">Try it</button>
</body>
</html>
As you can see , javascript ( function myFuntion() ) is inserted directly in the html output. That is exactly what does not happen with
<title>jsFileTest</title>
<script type="text/javascript" src="jsFile.js"></script>
You can not use src="jsFile.php"
<script type="text/javascript" src="jsFile.php"></script>
After the parsing is finished the content is sent to the client. From this moment it is useless to even try to parse embedded php code in javascript. (the server is no longer involved , has already done its work)
IE detects an error (Status Line). when you double-click this
Error window pops up
the browser expects valid javascript code and this
$myId = "idontknow";
is not a valid JS code.
You just need to enable the PHP to read JS files. Do this:
Open your httpd.conf (Apache configuration file) and find this line:
AddHandler application/x-httpd-php .php
And add the extension, modifying this line to:
AddHandler application/x-httpd-php .php .js
You can even add CSS files too.
put this in customJs.php
<?php ob_start(); ?>
<script type="text/javascript">
<?php ob_end_clean(); ?>
alert('aaaa');
<?php ob_start(); ?>
</script>
<?php ob_end_clean(); ?>

Tinymce is not Displaying at at all

Hy There...!
I have some problems when its come to Jquery ..............
Here i am trying to use TinyMCE Text Editor... I had download its Js File and some code with it mention it in there site...
But When i see my index.HTML it is all Blank.....
Which i don't understand Please Any Help or hint will be appreciated........
Thanks in Advance ... Here Is The Code
<html>
<head>
<script type="text/javascript" src="tinymce.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
</head>
<body>
<form method="post" action="index.html">
<textarea name="content" style="width:100%" class="mceEditor"></textarea>
</form>
</body>
</html>
I believe you are not linking the tinymce.js file correctly. Make sure it's linked correctly relative to the directory of index.html file.
I used the same markup you provided and made it work in jsFiddle using the script from TinyMCE CDN.
http://jsfiddle.net/AHXXT/