js-problems with dropdownlist in form

Tagged: dropdownlist

This topic has 6 replies, 4 voices, and was last updated 2 years, 10 months ago by Giovanni Zomer.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
December 1, 2021 at 5:20 pm #102621

Giovanni Zomer
Participant

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=”["179"]”><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?

December 1, 2021 at 6:02 pm #102622

admin
Keymaster

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/

December 1, 2021 at 6:53 pm #102624

Giovanni Zomer
Participant

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”>
<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>

December 2, 2021 at 9:09 am #102626
olegr
Participant
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 2 years, 11 months ago by olegr.
December 2, 2021 at 3:30 pm #102629
Yavor Dashev
Participant
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/
December 2, 2021 at 5:13 pm #102630

Yavor Dashev
Participant

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/

December 25, 2021 at 8:26 am #102697

Giovanni Zomer
Participant

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!
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.