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/
Related
I am using ReactJS and it is not recommended to use JQuery (or vanilla JS) to maniplate the actual DOM, because it may have unpredictable results because of ReactJS using a virtual DOM.
So, if I include pure Bootstrap in my project, could it have the same adverse effect? If so, the use of reactstrap or react-bootstrap would solve this problem or do those libaries also use the bootstrap javascript under the hood?
Thank you,
Michel
The key thing to Avoid is manipulating the DOM for objects (or html DOM elements) that have been created with react, and have states tracked by react. Outside that you are free to use as much jquery or vanilla javascript as you like for DOM manipulation.
This is because, objects rendered with react js tend to work with the state of the object, and attempting to get things to work like toggling classes can cause clashes, if the element state that reactjs remembers has been altered by javascript or jQuery.
For example: What this means is that you can use react to render bootstrap tabs that use bootstrap javascript and jquery,
Then you can activate the tabs after react has rendered them with jquery. You'll have to limit your react to only the render function and avoid setState or update.
using setState or render after the initial render will have to be avoided, if jquery is used to toggle the classes, and react attempts to do the same later, clashes will occur.
In summary you can use both reactjs and JQuery in the same project , but stick to one (either pure react or pure jquery) per element for post render manipulations
Yes it could cause a conflict with React, but it very much depends on what you want to use in Bootstrap? if you just want to use the styling then that will not cause you issues.
Bootstrap JS functions such as showing and hiding divs ( Accordion for example ) might give you issues if React is going to be expecting that div to be in a certain state on the render.
But i have hobby projects that use React and jQuery just fine as long as i am not asking each of the libraries to overlap. Once i have built an application i then try and remove the jQuery from it and move the function into React with the aim to remove jQuery completely.
If you want to expand your answer to provide an example of what you are working on then i'm happy to add to my answer.
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.
JIRA has a nice search tool built into the issue tracker -- date-pickers, multi-select label pickers, number filters (min/max), and the like. For the label filter specifically, I'm wondering if this is a feature that Atlassian home-rolled; or did they use a plug-and-play framework that I too can add to my site; or something in between? I realize there's some back-end stuff that needs to happen in order to populate the list, but the UI element itself looks really slick.
The image below, from jira.atlassian.com, shows the label filter I'm interested in.
I tried pulling apart the source on the page, but I only found things that appear to be unrelated: AUI (Atlassian's UI standards?) and AJS (a low-level jQuery-esque library?).
I think that this plugin is the one you need. But you still will need to do the backend magic to ensure it works.
http://harvesthq.github.io/chosen/
We're doing a project in Angular.js and the Mockups we're getting from our UX person heavily use interactive popovers / callouts.
The problem is that I can't seem to map these on to angular concepts in a clean way. Conceptually they require their own templates, controllers, and they need to be created and destroyed all over the page. Overlapping elements without changing the layout.
Bootstrap modals aren't seen as an acceptable alternative. The founders are really keen on having interactive dialogs that point at specific elements on the page.
Is there something that can accomplish this? Or do you have any tips?
I would implement a directive or set of directives that you can show on focus or blur or mouseover of other elements. Depending on your implementation, you might be able to get away with just one directive that opens onFocus or onBLur. Angular 1.2 supports ng-focus, ng-mouseover, and ng-blur which you can leverage to do something like this.
<div class="check-thing">
<button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
<modal ng-show="showModal" model="modal-model"></modal>
</div>
Then just have the form in the directive populate a two-way bound modal-model, or fire a callback when the user clicks okay that the controller waits for. It might even be better to just make the whole checker thing a directive and use them in a repeat.
Beware, none of this will be very friendly on a tablet or phone as they don't readily support hovers.
Have you looked at the AngularUI Bootstrap modals? (http://angular-ui.github.io/bootstrap/#/modal) They fit very well into AngularJS and can really be styled into almost any appearance you want. Passing data in and getting data out is very easy. Most UX people don't seem to understand how the web works (mine doesn't seem to anyway) and these have been a real savior for me and my team.
I know this is an older post but since an answer was never selected I would like to point out a possible solution that I had come across recently.
The Angular UI BS Popover allows you to have it align with the element you are targeting, which can be click, hoover, and focus.
For content you have the choice between text, HTML formatted string and template. Based on the question, the template is likely the one that would be used to allow the content to be dynamic and include interaction.
You can find more information and a demo on how it works at: https://angular-ui.github.io/bootstrap/
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.