Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #102621
    Giovanni Zomer
    Participant
    Up
    0
    Down

    I have form elements create dynamically with javascript;
    one of this input types is a dropdown with the following structure


    objElement={ dataField:arrDetail[0], controlType:’dropdownlist’, label:arrDetail[2], controlOptions: {dataSource: objDropDownElements} };

    the elements themselves have the following structure


    objDropDownElements.push({label:arrDetailDropDown[1], value:arrDetailDropDown[0] });

    I see everything correctly on the screen, I can choose one of the dropdownoptions, and – in the background – javascript says


    smart.elements.js:27 Uncaught TypeError: Cannot read properties of null (reading ‘value’)
    at t._getControlValue (smart.elements.js:27)
    at smart.elements.js:27
    _getControlValue @ smart.elements.js:27
    (anonymous) @ smart.elements.js:27
    setTimeout (async)
    onChange @ smart.elements.js:27
    dispatchEvent @ smart.elements.js:6

    I have now included the main smart.elements.js, instead of the single little parts, but it still got this error;
    when I submit the form, each field is correctly passed with name and value, apart from this dropdownfield passed with


    div5a3b24d08c23994c31265e61fb45bc0d=

    in the html-code I actually see the correct field name in “form-control-name”


    <div form-control-name=”Tipologia” class=”smart-form-control smart-touched smart-dirty smart-valid”><smart-drop-down-list drop-down-append-to=”body” editor=”dropdownlist” name=”Tipologia” id=”Tipologia” class=”smart-form-editor smart-element smart-drop-down-list smart-drop-down-box” drop-down-button-position=”right” type=”list” aria-owns=”listBox39d0″ tabindex=”0″ role=”button” aria-haspopup=”listbox” aria-describedby=”TipologiaHint” aria-labelledby=”TipologiaActionButton” aria-expanded=”false” selected-indexes=”[3]” selected-values=”[&quot;179&quot;]”><div role=”presentation” smart-id=”container” class=”smart-container”>
    <span class=”smart-label” smart-id=”label” id=”TipologiaLabel”></span>
    <div class=”smart-content” role=”presentation” smart-id=”content”>
    <div class=”smart-buttons-container” role=”presentation” smart-id=”buttonsContainer”>
    <span class=”smart-action-button” smart-id=”actionButton” id=”TipologiaActionButton”><span class=”smart-token”>News</span></span>
    <span class=”smart-drop-down-button” smart-id=”dropDownButton” bottom=”” aria-hidden=”true” role=”presentation”>
    <span class=”smart-drop-down-button-icon” aria-hidden=”true” smart-id=”arrow”></span>
    </span>
    </div>

    </div>
    <span class=”smart-hint smart-hidden” smart-id=”hint” id=”TipologiaHint”></span>
    </div><div class=”smart-resize-trigger-container” aria-hidden=”true”><div class=”smart-resize-trigger-container”><div class=”smart-resize-trigger” style=”width: 100000px; height: 100000px;”></div></div><div class=”smart-resize-trigger-container”><div class=”smart-resize-trigger-shrink”></div></div></div></smart-drop-down-list><div><span class=”smart-grid-icon smart-form-control-icon smart-icon-help-circled show smart-visibility-hidden” tooltip=””></span></div></div>

    where am I going wrong?

     

    #102622
    admin
    Keymaster
    Up
    0
    Down

    Hi Giovanni,

    Could you please, provide a codepen or stackblitz sample which demonstrates the issue which you tried to describe? We could not much understand from the description what the problem basically is. Please, make sure that the latest version is used.

    Thanks in advance.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    #102624
    Giovanni Zomer
    Participant
    Up
    0
    Down

    hi, Peter!
    I downloaded now the latest version (yesterday’s version: I had the one before);
    I got the same error;
    I now extracted only the part of the code interested to create a stand-alone test, which you’ll find here below;
    as I don’t see the global smart.elements.js anymore, I took the single parts to include;
    the javascript error raises in the moment one clicks on one of the values on the dropdownlist;
    I’m probably doing something wrong, but the few examples I found about it didn’t help me to get the solutions;
    thanks in advance for checking it out!

     

    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
    <head>
    <script type=”text/javascript” src=”smart.element.js”></script>
    <script type=”text/javascript” src=”smart.validator.js”></script>
    <script type=”text/javascript” src=”smart.listbox.js”></script>
    <script type=”text/javascript” src=”smart.scrollbar.js”></script>
    <script type=”text/javascript” src=”smart.dropdownlist.js”></script>
    <script type=”text/javascript” src=”smart.form.js”></script>
    <link rel=”stylesheet” type=”text/css” href=”smart.default.css” />
    </head>
    <body>
    <form id=’EDIT’></form>

    <script language=javascript>
    var objFormElements=[];
    objFormElements.push({ dataField:”test-string”, controlType:’template’, label:”this is a string”, template:'<input type=text size=10 maxlength=20>’ });

    var objDropDownElements=[];
    objDropDownElements.push({label:”lbl1″, value:”10″});
    objDropDownElements.push({label:”lbl2″, value:”20″});
    objDropDownElements.push({label:”lbl3″, value:”30″});

    objFormElements.push({ dataField:”test-list”, controlType:’dropdownlist’, label:”this is a list”, controlOptions: {dataSource: objDropDownElements} });

    objFormElements.push({ dataField:”test-string-2″, controlType:’template’, label:”this is a string2″, template:'<input type=text size=10 maxlength=20>’ });
    objFormElements.push({ label:’send via post’, controlType:’submit’ });

    var objForm=new Smart.Form(‘#EDIT’,{ controls: objFormElements });
    </script>

    </body>
    </html>

     

    #102626
    olegr
    Participant
    Up
    0
    Down

    Hi

    Same problem here 🙁 Dropdown on “change” doesn’t get the values with next JS error:

    smart.elements.js:27 Uncaught TypeError: Cannot read properties of null (reading ‘value’)
    at t._getControlValue (smart.elements.js:27)

     

    The code is:

    const template = [{
    controlType: “input”,
    dataField: “tbtusername”,
    label: null,
    placeholder: config_app.t.tbtusername,
    cssClass: “underlined”,
    append: “<i class=’fas fa-user’></i>”
    }, {
    controlType: “password”,
    dataField: “tbtpassword”,
    label: null,
    placeholder: config_app.t.tbtpassword,
    cssClass: “underlined”,
    append: “<i class=’fas fa-key’></i>”
    }, {
    dataField: “systemtheme”,
    controlType: “dropdownlist”,
    label: config_app.t.theme,
    cssClass: “underlined”,
    append: “<i class=’fas fa-palette’></i>”,
    controlOptions: {
    filterable: false,
    selectionMode: “one”,
    displayMember: “theme”,
    valueMember: “theme”,
    placeholder: config_app.t.select_option,
    dataSource: [1,2,3,4,5]
    }
    }, {
    controlType: “boolean”,
    dataField: “tbtremember”,
    label: config_app.t.tbtremember
    }, {
    controlType: “group”,
    columns: 2,
    controls: [{
    controlType: “button”,
    action: “submit”,
    label: config_app.t.submit,
    cssClass: “primary”,
    align: “right”
    }, {
    controlType: “button”,
    action: “reset”,
    label: config_app.t.reset,
    align: “left”
    }]
    }];
    const form = new Smart.Form(“#form_login”, {
    label: config_app.t.sysname + “<i class=’fas fa-chart-bar fa-lg’ style=’margin-left:15px;’></i>”,
    labelAlign: “left”,
    showSummary: false,
    showColonAfterLabel: true,
    controls: template
    });
    form.value = {
    “tbtusername”: “”,
    “tbtpassword”: “”,
    “systemtheme”: 4,
    “tbtremember”: false
    };

    • This reply was modified 5 months, 2 weeks ago by olegr.
    #102629
    Yavor Dashev
    Participant
    Up
    0
    Down

    Hi olegr,

    I can confirm the reported behavior form you and its definitely a issue and I have added a work item for this use case.

    However as a workaround if you want to get the value of the SmartDropDown component you can do by using the following code snippet:

        const dropdownlist = document.querySelector('.smart-drop-down-list');
        dropdownlist.addEventListener('change', (event) => {
            let dropdowValue = event.detail.value;
            console.log(dropdowValue)
        });

    Let me know if this suits you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team
    https://www.htmlelements.com/

    #102630
    Yavor Dashev
    Participant
    Up
    0
    Down

    Hi olegr,

    Apologies for the wrong reply from my side.

    I now tested it with version 11.0 of SmartUI and works without the mentioned issues.(previosly I tested it with v10)

    If you update to the v11 of SmartUI this behavior will be resolved.

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team
    https://www.htmlelements.com/

    #102697
    Giovanni Zomer
    Participant
    Up
    0
    Down

    I confirm that the actual version 11.0.0 hasn’t this error anymore; I downloaded it just now;
    the version downloaded of Dec 1st, which reports exactly the same name, but a different dimension (the zip file of Dec 1st 56.908K, today’s 59.060 K), still had this error;
    both versions had been downloaded from <span lang=”BG”>http://www.jqwidgets.com/clientportal</span>
    glad that it was solved now! thanks!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.