Tree of checkboxes - javascript

I'm looking for a "tree of checkboxes" widget for Javascript. I tried to use jquery-checktree which purports to do exactly what I want, however it has the following problems:
It doesn't recognize checkboxes that are already checked and renders everything as unchecked.
It starts off with everything collapsed and doesn't give an option to start with everything uncollapsed
Each line of my tree starts indented from the line above, even if they are <li> in the same <ul>.
Can anybody recommend one that works, or fixes for this one?

You could try the YUI TreeView. They have an example with checkboxes. It might not be ideal for all uses, but it's pretty good.

ExtJS 3.x has one. I have not used it, but it looks nice. Not sure if you're willing to add ExtJS to your stack...

Another option is jstree which is based on jquery also.

I ended up making a few fixes to jquery-checktree and using it. Some of the changes are probably broadly applicable and I emailed them to the developer, and others are probably only useful to my project.

Related

My bootstrap carousel is not working properly in react

I don't know why my carousel's not working properly, can anybody tell me how to fix this issue.
My codesandbox link :- https://codesandbox.io/s/nice-heyrovsky-8yucf?file=/src/Prompts.jsx
You are creating carousel-inner multiple times but in reality you only need to render that one time and render carousel-items multiple times
I refactored your code a bit too so it only talks to the relevant dom elements
Also, I somewhat agree and disagree with christ here. Yes you should opt for react-boostrap library for this kind of stuff because they provide components for every item however if you ever use it then do explore the rendered version of it on the browser and then you will realize that its the same as a simple bootstrap library with same class names etc. But its mostly depends on how you use any library.
Anyway, I hope this codesandbox helped you if didn't then let me know. Happy coding
https://codesandbox.io/s/suspicious-tu-55u2h?file=/src/Prompts.jsx

Create a textfield which can include html markup

I was wondering how one could create something that resembles a textfield, but can contain html elements in it. For example, something like what Stackoverflow uses for tags on its "Ask Question" page. Can this be done this done using a particular plugin/library or does it need to be created from scratch?
I have seen some solutions using the "contenteditable" property, but I am worried about cross browser compatibility. In fact it would appear that the Stackoverflow example does not use this. I have tried searching for info on how to do this but haven't found anything. Would be grateful if someone could point me in the right direction.
You don't need to create it from scratch. Here is the one I use: TinyMCE
You might also find this useful. But you dont need to make a new one. There are a plenty of open source options available.

UIAutomation, UITableView inside UITableViewCell

I have a horribly coded set of controllers which I am unable to refactor at this time. I need to bring them under automated testing, but have run into an issue with the UIAutomation tool.
These controllers are dynamically generated. There were many ways to do this but somebody decided it would be best if they made a tableview containing cells which each contain more tableviews, containing the cells that the user will see and interact with.
A simple example of one of these controllers is as follows:
I need to press one of those table view cells automagically.
After struggling with some view hierarchy issues, I finally managed to get the logElementTree to see all of the cells, with correct accessibility identifiers. Here is the result:
Now just to test that I can press one of the buttons from a script...
NOPE. I can't seem to drill down into the elements even though the logTree clearly shows they exist and are visible.
Any ideas very welcome. I'm not very experienced with javascript so I could be missing something obvious. Thanks!
To answer my own question and thanks to a helpful engineer at the WWDC:
target.frontMostApp().mainWindow().tableViews()[0].cells()[0].tableViews()[0].cells()["Open"].tap();

fancybox-like inline popup implementation problem

i'm busy writing my very first jquery plugin and i ran into some problems. I have modified and customized other people's plugins quite succesfully in the past, but i'm more a designer than a programmer and this is my first javascript/jquery experiment build from scratch. with a lot of research and plenty of try and error i managed to realize most of the features i wanted. and besides the code probably being dirty, inconsistent and a pita for every pro, the plugin is working pretty well. the problem i have is, the way i've written it, i apparently cannot use more than one intance of the plugin on one page. if i do, it breaks appart. i tried to wrap the whole thing into a this.each function, but this as well breaks everything appart. right now, i have no clue at all, how to make this work. I'm grateful for any suggestions or hints, as my brain slowly starts to boil.
here's the little sucker: the .js file
you can see it in action here: demo
when you say more then one instance, I'm imagining a clone of your demo, so two of the same thing on one page.
one problem I see is that you are using ID's in your plugin, and you shouldn't be using ID's when you want multiples of the same thing to be able to live on the same page. try and switch to classes.

How my select list become uneditable?

I am coding some sort of booking system - calendar. One of the features is also a (js) pop up window with detailed information about event - user can either view them or edit.
Now my problem - I have put there a HTML select control (dropdown box), quite simple - 5 options. But somehow, and I have no ide why, this select is uneditable - that means that after I click on it nothing happens (I do not get the list of the options).
I know that now I should put a code here, however, whole system is so complex that it would take me ages.
I do not await exact answer or solution of my problem. I would like to ask you for advice - what would you check? I went through CSS up and down - no clue at all. Maybe some javascript? But how? I do use one public js library, so it might be something there, I checked as well, no clue.
Any advice would be much appreciated. I am stuck now... :-(
Thanks a lot!
Peter
::EDIT::
I have found out what is was! The ID if that pop-up window is bbit-cal-buddle and there is this line in the .js:
$("#bbit-cal-buddle").mousedown(function(e) { return false });
which basically explains why I can't select anything in dropdown (funny thing - checkboxes and radio works!). So my question is: how do I exclude my select and option tag from that .js command?
I've found a useful option when the bug is that obscure is to logarithmically comment your code.
That is,
Comment 100% of the code that might be causing a problem.
Test
If it works, uncomment 50% of the code you commented and go to step #2.
If it doesn't work, you know the problem exists in the code you uncommented.
Yes, this is somewhat of a monolothic technique, but I've found it to be very useful in the past.
Regards,
-Doug
Just to be sure, turn off ALL styles. this will render your page without the styles(obviously) and check if you can click the drop down. If you can, it is 98% a CSS error. It happened to me awhile ago - most probably an absolutely positioned div is covering it.
If you still can't click it, bring back the CSS then disable all javascripts. It should still be clickable by then since and html select tag doesnt need JS to be clickable.
If it still doesn't work, try doing a regular html select tag and check if you can select that one. If you can, then there is something wrong with your select tag

Categories