HTML Elements Forums Forms & Editors ComboBox newbie question getting started on combobox

This topic contains 4 replies, has 2 voices, and was last updated by Avatar edwardsmarkf 6 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #100609
    Avatar
    edwardsmarkf
    Participant

    greetings – this is my first htmlelements question.

    first off, this looks fantastic and i am very excited to begin using htmlelements combo box.

    i am trying to get the download demo working.   i needed to make the following two changes to
    /demos/combobox/multiple-selection/index.htm:

    1. “../../../source/webcomponents-lite.js” needed to be changed to “../../../scripts/webcomponents-lite.js”
    2. “../../../source/modules/smart.combobox.js” needed to be changed to just “../../../source/smart.combobox.js”

    now i see the following error:

    smart.combobox.js:6 Uncaught ReferenceError: Smart is not defined at smart.combobox.js:6 (anonymous) @ smart.combobox.js:6

    any suggestions on what i may be doing wrong?   i am using the code in the demo area, and my code is below:

     

    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Combo Box Multiple Selection</title>

    <meta charset=”utf-8″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />

    <link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” />
    <link rel=”stylesheet” type=”text/css” href=”../../../styles/demos.css” />
    <link rel=”stylesheet” type=”text/css” href=”styles.css” />

    <script type=”text/javascript” src=”../../../scripts/webcomponents-lite.js”></script>^M</head–>
    <!–script type=”text/javascript” src=”../../../source/webcomponents-lite.js”></script>^M</head–>

    <body class=”viewport”>
    <smart-combo-box selection-mode=”zeroOrMany” selection-display-mode=”tokens” placeholder=”Select items:”></smart-combo-box>

    <!– scripts –>
    <!–script type=”module” src=”../../../source/modules/smart.combobox.js”></script–>
    <script type=”module” src=”../../../source/smart.combobox.js”></script>
    <script type=”module” src=”index.js”></script>

    </body>
    </html>

    #100610
    Avatar
    admin
    Keymaster

    Hi edwardsmarkf,

    Please, look at: https://www.htmlelements.com/docs/combobox/. The docs refers to which files are required in order to use the ComboBox.

    Hope this helps.

    Regards,
    Peter

    Smart HTML Elements
    https://www.htmlelements.com/

    #100628
    Avatar
    edwardsmarkf
    Participant

    Thank you, although perhaps a newbie might innocently assume the demo packages from the download are intended to work as-is?  I certainly understand that HTMLelements is a bit new, but i would not want a newbie to be discouraged from using the best widget package available.

    note:  there are a number of code typos on the page https://www.htmlelements.com/docs/combobox/

    <link rel=”stylesheet” href=

    seven of the eight stylesheet declarations are missing the leading double-quote character.

    Having used jqwidgets now for several years now, I didn’t think there was anything left to impress me. And yet here i am totally amazed once again.   Thank you so much for providing such powerful, useful, and yet so economical webpage additions.

    #100629
    Avatar
    admin
    Keymaster

    Hi edwardsmarkf,

    Thanks for the feedback.

    I guess you downloaded the community version which was missing the source/modules folder. The community version does not include all files and components.

    Regards,
    Peter

    Smart HTML Elements
    https://www.htmlelements.com/

    #100630
    Avatar
    edwardsmarkf
    Participant

    peter- yes you are absolutely correct, although i do have the jqwidgets license.   it is best investment i ever made.

    You might consider adding a couple of complete community working examples on the https://www.htmlelements.com/docs/combobox/ page.  we don’t want any new person to get discouraged early on.  Something like this perhaps:

     

    <!DOCTYPE html>
    <html>
    <head>
    <link rel=”stylesheet” href=”./source/styles/smart.default.css” type=”text/css” />
    <script type=”text/javascript” src=”./source/smart.element.js”></script>
    <script type=”text/javascript” src=”./source/smart.button.js”></script>
    <script type=”text/javascript” src=”./source/smart.scrollbar.js”></script>
    <script type=”text/javascript” src=”./source/smart.listbox.js”></script>
    <script type=”text/javascript” src=”./source/smart.dropdownlist.js”></script>
    <script type=”text/javascript” src=”./source/smart.combobox.js”></script>

    <script type=”text/javascript” >

    . . . .let init = () => {
    . . . . . . . .const comboBox = new smartComboBox(‘smart-combo-box#my-smart-combo-box’, { });
    . . . . . . . .comboBox.dataSource = [“new item 1”,
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . “new item 2″];
    . . . .}

    . . . .document.readyState === ‘complete’ ? init() : window.onload = init;

    </script>

    </head>
    <body>
    <smart-combo-box id=’my-smart-combo-box’ selection-mode=”zeroOrMany” selection-display-mode=”tokens” placeholder=”Select items:”></smart-combo-box>
    </body>
    </html>

    and thanks again for saving me literally years of work by providing such time-saving widgets.

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

You must be logged in to reply to this topic.