This is my DOM element. Data is being fetched from backend and I am using *ngFor to display data. What I want it on click of that edit button I want the respective row's text to have an input tag and the edit button to change to save button. And on clicking save button the input should disappear.
Below are the html code and image of my DOM element. Right now on the click of edit button I am just toggling editable to true or false but it's not working either.
<span *ngFor="let body of myLinkBody;let last=last" class="myLinkBody" [class.myLinkBodyLast]="last">
<a [href]="domainURL+body.href" contenteditable="editable">{{body.value}}</a>
<div id="editLinkButton"><a (click)="edit($event,body)"></a> </div>
<div id="deleteLinkButton"><a></a></div>
</span>
Try setting a new property to each object in myLinkBody array to maintain the current state whether its being edited or not.
myLinkBody.map(body => { body.currentState="edit"; return body});
and use an extra tag input field use [(ngModel)].Use [hidden] on both achor tag and input tag ,show and hide them based on current state.
<span *ngFor="let body of myLinkBody;let last=last;let i=index" class="myLinkBody" [class.myLinkBodyLast]="last">
<a [href]="domainURL+body.href" [hidden]="body.currentState=='save'">{{body.value}}</a>
<input type="text" [(ngModel)]="myLinkBody[i].name" [hidden]="body.currentState=='save'"/>
<button (click)="edit($event,body,index)">{{body.currentState}}</button>
<div id="deleteLinkButton"></div>
</span>
In edit function
edit(event,body,index){
if(body.state == 'save')
this.myLinkBody[index].state='edit';
else
this.myLinkBody[index].state='save';
.....your code here
}
Example stackblitz :https://stackblitz.com/edit/angular-5hrmfv
I have implemented a basic snippet, that will display sample data as list using *ngFor, where the fields can be edited by clicking the edit button.
Check out the snippet here: https://stackblitz.com/edit/angular-rmvkat
Live URL : https://angular-rmvkat.stackblitz.io/
Related
I am trying to fix an accessibility defect in an Angular project at work. When a page loads and I start to tab through the page, the first element that is visible in the form is read twice. My code is something like below
<form [formGroup]="form" role="form" attr.aria-label="Edit Form" novalidate>
<div class="form-row">
<div class="col-md-9 col-sm-12 col-lg-9 paddingLR0">
<!-- Hidden code not rendered due to ngIf=false -->
<div role="region" attr.aria-label="Edit button region" *ngIf="viewMode">
<!-- Hidden elements not rendered due to ngIf=false -->
<button *ngIf="isEditable" [disabled]="!canEdit" type="submit" (click)="enableEdit()">
Edit
</button>
<div class="back-header">
<a tabindex=0 (keyup.enter)="back()" (click)="back()" (mouseover)="changeBackIconOnHover('back-region-top')" (mouseout)="changeBackIcon('back-region-top')" id="back-region-top">
<img src="{{pathImg}}/back_black.png"
<span class="margin-left10">Back</span>
</a>
</div>
</div>
</div>
</div>
<!-- More code here -->
</form>
If you see the code the first element that is visible is the Edit button, nested in a div with role as region, which is in turn inside a form with role form. When I tab through the page instead of just reading the button just once Edit button JAWS reads Edit Form form region. Edit Button on first tab, then reads Edit button region. Edit Button. There are no tabindexes on the parent elements. Removing the role attribute and the corresponding labels does not work. How do I only make jaws read the edit button once?
The above problem was occuring because of an empty div which had a tabindex=0.
So in the code snippet above I had a commented line
<!-- Hidden code not rendered due to ngIf=false -->
That referred to multiple divs which are warning, success and error messages related to the form in my actual code. Each of those divs have an ngIf for conditional rendering and a tabindex=0 to make it tab accessible. Except one of those divs simply had a tabindex but no ngIf. So it was always rendered. Like below.
<div tabindex=0>
<div ngIf="condition"> {{errormessage}}
</div>
</div>
If JAWS tabs onto an empty element it reads the previous labels. I removed the outer div which was remaining empty and the problem is solved.
I am trying to use one of the 'checkbox hacks' in which an accordion opens or closes when the user clicks on a label that toggles a checkbox.
The issue is that the webpage I am working on does not use labels, but rather h4 elements. So the user would be clicking on the h4 element to open/close the accordion. As far as I know, making this work directly is not possible. Or is it? I thought that maybe I could overlay an empty label over this h4 element, so that the user would be clicking on the label. Is that possible? Or is making a javascript accordion the only option here?
Here's a suggestion how to do it:
<body>
<!-- Add cursor : pointer to show the user he can click -->
<h1 onClick="myFunc()" style="cursor: pointer;">test</h1>
<script>
// Do something here
function myFunc(){
console.log("title clicked")
}
</script>
</body>
Well the real reason i need to know this is due to the working of my modal
In my modal's JavaScript code , its defined to trigger open modal window only when the class is "modal-button"
let open_modals = [];
$(function() {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
Below is the html code which works perfectly along with this
<!-- Trigger/Open The Modal -->
Click Me
Although i want the text "Click Me" to not inherit the properties of class "modal-button" but still have that class ,so modal opening functionality is not broken. Hence i tried something like this...
<!-- Trigger/Open The Modal -->
<div class="modal-button">
<span class="text">Click Me</span>
</div
But it is breaking the modal opening functionality probably because the text-"Click Me" is not inhereting class "modal-button" due to the span tag
Hence i think i have to find an alternative of span tag for styling inline elements
Hopefully someone can give me a better approach to this
Thanks in advance
There's nothing stopping you from having two classes on the same element like this:
Click Me
The second class listed will take priority over the first for styling, but the element will still be found by any CSS query that looks for the first class.
I have something like this:
http://jsfiddle.net/D2RLR/5649/
And it works fine for checking checkboxes from a dropdown menu in bootstrap. But the problem is that this segment of code:
<a href="#">
<input type="checkbox">
<span class="lbl"> Every day</span>
</a>
Will cause the page to reload if someone clicks on the text in the label ('Every day').
I don't want the reload behavior. I tried to change the anchor to a span tag, but it loses the style of onhover, highlighting the entire row together. Also tried to take out the '#' from the anchor and simply make it:
<a href=''>
but the checkboxes don't seem to be responsive to clicks.
Does anyone have any good solution to this?
To your dropdown-menu add the class dropdown-with-checkbox (or another more qualifying class name)
then add the following script:
$(function(){
$('.dropdown-with-checkbox a').click(function(e) {
// ?: Are we clicking a checkbox inside the a-tag?
if(e.target.type === 'checkbox') {
// Yes, but we do not want to prevent the default checkbox behaviour
return;
}
// Do not reload the page when clicking the a tag
e.preventDefault();
})
});
Sidenote 1:
Adding e.stopPropagation(); in the click handler will prevent clicks from propegating up to the 'dropdown' handler, closing the dropdown on click.
Sidenote 2:
You should also structure your checkboxes like this:
<label>
<input type="checkbox"> Label
</label>
This way, clicking the lable will toggle the checkbox.
You could also go with the span approach and create a css class which changes the cursor on mouse over.
.pointer {
cursor: pointer;
}
That way you keep the mouse over effect but don't have to worry about it linking somewhere or reloading the page.
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>