Check if Selection Changed in OnClick event - javascript

Note: The answer marked as the answer, answers the questions in the Title. However, my underlying problem, using type ahead dropdowns, is solved by moving to IE8.
I have a drop down list that when I CLICK a NEW selection I want to cause a postback ("this.form.submit()") But only if the click on the dropdown list just changed the selection.
Note that OnChange will NOT work because when the selection is changed by the keyboard I would not want to postback because it is a type ahead dropdown list.
I also suppose I could use OnChange and check if the change was caused by the mouse.
Maybe if we can come up with both solutions and i'll see which works better?
Thanks so much for your help!!!!!
EDIT: More information:
AutoPostback = true; will not work. (don't want it to post back when the selection is changed by the keyboard)
onBlur = doPostBack; I tried this, but the result is not optimal. The user has to click off the ddl after making a selection with the mouse.
Another way to state what I want to do, i think, is do a postback when both the OnChange and OnClick events fire at the same time.

On the OnClick event I have javascript that sets the ddl.value = true;
On the OnChange event I check to see if ddl.Value = true if so I postback and set it to false.
On the OnKeyDown I set ddl.Value = false so that when I click on the ddl it only posts back if I change the selection with the mouse, if I press a key to use the type-ahead-feature it will not postback.
Not the most elegant solution but it works and you have to give me creadit for creativity.
Note: This solution work in combination with a script that fires on OnKeyDown that runs the type-ahead-ddl(ie. moves you to the closest selection when you press a key) and postsback when you press enter.

Did you try AutoPostBack="true" ?

Related

Focus should be lost when clicking on any other item

I am using angular-ng-autocomplete library at many places in my project.
But i faced 1 issue recently.
I have 1 button besides the autocomplete textbox. Whenever i select any option i am using it to add in the object.
But, Whenever i type something which is not in the dropdown list. At that time i can't click on the button until i click it twice.
So the 1st click is loosing focus from the autocomplete textbox and 2nd click is actually clicking on that button.
Demo
Try to type anything which is not in the loaded list. Ex: Test
Than try to click on 'Add' button, You will observe that you need to click twice.
For quick fix, I tried to read the mouseleave event on this ng-autocomplete, But it's also not being triggered whenever we are typing something. We need to loose the focus to make mouseleave works. And it's also not a good solution eitherway!
Any help?
Try this,
onFocused(e) {
// do something
this.auto.close();
}
Refer this for more https://github.com/gmerabishvili/angular-ng-autocomplete/issues/50

Setting focus on next dropdown instead of using blur() method?

Problem:
I have many drop downs with dynamic changes going on at all times. The problem is I am having to use the blur() method to disable focus so that the class depending on the selected value can be applied.
Is there a way I can set the focus onto the next drop down element.
Tried:
Instead of blur(), I have tried this but it did not work.
this.next(".Element").focus();
Current code:
$('.Element').change(function () {
var colour = $(this).find('option:selected').attr('class');
$(this).removeClass().addClass(colour);
this.blur();
}).change
JS Fiddle:
jsfiddle of my code
try to make this a jQuery object to focus another element
$(this).next(".keyTechElement").focus();
EDIT 1:
Seeing your DOM, changes is needed. The .next() function selects siblings in the DOM and inside <td> there is no .Element sibling.
$(this).blur();
$(this).closest('td').next("td").find(".Element").focus();
http://jsfiddle.net/UXJZ7/2/
I think manipulating focus with focus() or blur() is terrible for keyboard users.
Users also detest auto-tabbing on forms they rarely use.
Onchange doesn't mean a selection has been made, a user could be stepping through the options with the keyboard (or with assistive technology that simulates the keyboard like speech recognition software), you get an onchange event for every step in their selection.
You can get quite elaborate to work around this, but it's rarely worth the effort.
For your example, I'd just leave things like this: http://jsfiddle.net/KWvMZ/ It looks like the only reason you have a focus state in your style is to display the text with sufficient contrast, so I just set the yellow background to have black text when focussed and left it like that.
.

Acrobat 10: Run Javascript whenever a different item is highlighted in a dropdown

I would like to know if its possible if I can have javascript change the values of other fields based on a user highlighting different options in a dropdown box before actually selecting the option?
So let's the user uses the mouse or arrows key to navigate through the list, before selecting an item. I would like other texts boxes to change their values as a result of this scrolling.
For the record, I have searched quite a bit. Also, the event actions (i.e. - mouse up, mouse down) only work when the dropdown box is first entered. Not on subsequent actions ... at least as far as I can tell. I also have commit selected value immediately checked, which helps because you don't have to leave the box before it fires.
Is what I want possible? Or can the scripts only run after the selection is committed?
Dropdown properties>Calculate>Custom calculation script. Place the script in that box for it to instantly update another place.
Use this formula in script:
var one = this.getField("fieldName 1").value; //fieldname 1 should be name of dropdown field//
if(one=="Administration") getField("fieldName 2").value = "Chief";<br>
if(one=="Apparatus Maintenance") getField("fieldName 2").value = "Engineer";<br>
if(one=="Confined Space") getField("fieldName 2").value = "Rescue Technician";
I think you should be able to fire some JavaScript whenever user changes highlighted option using keyboard. Because whenever a key is pressed, the OnKeyPress event of the combo is fired.
Support for mouse is trickier. When user hovers mouse pointer over an item in combo, no event is fired. The same OnKeyPress event is fired only when user actually clicks on an option.

Selecting from a drop down ( browser cached drop down ) - which event gets triggered?

Gist
Which event gets triggered when we select from a dropdown which is populated from the cache ( such as usernames and other form values ) in a <input type="text"> .
Detailed
In a form, we can login with multiple username say A,B,ABC . And the browser caches all these values ( w.r.t password remember ). So,if we try to login with A - a drop down pops up giving multiple option say A , ABC -- which event gets triggered once we select any of the options provided.
oninput, onchange, onblur -- none of which seems to get triggered if we select from browser provided drop down.
Help,
Beginner
You can use these events with select.
Cache has nothing to do with the drop down.
What you need is depending on your use.
Generally onchange is used to get the value or call a function when the value changes.
onblur would trigger a function when the drop down losses focus. eg, when you use tab or other methods.
This question is answered here: On input change event?
In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
easily use select event
example:
$('#test').select(function(){ alert('data changed'); });

SELECT onChange event

How can I keep track of changes in SELECT element BEFORE user chooses an item using mouse or by pressing Enter?
One can listen to keyUp event, which allows to track user navigating through the list using keyboard. But is there more generic approach, which allows tracking list "prefinal" changes?
I always use focus click listener for this.
$('select').bind('focus click',function(){
//IMACHANGINGMYOPTION!!!!!!!!!!
//var val=$(this).val();
});
The above should be triggered before the on change event:
$('select').change(function(){
//The option has been changed.
});
Explanation: whenever a user focuses select, we do get the value of the selected item, and we can manipulate it before the onchange event if triggered. The click listener is added in case our select is already focused, and the user clicks it to expand before he actually selects an option and triggers a change.
This is an example of usage, that lets us track the previous value:
http://jsfiddle.net/SUKqS/8/
Javascript supports an 'onbeforechange' event which will probably do the trick, but I don't know how widely implemented this is across browsers? If that is supported widely enough, store the previous value before it is changed. Failing that, just store the original values in hidden fields or JS variables.
there is no event that fires when moving the mouse over the select-items.
you can, as you said, track the mouse movement. But as different browsers render the lists differently, that would be a difficult task.
you can however create a selectbox yourself without using the native select
you have to create a function like this example:-
function example(){
jQuery('select#service_billing_state').change(function () {
//your code here
});
}
and you have to call this function in onchange, onblur, onkey , onfocus...

Categories

Resources