jQWidgets Forums

Forum Replies Created

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts

  • fry
    Participant

    Thanks for the quick reply.
    My app originally had hovering automatically pops down the menu
    when you hover over it. I was use to it.
    But my users complained that clicking was standard
    behavior on both Macs and Windows, and because of such,
    they preferred doing the extra click.

    As I scrutinized windows and mac menu bars more carefully,
    I realized that this click to open menu
    was only true for the first menu you opened.
    So I’m guessing that you’ll have other users of
    jqx implemented apps complain too.

    I don’t know how hard it would be for you to make a special
    windows-and-mac_menu-bar-behavior flag,
    but probably easier than me!
    Hopefully my users won’t miss the
    hover pops down non-first menus as much as they
    miss click to open first.

    I understand this is subtle.
    Thanks for your explanation.

    PS: when browsing the forums and I’m not logged in,
    I see “You must be logged in to post”
    but Its quite difficult to log in.
    I suggest you make that easier, including
    have the “You must be logged in to post” be clickable
    and takes you to your log in page.


    fry
    Participant

    Good to know I don’t have to turn numbers into strings with +”px”,
    one of the many design flaws of CSS that you’ve fixed.

    I’ve solved my problem of getting the min-width down
    by setting it explicitly on the HTML input tag.

    I’ve got pretty much what I need now.
    My concluison is combo boxes don’t work in Electron without
    a week’s worth of work.

    Its difficult to extract my code into one small working example
    but the basics are:

    let val_elt = make_dom_elt(“div”,
    {class:”arg_val identifier_combo_box”,
    type: “text”,
    “margin-left”: “0px”,
    value: (arg_val? arg_val : this.value),
    //style: “width:” + width + “px;”, //does nothing. jqxcombobox overrules
    margin: “0px”,
    padding: “0px”,
    “font-size”: “14px”,
    //oninput: “Root.jsdb.literal.string.oninput(event)”,//does nothing for th jqx widget
    ondragenter:”enter_drop_target(event)”,
    ondragleave:”leave_drop_target(event)”})
    this.jqx_combo = $(val_elt).jqxComboBox({height: ’16px’, source: this.choices,
    selectedIndex: 0, width: width + 25 + “px”,
    autoComplete: true
    })
    this.jqx_combo.on(‘change’, function (event){
    // “this” inside this fn is the dom elt with class arg_val
    // this.children[1].value returns the orig value string but not a typed in value string.
    debugger
    let the_val
    let the_input_elt = this.children[1]
    the_input_elt.style[“min-width”] = “40px”
    let sel_item = $(event.target).jqxComboBox(“getSelectedItem”)
    if (sel_item) { //sel_item is null if you type in a single char to the combo box, the change willbe called but sel_item will be null due to bug in jqx
    the_val = sel_item.value
    }
    else { //happens when user types in then hits return, tab or clicks outside the widget
    the_val = the_input_elt.value
    }
    let new_width = Root.jsdb.literal.string.compute_width(the_val,
    14, //elt.style[“font-size”],
    35)
    $(this).jqxComboBox({width: new_width}) // dropDownWidth: new_width + “px” }) // ,
    $(this).jqxComboBox({dropDownWidth: 200})
    })

    this.jqx_combo.on(‘keyup’, function (event){
    // “this” inside this fn is the jqx combo widget.
    //debugger
    //let the_input_elt = this.children[1]
    let the_val = event.target.value
    let new_width = Root.jsdb.literal.string.compute_width(the_val,
    14, //elt.style[“font-size”],
    35)
    $(this).jqxComboBox({width: new_width})
    $(this).jqxComboBox({dropDownWidth: 200})
    })

    In the keyup method,
    event.target.value
    gives me the string in the typein box.
    But in the change method it doesn’t.
    This is the big problem.

    In order to get the min-width to below the widest elt in the dropdown,
    I had to do:
    let the_input_elt = this.children[1]
    the_input_elt.style[“min-width”] = “40px”

    Thanks for your help!


    fry
    Participant

    By taking y9ur suggestion of getting the latest jqwidgets release 5.6.0,
    I now have most of the functionality I need.
    Here’s my method:
    this.jqx_combo.on(‘change’, function (event){
    let the_val
    let sel_item = $(event.target).jqxComboBox(“getSelectedItem”)
    if (sel_item) { //sel_item is null if you type in a single char to the combo box, the change willbe called but sel_item will be null due to bug in jqx
    the_val = sel_item.value
    }
    else { //happens when user types in then hits return, tab or clicks outside the widget
    the_val = this.children[1].value
    }
    let new_width = Root.jsdb.literal.string.compute_width(the_val,
    12, //elt.style[“font-size”],
    65)
    $(this).jqxComboBox({width: new_width + “px”}) // dropDownWidth: new_width + “px” }) // ,
    })
    First, inside this method
    event.args, as in the example of the url you give above,
    https://jseditor.io/?key=babee50c2d0f11e8b3a100224d6bfcd5
    evals to undefined.
    But $(event.target).jqxComboBox(“getSelectedItem”)
    works, however, that ONLY works when I choose a menu item from the combo box.
    If I type in some text and hit return (or tab),
    the on change method is called but
    $(event.target).jqxComboBox(“getSelectedItem”)
    returns null.
    HOWEVER in detective work, I found that
    the_val = this.children[1].value
    grabs the string out of the type in.
    This is inelegant, but your method of event.args.item.value
    does not work since event.args is undefined.
    Maybe you have a better method of doing this.

    My remaining problem is only in setting the width of the type in.
    (this).jqxComboBox({width: new_width + “px”})
    works when the type-in is wider than the widest dropdown list item,
    but will not set the width to less than the widest item in the dropdown list.
    Since I am expecting to have very wide items in the dropdown, but
    often will want to have quite short items displayed,
    (whether chosen from the dropdown or typed in)
    this results in the displayed widget being unnecessarily wide
    when not being operated on. Is there some way I can
    get rid of this “minimum width”?
    thanks!


    fry
    Participant

    There’s a bug in your fiddle and it may be related to the bug I’m having.
    to replicate the bug in your fiddle:
    – In chrome, browse the url in your “example”.
    – click right, click on Inspect, then click console
    to show the dev tools console.
    – now back in the fiddle,
    click in the typein region of the combo box
    – hit the delete key until you’ve erased all the characters.
    – type the char “a”.
    so far so good. console prints out something reasonble
    – type the the the char “b”
    You get
    (index):86 Uncaught TypeError: Cannot read property ‘label’ of null
    at HTMLDivElement.<anonymous> (http://fiddle.jshell.net/5fwqg3b7/show/:86:22)
    at HTMLDivElement.dispatch (http://code.jquery.com/jquery-1.9.1.js:3074:9)
    at HTMLDivElement.elemData.handle (http://code.jquery.com/jquery-1.9.1.js:2750:28)
    at Object.trigger (http://code.jquery.com/jquery-1.9.1.js:2986:12)
    at HTMLDivElement.<anonymous> (http://code.jquery.com/jquery-1.9.1.js:3677:17)
    at Function.each (http://code.jquery.com/jquery-1.9.1.js:648:23)
    at init.each (http://code.jquery.com/jquery-1.9.1.js:270:17)
    at init.trigger (http://code.jquery.com/jquery-1.9.1.js:3676:15)
    at b.(anonymous function)._raiseEvent (https://jqwidgets.com/public/jqwidgets/jqx-all.js:58:56546)
    at HTMLDivElement.<anonymous> (https://jqwidgets.com/public/jqwidgets/jqx-all.js:58:8691)
    (anonymous) @ (index):86
    dispatch @ jquery-1.9.1.js:3074
    elemData.handle @ jquery-1.9.1.js:2750
    trigger @ jquery-1.9.1.js:2986
    (anonymous) @ jquery-1.9.1.js:3677
    each @ jquery-1.9.1.js:648
    each @ jquery-1.9.1.js:270
    trigger @ jquery-1.9.1.js:3676
    _raiseEvent @ jqx-all.js:58
    (anonymous) @ jqx-all.js:58
    dispatch @ jquery-1.9.1.js:3074
    elemData.handle @ jquery-1.9.1.js:2750
    trigger @ jquery-1.9.1.js:2986
    (anonymous) @ jquery-1.9.1.js:3677
    each @ jquery-1.9.1.js:648
    each @ jquery-1.9.1.js:270
    trigger @ jquery-1.9.1.js:3676
    _raiseEvent @ jqx-all.js:120
    selectIndex @ jqx-all.js:120
    _search @ jqx-all.js:58
    (anonymous) @ jqx-all.js:58
    setTimeout (async)
    (anonymous) @ jqx-all.js:58
    dispatch @ jquery-1.9.1.js:3074
    elemData.handle @ jquery-1.9.1.js:2750

    I think this is because
    in your change code,
    you have, effectively
    event.args.item.label
    and event.args.item evals to null
    so null.label gives the error.

    NOW in my case, in my change method,
    if I bring up my dialog and type in
    “a” then hit return to get the change method to fire,
    and I do it ints body
    event.args.item.value
    (to attempt to get the text that the user typed in ie “a”
    I get an error because event.args.item evals to null.

    Just as another attempt, in my change method
    called under the same circumstances,
    event.target.value
    evals to undefined (but you didn’t imply that would work
    so this is probably OK.

    It is good that you told me about the keyup method.
    This will definitely help me.

    I am running this code inside of the the ELECTRON framework.
    I can imagine that Electron is screwing something up here
    as I’m having trouble with HMTL5 datalist combo boxes
    as well as the awesomplete combo box. jqxComboBox is
    the closest of the bunch to working so at the very least,
    you’re better than the rest!

    I’m running a jqx widgets that’s about 1 year old.
    (not sure how to tell what version I’m running.)
    Should this matter?

    I appreciate your attention!

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