Import .JS file in custom layout

General
1

Hello !

I want to import a .JS file in my customlayout html file. This doesn’t work (my-file.html) :


<div class="v-panelexpandable-header" onClick="hideDisplayPanel();">
	<div location="title" class="v-panelexpandable-title"></div>
</div>
<div location="content" class="v-panelexpandable-content"></div>

<script type="text/javascript">
	function hideDisplayPanel()
	{
		alert('ok');
	}
</script>

Thanks for your help.
Kevin

2

Sorry for the up. Has no one ever met this problem ?

3

If someone had an answer, it would be my best Christmas gift :wink: !

4

Don’t know if this applies to your use case but the normal ways to add JS to your application is through extending ApplicationServlet and overriding writeAjaxPageHtmlHeader() - or then by calling window.executeJavaScript(script);.

More info
here
.

5

Hi Jens !

Actually, I have a custom layout with several DIVs. When I click on one of them, I want to extend / collapse its content without calling the server (so with javascript).
The javascript code is quite big so it is not really “clean” if I embed it in the custom layout’s HTML file.

That’s why I was wondering how to call javscript from my custom layout.

6

I wonder if u figured this out…I have the same problem :blink:

7

Hi,

Jens already gave the best answer
here
; if you want to have your javascript library imported once into the browser, you must override the writeAjaxPageHtmlHeader method in the ApplicationServlet.

I’ve never tried to import or write javascript in a CustomLayout; off of the top of my head, I can’t see any reason why it wouldn’t work.

Cheers,

Charles.

8

I created a GWT component and used JSNI to import external JS library.
But i never tried the way suggested here, I’ll give it a shot.

Thanks,
Deepak

9

Hi,

com.vaadin.terminal.gwt.client.ui.VCustomLayout has some extra logic for script block handling (see method extractBodyAndScriptsFromTemplate).
The scripts are extracted and evaluated separately (maybe because it doesn’t work with setInnerHTML).

I managed to define a javascript function within a custom layout template using the following approach:

<script> 
  window.myFunction = function(arg1, arg2) { ... } 
</script>

Just using

<script> 
  function myFunction(arg1, arg2) { ... } 
</script>

inside the template doesn’t sem to work because the script-src is executed via eval().

10

I think it’s not an answer. Custom Layout has very limited functionality and as for me this is a bug. If Custom Layout could parse HTML and add there Vaadin Components it should also could add some CSS that this HTML page want to use!