Form loses values in tabbar

Suite and Optimus Suite 8
#1

I bind a form to a TAB of the tabbar.

dhxTabbar.getCell( this.TAB_ID ).attachHTML('<input name="test">');

I enter a value in the form field name=test. If I select another tab in the tabbar and then return to the form tab, the value in is lost and the field is empty.
Is there a setting, a procedure how the value in forms can be retained permanently when switching tabs?

Many thanks

#2

This may not be the most efficient way, but you could use the “beforeChange” and “change” events of the tabbar’s API to collect and store the values of the form (beforeChange) and then restore them when the tab is activated (change). Something like:

dhxTabbar.events.on("beforeChange", function(id, prev){
    if (prev === TAB_ID) {
        // code here to gather form values and store in page variable
    }
    return true;
});

dhxTabbar.events.on("change", function(id, prev){
    if (id === TAB_ID) {
        // code here to restore form values from page variable
    }
});

if you’re using custom HTML to create the form, I leave the code for reading and restoring the variables to you. If you’re using a DHTMLX form, you can use

formValues = dhxForm.getValue();

// and

dhxForm.setValue(formValues);

for getting and setting the form values respectively. Of course, you need to make sure your formValues variable has its scope set outside the dhxTabbar.events.on() callback functions for them both to be able to see it. (I’ve made that mistake too many times!)

1 Like
#3

You’re absolutely correct.
One note: in case of using the dhx.Form in the tab there is no need to save and restore its values. In this case form object stays and the entered values won’t be lost. In case of the raw html content due to VDOM Tabbar re-renders the tab content on its opening, so its shows just what attachHTML() contains.

#4

Hello, thanks for the suggestions. I have saved both the modified HTML (ajax reloaded) and the form data with the events and load them back into the TAB with the change() event. For single tabbars it work!

The problem is that the event only occurs when the TAB is changed directly. If I render a tabbar in a tab of a MASTER tabbar, the event is not triggered in the child tabbar when the MASTER TAB is changed. This means that saving/reloading is not possible. Does anyone have any ideas on how I can delegate the event to the child tab?

Thank you very much!
Dirk