JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ComboBox › newbie question getting started on combobox

Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 27, 2020 at 7:10 pm #100609
    edwardsmarkf
    Member

    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”&gt;
    <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>

    January 28, 2020 at 5:51 am #100610
    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/

    January 28, 2020 at 4:30 pm #100628
    edwardsmarkf
    Member

    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.

    January 28, 2020 at 5:51 pm #100629
    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/

    January 28, 2020 at 6:30 pm #100630
    edwardsmarkf
    Member

    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.

    November 28, 2020 at 10:22 pm #101182
    edwardsmarkf
    Member

    in case anybody else runs into this silly problem, its because you (or me, TWICE NOW!) tried to just cut-paste the example from the website, rather than just run the example straight from the demo folder, which already works great and is completely debugged.
    IMHO, its far better to start with a nice working example such as the ones that HTML elements have kindly provided, rather than to needlessly struggle like i am prone to doing.   There is nio need to “reinvent the wheel”, so to speak.
    thank you once again to the fantastic staff at htmlElements.

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