Invalidate() method wont refresh web element in MVC ZK

Question

I have this issue regarding refresh some elements in my zul page. Im currently using MVC with ZK not MVVM. I already used elementId.invalidate(), but it seems the method did not work. Can someone please help me how to do it in MVC ZK?

Here's my zul page

<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul">
<window border="none" apply="com.dorne.got.ui.far.there.FooComposer">
    <groupbox mold="3d" closable="false">
        <caption
            label="${labels.generate.foo.forward}" />
            <grid fixedLayout="true">
                <columns>
                    <column width="20%" />
                    <column width="80%" />
                </columns>
                <rows>                      
...
...
                    <row>
                        <div>
                            <label
                                value="${labels.foo.fr.Name}" />
                        </div>
                        <div>
                            <!-- constraint="/.+\.+|/: Please enter a valid Name" -->
                            <textbox id="txtName" width="10%" />
                            <label id="lblErrorName"
                                style="color:red" />
                        </div>
                    </row>                      
                </rows>
            </grid>
        <div align="center">
            <separator />
            <button id="btnSubmit"
                label="${labels.common.button.generate}" />
            <button id="btnClose"
                label="${labels.common.button.cancel}" />
            <separator />
        </div>
    </groupbox>
</window>

And here's my MVC zk composer

public class RefreshLabelNameComposer extends WindowComposer {


@Wire
private Label lblErrorName

 @Override
public void doAfterCompose(Window comp) throws Exception {
    //skip this code
}

public longProcess() {
//some long proccess
}

@Listen("onClick = #btnSubmit")
public void btnSubmitClick() {
    lblErrorName.setValue("");
    lblErrorName.invalidate();
    longProccess();
}
}

Let assume after some proccess, the lblErrorName value is not empty. After I push button Submit, just before long proccess is running, the lblErrorName wont refresh its value to "". I want just before the long proccess running, the lblErrorName is refreshed to empty string, so the user wont seeing the errors while running longProccess method. I think the problem lie on how invalidate() method work with MVC ZK, but I'm not sure whats the prob. Can someone please help how to fix it? Big thanks

Edit: I'm using ZK 7

Edit 2: I already tried

lblErrorName.setVisible(!lblErroName.isVisible());
lblErrorName.setValue("");
lblErrorName.setVisible(!lblErroName.isVisible());

but, still the element label lblErrorName wont refresh to empty string

Answer 1

You fall in a trap where the most people have problems with.
This has nothing to do with MVC or MVVM and even the invalidate() will never work at the time you want.
The reason is as long your method is running (the long operation) you don't give feedback to the client.
In other words, the feedback is sent when your long operation is done.
There are several way's to implement this, but I prefer a great abstract solution created by Robert Wenzel of potix.
The implementation is the same, only what is in the @Command will be in your @Listen.

Otherwise, if you don't want to do this, I suggest you just echo an event.
Echo event means, you go to client, and client will trigger that event directly after receiving the response.
It's a good solution, when you don't have much long ops, but it's harder to see what's happening next.