I need to implement a Checkbox tree and I came across this component called jstree. It is a jQuery component and unfortunately I have no experience with Jquery. I followed the documentation and I have implemented my checkbox tree. The problem is with finding the selected checkboxes upon some event,say form submit. The API says,.get_checked ( context ), .get_unchecked ( context ).
But I am not sure on how to use this. In the sense, whichobj.getChecked()? And what is the context here? Can someone care to throw some light on this by giving an example ?
Also,is there any other non-jquery components for this?
Thanks!!
Re: any non-jquery components for this--
Yes, use the YUI Treeview with checkboxes
YUI is industrial strength (it's used on the Yahoo products), well documented, open source and a supportive community.
Related
I'm looking to build something pretty much identical to this snippet in react without jquery. This snippet only works with jquery and jquery does not work well with react:
https://bootsnipp.com/snippets/2q81r
The only examples I can find anywhere are option select examples.
When I try the above snippet it doesn't even show the dropdown without jquery.
Seems like something you could just make yourself and not have to rely on further dependencies.
Have whether it's open or not tied to a local component state variable, and have each input controlled and updating a local state value.
THere re a ton of great UI libraries if you wanna search around for something that might fit your needs - Semantic UI, Material UI, etc.
Or you can follow along a great tutorial - this one seems decent:
https://blog.logrocket.com/building-a-custom-dropdown-menu-component-for-react-e94f02ced4a1/
Hi I had come across a question how to achieve suggestions in the input field while typing for example (in browser url bar while we typing first 3 to 4 letters it give suggestion if the url is correct we go with it else with single delete key press remove the suggested content). This need to be done with input field. Is this scenario is possible? Thanks.
There's a big range of possibilities here.
If the contents of the list are static or easily generated via code, you can use a native HTML <datalist> element.
If you are wanting autocomplete in the form using the user's previously-provided data, you can just enable via the <input autocomplete> attribute
If you're wanting far more customization, it's going to have to be some JavaScript that does the dirty work for you. Stack Overflow is not a good forum for getting library suggestions, but you should survey what's available in your current development stack.
This is absolutely achievable, have a look at - typehead.js
It's a javascript project for doing exactly what you're asking, I believe it's compatible with boostrap too.
Autocomplete suggestions are a very common Web Component. If you are using jQuery, you might want to try this component published by Materialize. If you are using, say, Polymer, you might want to try paper-autocomplete. If you are using vanilla javascript, you could try typeahead, or something like this autocomplete library. Most other modern web frameworks will have some alternative. I wouldn't really recommend making one from scratch.
In order to navigate through the elements/components hierarchy of EXTJS , I need to see what is up and what is down from any point like an element. Too often I go the wrong way and it takes me hours to figure out the path of a component/element (from to). Opening up the debugger and doing it through dom is abominable. Is there a nice utility or way in EXTJS to xray view the hierarchy in some way? And if you are sure that there is not, please let me know how you do it.
Let's say I start this way:
var panel = Ext.ComponentQuery.query('panel[itemId=dateOfDeathPanel]')[0];
And I need to get to a textfield or button, what is the pro's way of navigating the hierarchy, other than opening up the files and wasting precious time deducing how the components/elements are arrayed?
Many thanks for your help.
DK
Well, this question is quite big and not easy to answer because it depends on the architecture / pattern you choose as well, mvc, mvvm, etc..
I really like to use viewcontrollers to access the components using the reference config object or itemId, described here:
http://docs.sencha.com/extjs/6.0/application_architecture/view_controllers.html
Beside that you can install in Chrome the AppInspector plugin from Senchalabs, this can help you navigating through the component tree, stores and more.
Repo:
https://github.com/senchalabs/AppInspector/
Chrome store:
https://chrome.google.com/webstore/detail/app-inspector-for-sencha/pbeapidedgdpniokbedbfbaacglkceae
Can you use beside that the .up and .down selector in extjs:
extjs using up and down methods
I have a requirement where I need the autocomplete feature of textfield & allow multiple selection. I searched the net for resources [like wicket stuff and this ] but could not find any.
My Question -
1) Does wicket provide any component of this kind?
2) What work around can I have to accomplish this?
3) Can we use jquery in wicket?
I am having legacy code using wicket 1.4.18 & its hard to upgrade to the latest wicket due to time constraints.
Appreciate all your inputs.
Had the exact same problem as you a while back....At that point we had a custom component that did exactly what you need (multi-seclect-autocomplete). The component used a lot of Javascript and sadly did not perform the same on all browsers.
After some research I found Select2-Wicket witch is the wicket implementation of Select2 component.This really solved all the problems...it is genius.
The only problem you have regarding this component is that it does not have 1.4 wicket support and you will have to either port it to 1.4 or make the switch at least to 1.5(that is what I did).
You could implement a multichoice in a ModalWindow with a TextField and a ListView with the values filtered by the TextField input and selectable by Checkboxes.
ModalWindow and all other components are in Wicket 1.4. You have custom component which you can fully control. You can make it work and look like you want. You are not depending on an external component (i mean Select2).
The advantage of Select2 is the much better UX. However control is limited. It's hard to change it's appearance, it might not fit into your App. Not all js events from the orginal component are exposed and you might evolve into some complex scenario where you will encounter the limits of (Wicket)Select2. It is ok for basic tasks.
(I've tried posting this on YUI message group but without any luck)
Can anyone tell me how to retrieve the checked state of a yui Button? I've tried by creating the Button in code, which is then outputted as a HTML button but this only changes the title attribute.
When I use checkboxes instead, none of the checkboxes are checked (when iterating through them with jQuery).
Is there an easier way of doing it? Say with the 3.0 Node API, or Element?
EDIT:
To clarify how this problem came about, I'm using the YUI ASP.NET controls. They add controls to the page like this
Sys.Application.add_init(function() { $create(YUIAspNet.Button, {"ButtonID":"yuiMyButton_btn","ButtonName":"yuiMyButton$btn","TabIndex":0,"ButtonType":"checkbox","Text":"Technology"}, null, null, $get("yuiMyButton"));});
So as you can see, finding all buttons is not as simple as I'd like it to have been.
Sorry are you talking about checkbox buttons? Use:
myButton.get("checked")
where myButton is an instance of YAHOO.widget.Button.
Chris, I am the starter of YUI ASP.NET project. I watch the YUI mailing list regularly, I must of missed your question.
I have a more general answer for you and anyone else having the problem and ending up reading this, not just for checkbox button, but for all controls.
On the client, you can have access to the YUI object by calling the .get_YUIControl() method on the custom wrapper client object, then you have the control over the original YUI object. The YUI documentation is very good, and you can find a good description for what you'd like to accomplish.