Form controls not displaying data

edited July 2014 in Technical questions

Hi, I'm noticing that form controls are not displaying text.
The following example results in no data in the text field, even though the form.getValues() shows that the values were set (somewhere):

    var WIN = 'WIN_ONE',  
            FORM = 'FORM_ONE',  
            TEXT_ONE = 'TEXT_ONE'  

    webix.ready(function () {
        webix.ui({
            rows : [
                {
                    view  : 'button',
                    label : 'set',
                    click : function () {
                        $$(FORM).setValues({
                            TEXT_ONE : 'one'
                        })
                        console.log($$(FORM).getValues())
                    }
                },
                {
                    view     : 'form',
                    id       : FORM,
                    width    : 700,
                    elements : [
                        {
                            view : 'text',
                            name : TEXT_ONE
                        }
                    ]
                }
            ]
        })
    })

Comments

  • Just to add to my confusion, sometime $$(form-control) works only when the form-control has a 'name' attribute, and sometimes only when it has and 'id' attribute.

    I'm not sure but it's possibly related to whether the form is in a window, and/or whether the window is called from a component which is 'isolated'.

  • I didn't catch such behavior, though tried different browsers. The text control displays the value http://webix.com/snippet/bd0195f7.

    Normally, an ID is used in $$(view_id), not name. Control names are used in the following cases:

    var control_name = form.getValues().name;
    form.setValues(name:"new name");
    
    var control_obj = form.elements.name
    

    Some controls based on html input can be accessed via $$(name), but its more about side effect than expected functionality. One should stick to common $$(view_id) pattern.

  • edited July 2014

    Your snippet works in my browser, but same code doesn't work in my application.
    Note: my application is quite complex, multiple windows, and some isolation.
    Looking at the generated html, it seems that:

    1) setting a name of a control to 'x', results in html with the id='x'.
    2) setting the id of a control to 'x', results in a mangled id.
    3) setting a parent of form to 'isolated' sometimes results in (1) and sometimes (2) - algorithm uncertain.

    I'm finding that the safest for me is to set the name attribute, then use document.getElementById to find the control and set the value manually.
    ie: the $$() function isn't 100% reliable in my app - is it possible that your name->id algorithm doesn't work properly when there are multiple windows, some with isolation and some not?

    An article on how you assign id's (including in windows and with isolation) would be helpful.

    David

  • $$() function always returns element by id
    If such element doesn't exists - it really can find something else. But it will always returns the valid element by id if such element does exists.

    "Isolating" was purposed to the case, when you want to use some ids multiple times. It is not necessary for any other use case. And yes, if you are using isolated iframes you will not be able to locate elements in them by "$$" operator - it is by design ( as there can be multiple element with the same ID )

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!