Component extension

infonuvola2015 · April 12, 2022, 7:54am

I need to implement function like this topic

Javascript to convert Enter-Key to Tab-Key

I follow all step but I don’t receive alert implemented in javascript function.
I created MyExtension class:

package com.company.prova.web.ext;

@JavaScript(“vaadin://my-extension.js”)
public class MyExtension extends AbstractJavaScriptExtension {

public MyExtension(TextField target) {
    super(target);

    callFunction("init", target.getId());
}

}

In web/web/VAADIN I created my-extension.js

window.com_company_prova_web_ext_MyExtension = function() {
var self = this;
self.init = function (inputId) {
$(‘#’ + inputId).on(‘input’, function() {
window.alert(‘Changed!’);
});
}
}

In my screen I implemented oninit function

@Inject
protected TextField extTextField;

@Subscribe
public void onInit(InitEvent event) {
    com.vaadin.ui.TextField vTextField = extTextField.unwrap(com.vaadin.ui.TextField.class);
    vTextField.setId("myExtendedInput" + RandomUtils.nextInt()); // we need id to find our input in JS

    new MyExtension(vTextField);

}

I use cuba 7.2.19 version, all topic of this argument are old.
What am I doing wrong?
Thanks for your help.
Regards

gorelov · April 15, 2022, 8:21am

Hi,

If JavaScript code doesn’t work, it worth checking browser console to see exceptions. According to your implementation, I suppose that you’ll see there something like below:

com.google.gwt.core.client.JavaScriptException: (ReferenceError) : $ is not defined

It means that jQuery isn’t added as a dependency.

The following resolves the issue:

@WebJarResource("jquery:jquery.min.js")
@JavaScript("vaadin://my-extension.js")
public class MyExtension extends AbstractJavaScriptExtension {

Also, you can easily debug JS code in the browser developer tools:

Regards,
Gleb