jQWidgets Forums
Forum Replies Created
-
Author
-
July 17, 2018 at 8:13 pm in reply to: hover popdown on subsequent menus hover popdown on subsequent menus #101054
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.March 22, 2018 at 8:25 pm in reply to: extract combo box value when typed in extract combo box value when typed in #99368Good 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!
March 22, 2018 at 7:55 am in reply to: extract combo box value when typed in extract combo box value when typed in #99347By 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!March 20, 2018 at 4:30 pm in reply to: extract combo box value when typed in extract combo box value when typed in #99320There’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:2750I 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!
-
AuthorPosts