Using Vaadin: update Label text with TextField input after Button is clicked

Question

Using Vaadin: update Label text with TextField input after Button is clicked

I'm working on a simple Vaadin form where I want the text entered in a TextField to appear in a Label after the user clicks on a Button.

Here's the code snippet:

package com.example;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class TestForm extends UI {

    @WebServlet(value = "/TestForm", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = TestForm.class)
    public static class Servlet extends VaadinServlet {
    }

    private TextField textField;
    private Label label;
    private Button button;

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        textField = new TextField("Enter text");
        label = new Label();
        button = new Button("Click");    

        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                label.setValue(textField.getValue());
            }
        });

        layout.addComponent(textField);
        layout.addComponent(button);
        layout.addComponent(label);       

    }
}

However, when I click on the Button, nothing happens with the label and the web browser displays an error message:

Communication problem Take note of any unsaved data, and click here to continue. (SyntaxError) stack: eval@[native code] Jda BR Zc Xc line: 340: Unexpected token '<' - Original JSON-text: html>

What am I doing wrong?

java javascript vaadin onclicklistener

Answer 1

Answer №1

UPDATE The issue was caused by having two servlet mappings in the web.xml file. I have resolved it by commenting out one of them:

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="vaadinpokus" version="3.0">

  <display-name>vaadintest</display-name>
  <description>...</description>
  <context-param>
      <description>Vaadin production mode</description>
      <param-name>productionMode</param-name>
      <param-value>false</param-value>
  </context-param>
  <servlet>
    <servlet-name>myservlet</servlet-name>
    <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
    <init-param>
          <param-name>UI</param-name>
          <param-value>com.example.MyVaadinUI</param-value>
    </init-param>
    <async-supported>true</async-supported>
  </servlet>

  <servlet-mapping>
    <servlet-name>myservlet</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>

  <!--<servlet-mapping>
    <servlet-name>myservlet</servlet-name>
    <url-pattern>/VAADIN/*</url-pattern>
  </servlet-mapping>-->
</web-app>

The issue should now be resolved. Thank you for providing your code. It makes troubleshooting much easier.

Answer 2

UPDATE The issue was caused by having two servlet mappings in the web.xml file. I have resolved it by commenting out one of them:

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="vaadinpokus" version="3.0">

  <display-name>vaadintest</display-name>
  <description>...</description>
  <context-param>
      <description>Vaadin production mode</description>
      <param-name>productionMode</param-name>
      <param-value>false</param-value>
  </context-param>
  <servlet>
    <servlet-name>myservlet</servlet-name>
    <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
    <init-param>
          <param-name>UI</param-name>
          <param-value>com.example.MyVaadinUI</param-value>
    </init-param>
    <async-supported>true</async-supported>
  </servlet>

  <servlet-mapping>
    <servlet-name>myservlet</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>

  <!--<servlet-mapping>
    <servlet-name>myservlet</servlet-name>
    <url-pattern>/VAADIN/*</url-pattern>
  </servlet-mapping>-->
</web-app>

The issue should now be resolved. Thank you for providing your code. It makes troubleshooting much easier.

Answer 3

Answer №2

Why not switch from using lbl.setCaption to lbl.setValue? Give it a try!

btn.addClickListener(new Button.ClickListener() {
     public void buttonClick(ClickEvent event) {
         lbl.setValue(tf.getValue());
     }
 });

Answer 4

Why not switch from using lbl.setCaption to lbl.setValue? Give it a try!

btn.addClickListener(new Button.ClickListener() {
     public void buttonClick(ClickEvent event) {
         lbl.setValue(tf.getValue());
     }
 });

Using Vaadin: update Label text with TextField input after Button is clicked

Answer №1

Answer №2

Similar questions

JSLint error: Inconsistent use of spaces and tabs detected

Sending target information as a property argument

Is it possible to transfer data between two child components in Vue.js that share a common parent component?

What is the best method for choosing visible elements within a scrollable container?

javascript - Include new parameter in object literal and retrieve

Utilize information from a JSON Array to populate a JavaScript Array

Is it possible to caution users before refreshing the page, while still allowing them to

Guide to stopping available times from cycling through an array with the help of watch功能?

Setting form values using Angular 9

What is the method for combining two box geometries together?

The absence of HTML and CSS is preventing the inclusion of an Ajax image viewer, back button, and

The error "Cannot invoke the indexOf method on an undefined element at order" is being encountered in Javascript

The system is unable to interpret the symbol property 'Symbol(Symbol.iterator)' because it is not defined

Create a JavaScript function that adds cells to a table, each containing an input field and a corresponding

Is there a way to halt the compiler until an Ajax request is fully processed?

Preventing jQuery parser from turning arrays into objects

Do the items appear on screen only once you start typing in AngularJS?

How to send the value of a JavaScript loop variable to PHP using AJAX

Extracting data from an array using Angular

Do JavaScript functions operate synchronously or asynchronously?