I wanted a drop down to implement a particular input. But the inbuilt select didn't look good to me. So instead I tried implementing it with lists. I've had partial success with this. When I click on the text field the list gets presented by sliding down from the text field and when clicking on the list gets dismissed by sliding up. The slide animations are done using jQuery.
On click of any of the <li> elements the value gets set in the field. A click anywhere else just dismisses the list.
But now when the list gets presented over a button and when I click on the list, it considers this as a click on the button and just dismisses the list.
How can I tell the browser to take the click on the list instead of taking the click on button when the list is presented?
The screenshot should give a fair idea: Click on all other list items works properly, but ones that's is above the button doesn't work. In the screenshot, the click on list item Miscellaneous doesn't work:
You can use event.stoppropagation.
$("#PopuListId").click(function(event){
event.stopPropagation();
// do rest of the things
});
Related
Ive looked around a bit and not found anything so im not even sure if this is possible.
What I want to do is have a drop down list. Each list item is a specific type of a view for a list. Is it possible to add an icon at the end that when clicked will fire off a different action to just selecting the item?
So the user opens the drop down. They see View 1. At the end there is a pencil button image. If they select View 1 the list view changes. If they select the pencil it opens up the edit View dialog for that view.
Is this even possible using javascript/jQuery?
It won't be do-able with the standard select element, however it's definitely possible using divs and heavy Javascript/jQuery.
Something similar to how the jQuery plugin Chosen works - it hides the original select element and rebuilds it with divs, adding interaction with jQuery (obviously).
I'n using the select2 jQuery plugin with an ajax call to retrieve items for the dropdown list as the user types. Multiple selections (tags) are allowed and custom selections are allowed. When the dropdown list appears, if I use the cursor keys to go to the item I want and hit enter or tab, then the everything works fine. The select2-selecting callback is triggered and the input gets updated with the selection text.
If I click on an option with the mouse, however, the select2-selecting callback is not triggered and the input is not updated. The only thing that happens is that the dropdown menu disappears, nothing else.
I have another select2 input on the same page that allows only one selection and no custom selections. Clicking dropdown items in that works fine. Example on the plugin site similar to what I'm doing respond to clicks too, so it's not a general bug with the plugin.
I am aware that select2 actually has a hidden, completely translucent container div the size of the screen that is added to the DOM whenever a select2 input has focus. The select2 input sits on top of this 'underlay' and everything else is underneath it. When the select2 input looses focus, the 'underlay' disappears. I thought that the problem might be that the underlay had a higher z-index than the input, so when I click a dropdown item I'm actually just clicking the underlay and causing the input to loose focus. Well, the input (9999) does have a higher z-index than the underlay (9998). I just wanted to rule that out.
This bit of javascript was the culprit:
input.on("select2-blur", function() {
$(this).select2('close');
});
I think that at one stage the dropdown menu was only disappearing if I tabbed out of the input, but if I clicked outside of the input when the dropdown was visible, it stayed there. I had this is as a means to get rid of the dropdown when the input lost focus. It was the cause of the problem though. Strangely, even though I've removed it now, the dropdown disappears appropriately when I click outside the input, but I don't know why that is.
I am working on a project in which I need to make an HTML page with couple of radio buttons.
First button is, INSERT. As soon as I click INSERT button, I would like to show three text box just below the INSERT button. First textbox is datacenter, second textbox is node and third textbox is data.
Second button is, UPDATE. As soon as I click UPDATE button, I would like to show same above three text box just below the UPDATE button.
Third button is, DELETE. As soon as I click DELETE button, I would like to show only one text box just below the DELETE button. In this one text box will be node.
Fourth button is, PROCESS. As soon as I click PROCESS button, I would like to show four text box just below the PROCESS button. In this first textbox will be datacenter, second textbox will be node, third textbox will be data and fourth textbox will be conf
And lasttly there will be submit button which I will be pressing.
I am able to come up with this design in the jsfiddle
Problem Statement:-
But somehow, few things are not working such as Submit button is not getting shown when I click Process button for the first time. Meaning for the first time, if you click Process button, then it shows only three textbox which is datacenter, node and data but in general it should show four textbox as shown above. And also submit button is not shown as well.
It will be of great help if anyone can provide jsfiddle example?
And also is there anything wrong I am doing in my jsfiddle which I should not be doing? Meaning instead of hiding the elements, I should delete them?
I am following up on previous question here. In my previous question, my design was something else but after that I was able to come up with my new design as shown in my jsfiddle above.
We talked about it some in a discussion and came up with http://jsfiddle.net/4Nmqk/12/
It's simpler to have forms for each type of submission, rather than trying to hide and show the right parts of the forms. Unless you have a method for abstracting the data (which sections to show ) from the logic ( how to show/unshow them ) it ends up being a mess, just like the OPs original Fiddle.
My fiddle creates a lot more html, but the javascript is as simple as:
$('.btn-primary').click( function(){
$( '.btn-primary').removeClass( 'currentButton' )
$( this).addClass('currentButton')
$( 'form' ).hide()
$( "#form_" + $(this).attr('id') ).show();
})
Also added a bit of cleanup, just for fun.
Of course the most sophisticated implementation of this would probably be heavily integrated into the server side code and be generated a lot more dynamically, but for the purposes of answering the question, this technique seems more straight forward and more capable (note how easy it is to add additional content, like the headers I added to each form. IT would be equally easy to add descriptive text, disparate form elements, etc).
I'm testing TagDragon jQuery plugin, it's exactly what I need, but is has one annoying "feature", when I click the scrollbar in the suggestion list, it hides it's results. On the other hand jQuery autocomplete plugin doesn't lose the focus on the input field and that's why it doesn't hide its results. But that plugin doesn't provide the functionality I need, so I can't just replace tagdragon.
I've studied jQuery autocomplete code and I can't understand how they keep the focus on the input field, I just can't find the code responsible for that!
So the question of the day is: How to keep the focus on the input when using the scrollbar in the result suggest list?
P.S. Also I have a question of how jQuery autocomplete plugin does it, because it looks like magic to me after studding the code for an hour.
I just asked a similar question, and nobody answered it, so I basically tweaked my own code until I figured out a working solution.
After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:
upon the opening of the list, add a click event to the document that
checks to see if the click is not on in the active input, and not on
the active list. If this is true and the click is in fact on a non-listy
part of the document, then close it.
add an event to each list item in the suggest list (when the list is
open only) that selects the value and closes the list.
add an keydown event to the input itself so if the user hits enter,
it changes the value and closes the list.
Lets say that I have a drop down list that I want to create "on the fly" when the user interacts with it.
For example: the drop down list only has the the option "Attach a file". When the user clicks/interacts on the drop down list, I need for it to generate, at that moment, all the available files they can attach (which depends on other interactions of the form... hence why I need an "on the fly" method).
My problem is trying to find the appropriate event as a trigger.
If I use onFocus, then IE tries to load the original drop down list and then generates the new drop down list, resulting in the user to essentially need to double click the drop down list to interact with it. In Firefox, there are no problems with this method.
I then tried switching to onMouseOver which works great in IE, but not so much in Firefox. The difference in the two is that in IE onMouseOver only triggers on the drop down box and not the drop down list and in Firefox it triggers on both (so you are trying to select an option from the list and it keeps re-generating the list on the fly, which is preventing you from interacting with it).
Any ideas?
Have you tried onClick?
Also you should put some logic into the code that fills in the options. If nothing has changed on the page, then there is no need to refill the drop down list. So if you store the state of the page somehow, you can check if the new state is different from the old state, and then fill in the dropdown if it is.