I have a webpage with two drop down menus. The first one (id = ddlIndustry) has a 'Go' button that refreshes the page after selecting an option from the drop down. Once this is done, a selection can be made in the second drop down (id = region). This has an onchange property that is triggered and refreshes the page when a selection is made.
I am trying to write a set of commands in Javascript that selects an option from the first dropdown, clicks the 'Go' button, and once the page is refreshed, selects an option from the second drop down and programatically triggers the onchange event.
The code I have so far is:
document.all.ddlIndustry.selectedIndex = 21;
document.getElementById("cmdChart").click();
window.onload = function(){
document.all.region.selectedIndex = 2;
document.all.region.onchange();
};
This lets me select a ddlIindustry index and press 'Go', but does not select a region and trigger an onchange event. However, when I select an industry and press go manually, the second part of the code:
document.all.region.selectedIndex = 2;
document.all.region.onchange();
does allow me to select a region and trigger the onchange event.
How can I do both things together?
Edit: I have tried this in both Chrome (Version 37.0.2062.120 m) and IE (Version 11.0.9600.17280)
I think, If you write something like given below will work.
region.selectedIndex = 2;
region.onchange();
you can try this as well:
var body_Onload = function(){
document.all.region.selectedIndex = 2;
document.all.region.onchange();
};
In HTML add this function to body tag as
<body onLoad="body_Onload">
...
...
</body>
Related
I implemented select2 on this startpage: http://www.bier-in-aktion.at - the select field is positioned below the big logos.
the select menu includes beers. i want to fire the select2.select dom event on an option select (like the documentation of 4.0 says it does) to forward the user to the beer detail page, which i solve with defining a "window.location" forward in the code that gets executed when the "select2:select" event is fired. Here's the code doing this:
$("#beersSelectOptions").select2().on("select2:select", function() {
//get clicked element
var clickObject = $(event.target).data();
//define route + conduct url forward
var domain = document.domain;
var brand_uri = clickObject.data.element.attributes[2].value;
var beer_uri = clickObject.data.element.attributes[3].value;
location.href='/'+brand_uri+'/'+beer_uri;
});
BUT: the event fires only on mouse click, not on keyboard enter of the option.
am I using it incorrect? does anybody know how to fix this?
I have a table and I use select menu in each row for different actions for that specific row.
For example:
$(document).on('change', '.lead-action', function() {
// Do stuff
}
this method gets the value of the selected option. Based on the selected value, I display different popups. When the user leaves the page, the select menu retains the previously selected option.
Sometimes users click on the same option in the select menu. When they do, the above code doesn't work.
Is there a way to invoke the code block above if the same option in the select menu is selected?
I'm gathering that you just want the dropdown to fire anytime a selection is made. If so, check out the answer to Fire event each time a DropDownList item is selected with jQuery.
See my updated answer below:
You can use this small extension:
$.fn.selected = function(fn) {
return this.each(function() {
var clicknum = 0;
$(this).click(function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
fn(this);
}
});
});
}
Then call like this:
$(".lead-action").selected(function(e) {
alert('You selected ' + $(e).val());
});
Update:
I'm actually rather unhappy with the original script. It will break in a lot of situations, and any solution that relies on checking the click count twice will be very fickle.
Some scenarios to consider:
If you click on, then off, then back on, it will count both clicks and fire.
In firefox, you can open the menu with a single mouse click and drag to the chosen option without ever lifting up your mouse.
If you use any combination of keyboard strokes you are likely to get the click counter out of sync or miss the change event altogether.
You can open the dropdown with Alt+↕ (or the Spacebar in Chrome and Opera).
When the dropdown has focus, any of the arrow keys will change the selection
When the dropdown menu is open, clicking Tab or Enter will make a selection
Here's a more comprehensive extension I just came up with:
The most robust way to see if an option was selected is to use the change event, which you can handle with jQuery's .change() handler.
The only remaining thing to do is determine if the original element was selected again.
This has been asked a lot (one, two, three) without a great answer in any situation.
The simplest thing to do would be to check to see if there was a click or keyup event on the option:selected element BUT Chrome, IE, and Safari don't seem to support events on option elements, even though they are referenced in the w3c recommendation
Inside the Select element is a black box. If you listen to events on it, you can't even tell on which element the event occurred or whether the list was open or not.
The next best thing is to handle the blur event. This will indicate that the user has focused on the dropdown (perhaps seen the list, perhaps not) and made a decision that they would like to stick with the original value. To continue handling changes right away we'll still subscribe to the change event. And to ensure we don't double count, we'll set a flag if the change event was raised so we don't fire back twice:
Updated example in jsFiddle
(function ($) {
$.fn.selected = function (fn) {
return this.each(function () {
var changed = false;
$(this).focus(function () {
changed = false;
}).change(function () {
changed = true;
fn(this);
}).blur(function (e) {
if (!changed) {
fn(this);
}
});
});
};
})(jQuery);
Instead of relying on change() for this use mouseup() -
$(document).on('mouseup', '.lead-action', function() {
// Do stuff
}
That way, if they re-select, you'll get an event you can handle.
http://jsfiddle.net/jayblanchard/Hgd5z/
I have following jquery code, where on click of a check box I will show a popup value.
Except in IE,in all other browser it works as expected. That is, on change the check box will be checked and the popup will be opened.
However in IE8 its not getting checked, however popup is displayed properly.
Code :
$('#TAndC').change(function(){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
If your element is a checkbox and not a dropdown then use click anyway.
If your selector is referring to a dropdown use click if you need to support IE8 and older.
See why that is below.
According to the MSDN for change/onchange, the event is not triggered until the change is committed.
In addition the event is also not triggered when the value is changed programmatically.
To quote:
This event is fired when the contents are committed and not while the
value is changing. For example, on a text box, this event is not fired
while the user is typing, but rather when the user commits the change
by leaving the text box that has focus. In addition, this event is
executed before the code specified by onblur when the control is also
losing the focus. The onchange event does not fire when the selected
option of the select object is changed programmatically. Changed text
selection is committed.
To invoke this event, do one of the following:
Choose a different option in a select object using mouse or keyboard navigation.
Alter text in the text area and then navigate out of the object.
If you must support IE8 and older, you are probably better of to use the click event instead which get's triggered when you release the mouse and your new choice is selected.
instead of .change use below code and try
$(document).ready(function(){
$(document).on('click','#TAndC',click_function){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
});
I have a set of radio buttons with an onclick event that hides/shows an area of the website. The onclick also enables/disables spry validation.
The onclick is working great! However, not sure how to trigger the onclick when the page is loaded and the radio button is marked as clicked.
For example, the user may select radio button on the main page. Then later in the form process the user may want to edit the input that they put in. I would then check the radio button that the user had selected on the main page. Since the user has not clicked the radio button the hidden area still remains hidden.
window.onready=function()
{
if(document.getElementById('yourRadioButtonId').checked) {
//call your function, that you want to be triggered, as you will have the same call back function bounded for your onclick event
}
or
window.onready=function()
{
var radioButton=document.getElementById('yourRadioButtonId');
if(radioButton.checked) {
radioButton.click();
}
}
Note: Not not all browsers allow simulated events in this way. Please see the jQuery source for the trigger method to see how all the browser quirks are handled.
The best way to handle this is to write a helper function. Later, this helper function can be called by both of onClick (on radio button) and onLoad (on body element) events. This function will get the valu of your radio button and will do the stuff based on the result.
For example:
function handleRadioButtonStateAction() {
var radioButtons = document.getElementsByName('theRadioButtonName');
for (var x = 0; x < radioButtons.length; x ++) {
if (x == yourDesiredButton && radioButtons[x].checked) {
//do action
}
}
}
I am using the following code:
ieLessThan8OptionDisable = function() {
if ($.browser.msie && parseFloat($.browser.version) < 8) {
$("select").find("[disabled]").addClass("disabledforie").removeAttr("disabled");
$("select").change(function(){
var selected = $(this).val();
var disabled = $(this).find("[value="+selected+"]").hasClass("disabledforie");
if (disabled) {
alert("This option is disabled.\nSelect will be set to the first option.");
$(this).find("option:first").attr("selected","selected");
}
});
}
}
Basically this code is for disabled option in a select drop down box. It works perfectly except there is a usability issue.
Anytime I click on the option which should be disabled in IE, an alert pops up, and after that the select box resets to the first position. All is fine. Now when I click on the select box to open the drop down, it just closes. Basically I have to click on it 2 times at which point it opens.
I have tried this in IE6 and IE7. Both have this issue.
Any pointers would be great!
Thanks
This sounds like a focus issue. The select box has focus when you select a new option, then you pop up an alert which steals focus away from the select element. IE should be closing the select box automatically when the alert gets called but alas they probably didn't test this edge case. So the two clicks do the following:
Return focus to the select element
Select an item in the list
Add a call to blur before you invoke the alert:
if (disabled) {
this.blur();// add in
alert("This option is disabled.\nSelect will be set to the first option.");
$(this).find("option:first").attr("selected","selected");
}
PS - I haven't actually tested this, I don't have IE available right now