I have the following JavaScript code:
var radios = form.elements["option_filter"];
for (var i = 0, max = radios.length; i < max; i++) {
if (typeof (radios[i].value) !== 'undefined') {
radios[i].onclick = function () {
var l = this.nextElementSibling.innerText;
<code to create a path containing selection>
window.location.replace(dest);
}
}
}
which works fine, except that when a radio is clicked, the selection is considered checked in code, but that is not reflected in the UI ... the radio button remains blank as the redirect is processed.
I tried having it sleep a bit between the onclick firing and the redirect, to no avail.
How do I get the UI to reflect the selection change so that the user sees it selected while waiting for the new page to load?
To get the UI to reflect... you'll need to set the value of the target radio button to a value...
radio[i].value = "whatever"
Also remember that the value set must match the name of one of the radio buttons in your options...
Related
I am creating a set of radio buttons, that when checked, update a text box with all of the options checked. However, if you only select one of four options the remaining part of the text box will populate with 'undefined' for each remaining button that isn't clicked, which in this case would be three.
To try and avoid getting 'undefined' and show all the options in the text field at once I created a script that would automatically check the radio buttons after a certain time has passed. But, it doesn't update the text field as if I had clicked on the button. Any ideas?
Here's the code that checks them, and the code that puts them in the text field..
var allElems = document.getElementsByTagName('input');
setTimeout(function() {
for (i = 0; i < allElems.length; i++) {
if (allElems[i].type == 'radio') {
allElems[i].checked = true;
}
}
}, 5000);
$('input[name="o1"]').on('change', function() {
$('input[id="text-yui_3_17_2_1_1502294158679_90364-field"]').val($('input[name="o1"]:checked').val()+$('input[name="o2"]:checked').val()+$('input[name="o3"]:checked').val()+$('input[name="o4"]:checked').val());
});
When I change the option of a dropdown menu, I want all the checkboxes to be unchecked. Here's the code that I put inside a function that's called when the dropdown menu changes:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = false;
}
}
This does indeed uncheck the checkbox. However, to recheck the checkbox, it takes two clicks. It appears that dat.gui still thinks the checkbox is checked, so it takes one click to uncheck it, and one more to check it.
How do I make dat.gui update the checkboxes?
Edit: Here's the current state of the problem.
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
function(value) {console.log('example');} ).listen();
menu['This is an example'] = false;
With this code, the checkbox is unchecked, due to the .listen() call and setting the variable to false. However, it still takes two clicks for the check to show--one to "uncheck" the checkbox, and one to check it.
I've recently come across the same issue with having to click the checkbox twice to get the proper behavior, so here's what worked for me and will hopefully spare other readers a few minutes of head-scratching:
// the usual
var menu = { "foo":false };
// store this reference somewhere reasonable or just look it up in
// __controllers or __folders like other examples show
var o = menu.add(menu, "foo").onChange(function() { });
// some later time you manually update
o.updateDisplay();
o.__prev = o.__checkbox.checked;
First set up data binding by telling dat.gui to listen to the value you need to bind to by including .listen() after your .add()
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui
.add(menu, 'This is an example')
.listen()
.onFinishChange(
function(value) {
console.log('example');
}
);
Then set your variable that dat.gui is controlling via the checkbox to false.
menu['This is an example'] = false;
Some more info about the details of dat.gui: http://dat-gui.googlecode.com/git-history/561b4a1411ed13b37be8ff974174d46b1c09e843/index.html
I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChange event. The function works perfectly other places however, I have a couple of places on the page where it works when I check the checkbox, but the event doesn't even seem to fire when I uncheck it.
Here is the JavaScript function:
function tabModifiedHighlight(){
alert("alert");
var div, i, input, inputIndex, selects, selectIndex, selectedTab, highlighted;
var tabs = new Array("admissioninformation","diet","vitalsigns","activities","nursing","ivfluids","medications1","medications2","labs","respiratory","diagnostic","consultations");
for(i=0; i<(tabs.length); i++){
selectedTab = tabs[i]+'tab';
if (document.getElementById(selectedTab).className == "selectedtab"){
div = document.getElementById(tabs[i]),
input = div.getElementsByTagName('input'),
selects = div.getElementsByTagName('select');
break;
}
}
highlighted = false;
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].checked == true){
highlighted = true;
}
}
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].type == 'text' && input[inputIndex].value != ""){
highlighted = true;
}
}
for (selectIndex = 0; selectIndex < selects.length; selectIndex++){
if (selects[selectIndex].value != ""){
highlighted = true;
}
}
if (highlighted == true){
document.getElementById(selectedTab).style.backgroundColor = "#FF0";
}
else {
document.getElementById(selectedTab).style.backgroundColor = "#F0F0F0";
}
}
And here is the input that is calling it:
<input name="cbMedTylenolPO" id="cbMedTylenolPO" type="checkbox" value="PO" onClick="tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2'); tabModifiedHighlight();" />
This page has multiple "tabs" which are just divs that are set to visible or hidden based on which one is selected. It seems consistent in that it works everywhere except for 2 of the tabs, and nowhere on those tabs. The only other difference I can see is that the ones that are not working are also showing or hiding divs within the tab, based on whether the checkbox is checked or not. I have added the alert at the very beginning of the function to see if it is firing or not, and it does when checking the checkbox, but not when unchecking.
I hope I made this clear, and any thoughts are appreciated!
As your code is not working only for two tabs, and working for all others its not an browser compatibility issue.
onClick if checkbox you are calling these 3 methods
tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()
Note tabModifiedHighlight is last one..
if any of first two methods tylenolPoShowHide or checkBoxHighlight fails... then tabModifiedHighlight will not be called.
I will suggest to add alert as first and last line in both tylenolPoShowHide and checkBoxHighlight ...
It will help you find which one is actually failing then you can add that code here and we will be able to help you further
I have code which generates markers on a Google map based on certain criteria. What I'm attempting to do is generate a list next to the map which would contain the address associated with each marker that appears on the list as well as a checkbox next to each address. At the bottom of this list would be a "refine" button which would return only the results which had their checkbox selected.
My question are:
How would I store the dynamically generated checkboxes and their respective address fields so that I could update and modify the selection with the refine button?
How would I (or should I) actually set each checkbox to run a function on onClick which would remove the marker from the map?
Create checkboxes on the fly inside a given div
var holder = document.getElementById('holdingDiv');
var newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.id = 'holdingDiv_option' + someValueIdentifier;
holder.appendChild(newCheckbox);
To run through these checkboxes adding event handlers:
// modify this if not just a bunch of checkboxes in a div:
var checkboxes = holder.getElementsByTagName('input');
for(var i=0; i < checkboxes.length; ++i) {
var thisCheckBoxId = checkboxes[i].id;
// create a listener
var callback = function(event) {
myGeneralHandler(i, event);
}
if(checkboxes[i].addEventListener) {
checkboxes[i].addEventListener('click', callback, false);
} else { //IE
checkboxes[i].attachEvent('click', callback);
}
}
Then set up myGeneralHandler to handle clicks from any checkboxes.
I have a default page which loads different controls on pageload according to the querystring.
I have a control which creates checkbox list (inside div_A) on load and get checkbox checked through database, then i click Continue, div_A get invisible with all the checked checkbox id in hidden field and div_B is visible true.
On Go Back click, div_B is visible false and div_A get visible true and following javascript is fired to check the selected checkbox, but it does not work
Javascript :
function goBack()
{
var SIds = document.getElementById("<%=hdv_Data.ClientID %>").value; // hdv_Data is the hidden field
var Ids_Arr = new Array();
Ids_Arr = SIds.split(',');
for (j = 0; j < Ids_Arr.length; j++)
{
if(Ids_Arr[j] != 0)
{
alert(Ids_Arr[j]); // works till here, gets correct values in array
var chk = document.getElementById(Ids_Arr[j]);
alert(chk);
chk.checked = true;
}
}
}
I wish it may help you im using this to hide and show some fields in a jsp, you may arrange it to fit your need.
- javascript
function showArea(){
var checkbox = document.getElementById('codcheckbox');
if(checkbox.value==true){
var element = document.getElementById( 'dataFields' );
if (element && element.style.display=='none'){
element.style.display='block';
}else{
element.style.display='none';
}
}
};
jsp form content...
<tbody id="dataFields" style="display: none">
<OTHER STUFF>
</tbody>