I have accessbility enable web application
In table on cell I have data which is being read by screen reader JAWS. On the same cells I have menu which is being activated on enter key press.
I donot have any role defined on cell. Its as follow:
Issue 1. Enter key press converted to mouse click event Jaws doing it,as without Jaws ON, its works fine. so how to make enter key work here .
I have 2 different menu to open on mouse click and enter key press.
Below is the sample code where when jaws is ON enter key press become click event.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "td" ).click(function() {
alert( "Handler for .click() called." );
});
$("td").keydown(function(e){
if(e.which == 13) {
alert('You pressed enter!');
}
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<th>Parameter</th>
<th>Description</th>
</tr>
<tr>
<td tabindex="0" >function</td>
<td>Specifies </td>
</tr>
<tr>
<td>function2</td>
<td>Optional.</td>
</tr>
</tbody>
</table>
</body>
</html>
I'm having a similar issue where JAWS converts a keypress event made on a table cell (TD) into a click event made on an anchor tag within that table cell. A keypress event handler on the table cell is never fired and the link within is navigated to instead.
The solution I've found is to add an aria-hidden to the anchor tag when the table cell is selected and then remove it when the table cell is no longer selected. In order to keep the screen reading functionality in place, I also have to copy the anchor tag's aria-label attribute up to the table cell when the table cell is selected and then move it back to the anchor tag when the cell is no longer selected.
It's horribly hacky but so is JAWS, unfortunately. I hope something similar works for you!
Related
I am creating a macro with Excel VBA that will submit an entry into an online database using information from an Excel spreadsheet. During this entry process, the macro needs to click on a CSS button. It isn't a form button, does not have an input type, no name, no id, and no source image except for a background image. I think my only hopes are either to click on the button based on the div class. Can anyone help?
The button is here :
<div class="v-captiontext">
By Ankit
</div>
<td class="v-tabsheet-tabitemcell v-tabsheet-tabitemcell-selected" style="">
<div class="v- tabsheet-tabitem v-tabsheet-tabitem-selected">
<div class="v-caption" style="width: 39px;">
<div class="v-captiontext">
By LOT</div>
<div class="v-caption-clearelem">
</div>
</div>
</div>
</td>
Thanks to Remou's answer on this thread: Use VBA code to click on a button on webpage
Here is a first stab in your issue, you could try this:
Set tags = wb.Document.GetElementsByTagname("div")
For Each tagx In tags
If tagx.class = "v-caption-clearelem" Then
tagx.Click
End If
Next
Yet, I've never tried to use the Click method on a div.
I'm stumped by a seemingly simple problem. In my ASP.NET page, I have a table which has a few rows that need to be shown or hidden conditionally from the back end. Sounds simple, right?
What I tried is something like this in the front-end code:
<table>
<tr>
<td id="demorow1">
<p>This row always shows up!</p>
</td>
</tr>
<tr id="conditionalrow" runat="server">
<td id="formoptionsrow">
<!-- This row contains a number of form elements that should only SOMETIMES be shown, as determined by the back-end code. -->
</td>
</tr>
</table>
And in the code-behind file I just do this to hide the code:
conditionalrow.Style["display"] = "none";
This makes the row disappear as intended. I don't mind that it's just invisible, it won't hurt anything. However, this has the side-effect of making several HTML form elements inside of conditionalrow gain ASP.NET's convoluted IDs and NAMEs. This throws off a lot of Javascript functions related to the form that I don't have time to change or rework right now. I need to be able to hide the form (or remove it from the code entirely) from the code behind file, but without changing the IDs and NAMEs of child elements.
I know there's some kind of setting in the newer versions of ASP.NET that allows you to override ASP.NET's ID reassignment. Unfortunately, I'm stuck with ASP.NET 2.0 and don't have the option of using anything newer for this project. What do you recommend?
Instead of making the row a server side control, use a code block to give it an appropriate CSS class.
<tr class="<%:VisibilityClass%>">
Where, in your code behind you have a VisibilityClass string property that return the CSS class name:
public string VisibilityClass
{
get
{
if(shouldBeVisible)
return "visible";
return "hidden";
}
}
You can also use functions if a property is not appropriate.
can you not do a conditionalrow.Visible = false;
Hy,
I am implementing a asp.net web application, and I have two webform files, for example first.aspx and second.aspx.
On first.aspx i have a gridview displaying about 400 entries (400 rows). I've enabled the gridview selection option, and when I click select link on certain gridview row, I am redirected to second.aspx. On that second.aspx page I have some input forms and Update button and I am updating Gridview selected row entries with this.
When I enter updated values in that forms and click Update button, I want to redirect it again on first.aspx and the gridview is displaying again all 400 entries, but previously selected/updated row is now changed.
Because this Gridview does not fit on screen (height is to big because od many Gridviews entries) I want to retain scroll position as it was before entering second.aspx (I want to focus updated row). I know I can order GridView entries by modified_on value, but I have to retain everything as it was, and I don't want to have GridView paging enabled... How to retain scroll position as it was when I've clicked Select link on first.aspx?
Thank you for you help in advance!
I think you want this:
http://weblogs.asp.net/hosamkamel/archive/2007/09/07/maintain-scroll-position-after-postbacks-in-asp-net-2-0.aspx
unfortunately, I don't think this is cross-browser aware but this is based on jQuery and such work with redirects and not only postbacks:
http://elijahmanor.com/webdevdotnet/post/maintain-scroll-position-on-page-refresh-using-aspnet-or-jquery.aspx
You could use the rows id, pass it to the second.aspx and then append it to the url, when directing back to first.aspx:
first.aspx (generated code, simplified):
<table>
<tr id="row1">
<td>some content</td>
...
<td>some content</td>
</tr>
<tr id="row2">
<td>some content</td>
...
<td>some content</td>
</tr>
...
</table>
Navigating to "first.aspx#row1" will now load first.aspx and then jump to the row with the id "row1". It's probably not exactly the same position as before, but you're jumping directly to the edited row.
Using jQuery I want to be able to click an element which will also checks it's related radio button. I had this working fine until we had to add runat="server" to the radio buttons.
When I apply this it prevents my jQuery function from working and I cant figure out how to get round it, heres a simplified version of the code:
HTML
<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />
jQuery
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
I've found out that when its converted to a .net control instead of checked="checked" (as it would be usually) it is just Checked, so I changed that but on inspecting the DOM in multiple browsers, none of my radio buttons are being checked :-(
Are there any other ways I can use jQuery to check a radio button that has runat="server"?
Cheers!
I think that Your problem is that the id of the input is no longer sector1Radio but rather ctl00_sector1Radio or something similar. This happens if Your input control is inside e.g. a ContentPlaceHolder control (when using master pages).
Can You check the generated HTML code (in the browser) to verify if this is the case? What is the id of the input control?
If this is the case, You need to generate Your js jQuery code
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
from codebehind so that SomeThingElse is replaced with the ClientID of the control.
.is(':checked') works on ASP.NET radiobuttons and checkboxes
$('#SomethingElse').click(function() {
$('input[title=Sector1]').is(':checked');
});
try using
$('input[title=Sector1]').attr('checked',true);
and
$('input[title=Sector1]').attr('checked',false);
or maybe
$('#SomethingElse').click(function () {
$('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});
As suggested by others, ASP.net will not generate the html with the same ID you specified.
Quick solutions:
You can keep using the id but asks jquery to check the end of the id instead, example:
$("input[id$='sector1Radio']").is(":checked");
Or check against the title and name as Nico suggested
Use the class element which is not effected by ASP.net, example
<input type="radio" runat="server" id="sector1Radio" class="sector1Radio" name="SectorGroup" title="Sector1" />
$("input.sector1Radio").is(":checked");
Best thing is to view the generated html code and see what id is giving you, then you can use the appropriate jquery selector, because the generated id could have different extensions depends whether you use master pages, etc.
If you are using a MasterPage or are creating the controls dynamically then it is probable that the control ID's are being renamed #SomethingElse becomes #MainContent_SomethingElse.
The easiest way to check this is to use the WebDeveloper plugin for Firefox or Chrome.
Go to Information -> Display Element Information and then select the object in question. It will give you it's ID, class, as well as ancestor and children information.
Check to see if the ID is being changed dynamically by the .NET.
If that's the case:
To prevent this, in the server side code you can use the following attribute to create static ID's
SomethingElse.ClientIDMode = ClientIDMode.Static;
You can then reference in you jQuery
$('#SomethingElse').click(function() {
if ($('input[title=Sector1]').attr('checked')) {
//execute event
});
I think what happens is that in ASP NET Checkboxes and Radio Buttons generates an "input" and a "span" after the input. So you need to select the input only.
You can try:
$('.classname input[type=checkbox]').each(function() {
this.checked = true;
});
Two things here: finding the control and executing the check. In ASP.NET, your control's actual ID and name will end up getting changed based on the runat="server" containers in which it appears, even if those containers have no Ids.
Rendered ASP.NET controls always end with the same name as you started with, so a tag like:
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
might end up being rendered as
<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />
You can find this element, even after it is rendered if you use the "contains" selection syntax in JQuery. So to find this element, once rendered, you could use:
$("input[type='radio'][id*='$sector1Radio']")
This syntax will find any radio button whose id contains "$sector1Radio"
Once you have the element, you can check or uncheck it using the following code, which you'd call from the click event of your other element.
// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);
// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);
One last thing... if you just want a block of text to click the button when pressed (wrap it in an tag and set the AssociatedControlId property to the control name of your radio button, like this...
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>
I had the same problem. To use the jQuery UI to make your radiobuttons nice one has to write:
<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>
<script type="text/javascript">
$('#radio').buttonset();
</script>
The id of the input tag must be correctly referenced by the label's for attribute. If the webpage is inside a master page then the id of the input tag will be modified to something like ctl00_Something_radio1, and suddenly the label's for attribute no longer references the input tag. Beware of this in ASP.NET!
Problem
I am using jQuery UI dialog to show a dialog box with some ASP.NET textboxes and a button in it. However as jQuery moves the div for the dialog box outside the form I need to re-move it back to the form myself (see this for details why), so that ASP.NET still works. This moving is causing a problem, where the field does not get focus if called.
If you look at the sample below the line labeled Line B should set the focus, however the line labeled line A breaks that. If I comment out line A it works. No matter where I move line B to (before dialog, line A etc...) it still fails to set focus.
By setting focus I mean the cursor is in the text box flashing ready to type.
Question how do I set the focus in this scenario?
Samples
HTML body sample
<body>
<form id="form1" runat="server">
<div id="popup">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
jQuery sample
$(document).ready(function() {
var dlg = $("#popup").dialog();
/*Line A*/ dlg.parent().appendTo(jQuery("form:first"));
/*Line B*/ $("#TextBox2").focus();
});
Try using setTimeout("$('#TextBox2').focus();",100);, for dialog and other methods of the jQuery UI sometimes it take few seconds to actually perform the tasks we assign by code.
Hope this helps. This workaround has helped in many of my applications.
I think the problem is that you are moving the popup and calling focus before the dialog is fully created.
Try using the dialog's open event instead:
$(document).ready(function() {
$("#popup").dialog({
open: function(){
$(this).parent().appendTo(jQuery("form:first"));
$("#TextBox2").focus();
}
});
});
It works in FF but not in IE7. I have figured out 2 work arounds. If you don't reference the textbox by name but by position, or for some reason if you set the focus twice.
The first:
$("input:text:second").focus();
The second:
$("#TextBox2").focus().focus();
you could also class the text box, as asp.net mangles control ids to avoid naming conflicts.
$(".mytextbox").focus();
as an example.. this of course defeats the purpose of semantics but semantics dont mix well with webforms.