I'm trying to set a label to a link to open an image.
I was using asp.net in the code behind to do this:
lblFile1.Text = "View File";
But now I need to change this to JavaScript, so when they click link the label it opens the link.
I tried this but the label doesn't even display:
document.getElementById('lblFile1').value = "View File";
I'm using <asp:Label runat="server" ID="lblFile1"></asp:Label>
The link did work when I was using it in the code behind but it's not working in JavaScript.
Change
document.getElementById('lblFile1').value
to
document.getElementById('lblFile1').innerHTML
This allows the contents of your label (an HTML span) to interpret the HTML link you place inside.
Also check your output because ASP.NET may be changing your asp:Label ID at output. Setting the ClientIDMode to "static" will solve the issue. Make sure your chosen ID doesn't conflict with any other nodes having the same ID.
Related
Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
From a list of names i dynamically create anchor tags on an aspx form page. The result of each is as follows with different names/IDs/titles.
From a list of names i dynamically create achor tags on an aspx form page.
<a target= href="mailto:johnbrown#site.net" onclick="updateSql(document.getElementById('PersonJB'))" runat="server" id="PersonJB" title="JB">John Brown</a>
Java function updateSql is
function update(passLink) {
/* alert("this dialogue has been invoked through codebehind."); */
document.getElementById('<%= btnUpdateSql.ClientID%>').click();
}
btnUpdateSql is defined hidden
<asp:Button ID="btnUpdateSqlt" runat="server" Text="Button" CssClass="hidden"/>
It all seems to work. except I want the click event to be aware of the different link that was clicked.
What I want to achieve: Update btnUpdateSql text with the ID or title of the passed link before called the click event in the javascript function.
How can I set the button text in the Java function? Or how can i use another hidden field?
The purpose being to update SQL table in the click event using the initials as a key.
First of all, multiple links triggering a button click event under the hood is very fragile.
Why not use LinkButton since you are posting back to server anyway.
The advanatage is LinkButton has CommandArgument and CommandName. All links can use same Common Event, and you can see which link trigger the event by looking at the CommandArgument.
If you do not plan to postback to server, you will need to redesign the application to use Ajax. It is out of the scope of original question.
Iv tried many things (JS/Jquery) to disable this AsyncFileUpload but none are working...please advise..
<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
OnClientUploadComplete="ajaxUploadImage_ClientUploadComplete" runat="server"
ID="ajaxUploadImage" Width="400px" UploaderStyle="Modern"
CompleteBackColor = "White"
UploadingBackColor="#CCFFFF" ThrobberID="imgLoader"
OnUploadedComplete = "ajaxUploadImage_OnUploadComplete"
OnClientUploadStarted="AssemblyFileUpload_Started"
/>
var upload = $$('ajaxUploadImage');
upload.enableSelection('false');
var upload = $$('ajaxUploadImage');
upload.enableSelection('false');
upload.disableSelection();
document.getElementById("ctl00_MainContent_MapUserControl_ajaxUploadImage").disabled = true;
So...iv tried using the ID assigned by me..iv tried using the ID assigned in the browser....what am I doing wrong? user can still click of the text box or the select button and the pictures folder pops up, allowing the user to select an image for upload
should note that iv also tried disabling it from code behind
ajaxUploadImage.Enabled = false;
Have also tried setting disabled="true" inside the control, and checking the control in developer tools it is disabled, but I can still click on the text box or button and the pictures folder opens
The control emits its own markup and is hard to manage.
You can try set Visible=false, because its logic runs every time the page is loaded and the control is visible.
I have been putting my head into the disabling part and it seems we can surely disable the AsyncFileUpload control.
The trick is, ajax toolkit re-assigns the ids to the its controls, so whatever your id is, it will re-assign a new id to it even if you are using <%= control.ClientID %> this approach to get the names of the control.
So, I would suggest you inspect the element in the browser and copy the element ID from there.
My Scenario:
This was my control in the markup:
<asp:AsyncFileUpload CssClass="custom-file-input" ID="fileupload" runat="server" OnUploadedFileError="fileupload_UploadedFileError" OnUploadedComplete="fileupload_UploadedComplete" />
Notice, My control's ID is fileupload. And this is how I was disabling it before:
$('#<%= fileupload.ClientID %>').attr('disabled', true);
Which obviously never worked because $('#<%= fileupload.ClientID %>') this returned me the ID as #fileupload which is not correct because originally, ajaxtoolkit had modified it from #fileupload to #fileupload_ctl02 so, I had to hard code the ID in my javascript to get it working. e.g:
$('#fileupload_ctl02').attr('disabled', true); // I am using an older version of jQuery,
For newer versions of jQuery, you would disable it using the prop() method instead.
JS
document.getElementById('fileupload_ctl02').disabled = true;
Hope it helps someone.
I have a set of server side combo boxes in a table. Based on client events, I need them to appear or disappear. I've tried the following with no success:
document.getElementById("cboToothNumber").style.visibility = "hidden";
$("#cboToothNumber").hide()
Any ideas? Also, this will need to work from a js file
You don't want the ASP.NET ID, you want the client id, so try
$("#<%=cboToothNumber.ClientID%>").hide()
From a JS file, this won't work. You can use the same code to get the ClientID and set it as a variable or pass it into a function in the Javascript file though.
Have you checked the ID of the combo boxes once the page has rendered? The Id of the element might be changing due to it being serverside.
If you are using .net 4 - there is a way to disable the ClientId by setting the ClientIdMode.
<asp:Label ID="Label1" runat="server" ClientIDMode="[Mode Type]" />
Check out these links:
http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx
http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx
When I created a label I set it's display to none in the designer.
<asp:Label ID="label1" runat="server" style="display:none;" Text="LABEL" asp:Label>
I use javascript to turn the label visible by:
var lbl = document.getElementById('label1');
lbl.style.display="";
WHen I do this the space is created where the label would be on the form but the label itself doesn't show up. I have tried
lbl.style.display="inline";
lbl.style.display="block";
just to see if the label would show up. Still nothing though. Just the extra space where the label would be is created.
You were saying
WHen I do this the space is created where the label would be on the form but the label itself doesn't show up. I have tried
That makes me believe that somewhere in your CSS you may have visibility set to hidden. That normally covers the space of the element, but doesn't show it. The display controls whether or not the space is preserved for the element.
Are you certain you have the control ID correct? Unless you set ClientIDMode to Static, the actual control ID will probably be something much longer than the ID you specify. Check the control's ClientID property.