In an html form, I have a table that I hide or display based on a radio button choice. When the table is hidden and then brought back, one of the style settings is lost. I would like to keep the same layout when the table is displayed.
HTML for the table
<table id="tblAutomated">
<tr>
<td>Are the deposits automated?</td>
<td id="tdAutomated" style="text-align:right"><input type="radio" name="rbAutomated" value="yes">Yes <input type="radio" name="rbAutomated" value="No">No</td>
</tr>
</table>
JS for the radio button just the relevant part
document.getElementById('tblAutomated').style.display='block';
document.getElementById('tdAutomated').style.textAlign='right';
But IE Dev Tools shows an unhandled exception for that second JS line. "Object doesn't support property or method."
So, I tried adding a class to the <td>.
<td id="tdAutomated" class="tblRight">
and I added the text-align style to that class. Then I changed the JS to try two other methods: .hasClass and .addClass. But both of those methods failed, too.
Is there a method that will either set that alignment correctly or allow the class to be added?
EDIT
Here are the images of what I see and what Dev Tools shows is happening in the HTML. Using both methods, I see no reason why the cell shouldn't go back to where it was originally.
I was able to resolve this by putting the table inside a <div> and changing the display for that, instead.
Related
I got an old angular js application and my mission is to fix accessibilty problems. I have a table that includes radio buttons within the cells and I need to navigate between them using the arrow up and down keys.
I already have a method that deals with this issue and its working fine until i test it using screen reader (NVDA)
What happens is for some reason the SR cause the method to be ignored
and causes the table to lose its focus.
the only way that I managed to make it work is by setting the table with role="application".
but from what I have been reading so far it is wrong to use it in this case
This is a sample of one of the cells :
<td class="scheduleLineCell" style="text-align: center;">
<input type="radio"
class="btnRadio ng-valid ng-not-empty ng-touched ng-dirty"
aria-describedby=""
value="126" data-ng-model="selectedIdList[childSchedule.gridIndex]"
data-ng-key-press="scheduleKeyPress"
data-ng-grid-index="0"
xng-focus="isFocusOnStationButton == false &&
isFocusOnMapButton == false && ScheduleLine.Id ==
selectedIdList[search.currentScheduleGridIndex]" name="2096">
</td>
Can you make a working example on here or on JSfiddler?
Off the top of my head I can say this.
You should not put controls in tables or uses tables for design purposes.
a. If you have an enter data row make it from "div"s
b. Remember screen readers repeat table headers a lot!
JAWS and NVDA does mess with a screens JSEvents and get us a example page to help
(AngularJS) Refactor the control back to a component or directive and see if that helps.
a. e.g.
<custom-radio-button ng-value="val" aria-checked="true"></custom-radio-button>
I have 3 radio buttons, they’re called “Easy” “Medium” and “Hard”. Each one is linked to a separate Javascript function. These functions show one div while hiding two other divs.
The purpose of this is for the user to be able to choose an option and see the div for that option, for example, if they press the “Easy” radio button then the “Easy” div should be shown, and the “Medium” and “Hard” divs should be hidden.
I’ve been trying to get this to work for a week now and I think I’ve tried every related suggestion on stackoverflow, but I hope there’s just something small that I’m missing.
These are the radio buttons in my HTML:
<td width="100"><div align="center" class="radio">
<input type="radio" name='thing' value='valuable' id="easy" onclick="showEasy()"/></div>
</td>
<td width="100"><div align="center" class="radio">
<input type="radio" name='thing' value='valuable' id="medium" onclick="showMedium()"/></div>
</td>
<td width="100"><div align="center" class="radio">
<input type="radio" name='thing' value='valuable' id="hard" onclick="showHard()"/></div>
</td>
These are the DIVs I want to show/hide:
<td colspan="8" rowspan="12" align="center">
<div align="center" id="easyDIV"><img src="/images/pic1.jpg" alt="If you can see this, then the image didn't load properly." class="distort1" id="sample"/></div>
<div align="center" id="mediumDIV"><img src="/images/pic2.jpg" alt="If you can see this, then the image didn't load properly." class="distort2" id="sample1"/></div>
<div align="center" id="hardDIV"><img src="/images/pic3.jpg" alt="If you can see this, then the image didn't load properly." class="distort3" id="sample2"/></div>
</td>
And this is the script I have at the top of my page, each function should show one DIV at a time:
<script>
function showEasy()
{
$("#easyDIV").removeClass("displaynone");
//Make sure mediumDIV is not visible
$("#mediumDIV").addClass("displaynone");
//Make sure hardDIV is not visible
$("#hardDIV").addClass("displaynone");
}
function showMedium()
{
$("#mediumDIV").removeClass("displaynone");
//Make sure easyDIV is not visible
$("#easyDIV").addClass("displaynone");
//Make sure hardDIV is not visible
$("#hardDIV").addClass("displaynone");
}
function showHard()
{
$("#hardDIV").removeClass("displaynone");
//Make sure easyDIV is not visible
$("#easyDIV").addClass("displaynone");
//Make sure mediumDIV is not visible
$("#mediumDIV").addClass("displaynone");
}
</script>
I only want the Medium div to be shown at the start, so I have showMedium(); set to run once the page has finished loading, this successfully hides the Easy and Hard divs. The problem is that all 3 divs are visible for a second or two until every page element is finished loading. Once everything’s loaded, showMedium(); runs and the Easy and Hard divs get hidden.
This looks really bad to the user, so I’ve been trying to find a way to have these two divs hidden by default and just have the Medium div showing at the start.
I’ve tried several methods, I’ve tried hiding the two divs by setting their divs to <div hidden>
I’ve also tried hiding the two divs by setting their style to display:none like this:
<div align="center" id="easyDIV" style="display: none;"><img src="" alt="If you can see this, then the image didn't load properly." id="sample"/></div>
And then to show each div I tried changing this style to display: inline and display: block by including code to do that inside the Javascript function above.
These attempts didn’t work, the 2 divs were successfully hidden (because they didn’t appear when the page was loading) but whenever I tried clicking on the Easy or Hard radio buttons, while the Medium div disappeared correctly, it was replaced by an empty space, meaning the Easy and Hard divs were still hidden.
I can’t work out how to get this working, it seems like the only way I can have the radio buttons working successfully and showing/hiding the correct divs, is to have all 3 load/appear on screen for a second or two while the page loads. I’d really appreciate any advice on getting this to work the way I’d like it to. I’ll try any suggestions and thank you in advance for your help!
UPDATE
I've created a version with the plugin included:
http://jsfiddle.net/9L0fvt9n/
A couple of notes:
1) I've included the plugin in the fiddle, your code is at the bottom of that section.
2) The plugin you're using is very old...if you need to use it make sure you also use jQuery Migrate on the page: https://github.com/jquery/jquery-migrate/#readme (just import it along with regular jQuery).
3) The issue was being caused by the plugin's internal code. To resolve it, instead of hiding the images using display:none, I used visibility:hidden. This is different because whereas display:none renders the page as though the element was never there to begin with, visibility:hidden hides the element, but it will still take up its space on the page.
4) Because visibility:hidden leaves blank spaces on the page where the image would have been, I added a wrapper <div> (with a class of .container) and used CSS to place all three images on top of each other. Since only one image is displayed at a time, all images are in the expected position (you can play around with my demo by removing my new CSS styles and see the effects).
Let me know if it helps!
I've created a JSFiddle demo of a solution but you should know that many of the techniques you're using are now out-of-date and not best practice (For example - Never use tables to display non-tabular information).
In my example, I've corrected a few of these:
http://jsfiddle.net/wxda5yoq/
When the page initially loads, I've set the CSS to only display the desired div element.
After that, new div elements are dynamically displayed and hidden based on the radio button selection. The main even handler is:
$('.radio input').on('click', function(){
//Hide all image divs
$imageDivs.css('display','none');
//Then display the image div we want to see
//To find that out we'll get the id of the current radio button
var radioID = $(this).attr('id');
//And then we'll display that image div
$('#' + radioID + 'DIV').css('display','block');
});
Let me know if this answers your question :)
Apply the displaynone class to the classes you don't want to be shown from the beginning, since all your javascript completely resets the class for all the divs in question when run.
Example:
<td colspan="8" rowspan="12" align="center">
<div align="center" id="easyDIV" class="displaynone"><img src="" alt="If you can see this, then the image didn't load properly." id="sample"/></div>
<div align="center" id="mediumDIV"><img src="" alt="If you can see this, then the image didn't load properly." id="sample1"/></div>
<div align="center" id="hardDIV" class="displaynone"><img src="" alt="If you can see this, then the image didn't load properly." id="sample2"/></div>
</td>
You could even then remove the code running displayMedium() on page load.
Also it might be faster to write some logic to test is the radio button clicked(if returned true) then toggle the other classes.
Getting the value of input per:
https://stackoverflow.com/a/23053203/4812515
var easy = $('easy:checked').val(),
medium = $('medium:checked').va(),
hard$('hard').val();
if(this.radiobutton == true){
medium.toggleClass(); }
else{
toggle some more classes
}
I am trying to work out the best way to get this to work. What i am trying to do is as follows:
i have a page which 10 checkboxes on it. I want to have a dynamic drop down which is populated with a list of server names when a checkbox is clicked
Example:
<tr>
<td>
<input id="site4" name="list[]" type="checkbox" value="BERT">
<label id="site4l">BERT</label>
</td>
</tr>
<tr>
<td>
<input id="site5" name="list[]" type="checkbox" value="BOB">
<label id="site5l">BOB</label>
</td>
</tr>
I would also have on the other side of the page a select dropdown which i want to be populated when a checkbox is checked, i would also like the values to be removed from the select dropdown if the checkbox has been unchecked.
I thought about something like this
setting a hash in javascript
serverList["BERT"] = ["server1", "server2", "server3", "server4", "server5"];
serverList["BOB"] = ["server8", "server9", "server10", "server11"];
and then i am a little stuck on how i can build the list and display. I have seen a few jquery pluggins which group items in a checkbox which look good.
Any help would be appreciated.
Many thanks Mithandra
Do you have any code to work on? To just work out of the blue is a bit hard.
In general: What you are looking for is the change event (http://api.jquery.com/change/).
I personally would add a change event to all the checkboxes and if unchecked just remove (http://api.jquery.com/remove/) all coresponding entries, if checked then just append them (http://api.jquery.com/append/) to your dropdown.
Hope this helps.
Thanks for the reply.
I guess being from a perl background what i was looking to do is say i have various checkboxs with the different names example of one might be BOB
i would have some sort of java array like
fields[BOB] = [ array of servers ]
when i checked the box it would then go and look up the list of servers using the key of BOB and then populate the dropdown box with the list of servers.
The way I was thinking of doing this is to build some sort of hash within java from which a select dropdown could be produced. so in the event that the user unchecked a box that they had already checked the key and subsequent values would be removed from the hash.
i am not really sure on how to achieve this within Java as i only dabble with it.
I have a list of users in an organized table. I want a splash-style div to appear when I click on the row of the user whose information I want to edit. When the splash screen appears, I want to have input boxes within the splash to contain the information of the user. So far I accomplished the splash screen effect. Now the final piece is grabbing the data within the row using the same onclick event as the splash, getting the values of the columns, and changing the innerHTML of the input boxes within the splash.
http://jsfiddle.net/nH6x6/1/
SOLUTION: http://jsfiddle.net/nH6x6/3/
<tr class="data" id="row1">
<td>1</td>
<td>Marquezso</td>
<td>123456</td>
<td>noob#coder.com</td>
</tr>
in the fiddle you have to click on the row to activate the splash.
I want the username and email input fields to contain the data of the clicked row.
In this case row1
=)
You will need to reference the relevant td element and grab its contents.
For example:
$('input[name="username"]').val($('#row1 td:first').text());
I gave a name to your input in the above example as it makes it easier to reference.
Here you go: http://jsfiddle.net/76bdx/3/
Here is a snippet, click fiddle to see everything...
//Fill the form
document.getElementById('username').value=$('.data td:nth-child(2)').html();
document.getElementById('email').value=$('.data td:nth-child(4)').html();
Gonna have to be a little trickier if your table ever holds more than one user row. New fiddle on the way for that... {never mind, already answered}
Recently I found this very interesting feature with HighCharts, drawing values from the table.
You can see the example on the following jsfiddle...
http://jsfiddle.net/4mb9k/
That can be found on this thread.
So my question is how can I make the data that is in the table, to be dynamic... Meaning, with <input> tag so when the user enters the values, and click the button ... the chart to appear with the inputed values.
(Doesn't matter the chart type.. column, line, spline... regardless)
You can see my picture in order to understand what I mean...
http://imageshack.com/a/img691/3569/bfz.png
Thanks!
You can add the attribute contenteditable to the tds, and add a button which will load the graph like this
HTML
<tr>
<th>Plums</th>
<td contentEditable>5</td>
<td contentEditable>11</td>
</tr>
jQuery
$('button').click(function(){
$('#container').highcharts({//rest of the code
DEMO