I want to show loader on icon/button click. In foreach loop, there is a list with delete icon. While click delete icon i want to show loader near that particular icon. I am using like below.
Html code:
<span id="deletefile">
<i class="fas fa-trash-alt"></i>
<div class='loader' style='display:none'></div>
</span>
Jquery code:
$('span#deletefile').click(function() {
$('#deletefile').find('.loader').show();
}
Since it is a loop, the loader visible near each delete icons.
How to show loader at particular click icon. Pls give me idea
Edited as per Satya S answer. It triggers always first icon. Where I am doing wrong?
If you are creating that html in a loop you will have multiple elements with the same id which is invalid.
Instead, use a class.
<span class="deletefile">
<i class="fas fa-trash-alt"></i>
<div class='loader' style='display:none'></div>
</span>
$('span.deletefile').click(function() {
$(this).find('.loader').show();
}
Add id attribute to your button. Then you should be able to do -
$('#delete-button-id').find('.loader').show()
This is will find the child loader to each delete button and show that.
Make sure the loader is a child of the delete button with the id.
Related
Frequently I'm faced with the task of using material icons and turning them into interactive buttons. For instance, there might be an icon that when clicked reveals text and rotates. When it's clicked again it rotates back to the original position and the text disappears.
<div onClick={toggleButton()}>
<i
role="toggle button"
aria-pressed="true"
alt="Toggle text"
class="material-icons"
>
toggle_off
</i>
Random text...
</div>
<div onClick={toggleButton()}>
<i
role="toggle button"
aria-pressed="true"
alt="Toggle text"
class="material-icons"
>
toggle_on
</i>
</div>
-an if conditional would render either of these divs based on pressed or not pressed
Typically, I handle this button adding a role, aria-state, and alt text to the material icon and change the aria-state when clicked. However, I always feel that I might not be doing this as effectively as I should.
What is the proper way to make something like an icon used as a toggle button accessible?
(I know that best practice for WCAG (web accessibility) is to use a button component, but because of the unique nature of material icons that's not possible.)
You'll need to change a few things:
role="toggle button" should be role="button"
Beginning with aria-pressed="true" is fine if your default button state is pressed. Otherwise, its initial value should be false
Get rid of alt, as it doesn't belong here. If you're including text in your icon (as in your example code), you don't need to replace anything. Otherwise, use aria-label and put your button text there
Add tabindex="0" so that your icon can be reached by keyboard
Event handling
To make your icon behave like a real button, you'll also need to listen for keys like the space-bar and enter key. These keystrokes should be treated as clicks, as a real button would.
const el = document.querySelector('my-icon');
el.addEventListener('keypress', handleKeyPress);
el.addEventListener('click', handleClick);
function handleClick() {
// Update aria-pressed
}
function handleKeyPress(e) {
// Handle space-bar and enter key
}
So, in the end, your toggle icon button might look something like this:
<i
role="button"
aria-pressed="false"
class="material-icons"
>
Button text
</i>
or (sans visible button text):
<i
role="button"
aria-pressed="false"
aria-label="Button text"
class="material-icons"
></i>
I've made a page with bootstrap, and i would like to have an action when the user clicks on the row. This is easy, I put ng-click on the div that is the row.
However, inside the row elements I've a link, and I would like to avoid the firing of the ng-click when the user clicks on the link (in that case it should open the url of the link)
this is a picture of the row. Bascially if the use clicks anywhere except the link simbol it should filre the ng-click, if it clicks on the link simbol it should open the url.
is this possible?
PS: I tried to put ng-click on each item except the href element, but the href element is inside a column within other things, and if I don't put the ng-click on the column it will not fire if the use clicks on the empty space of the column.
<div class="col-sm-8" >
</i> |
<span class="h5 small">{{club.description}}</span>
</div>
$event.stopPropagation() on ng-click of anchor tag to bubble up event.
Markup
<div class="col-sm-8" ng-click="myMethod()">
<i class="fa fa-link"></i> |
</div>
You have to stop the event propagation from anchor to its parent div which has the click event handler.
<div class="col-sm-8" ng-click="onRowClick()">
</i> |
<span class="h5 small">{{club.description}}</span>
</div>
JS
$scope.onLinkClick = function (e) {
e.stopPropagation();
}
Try adding ng-click="$event.stopPropagation();" to your anchor tag
<i class="fa fa-link"></i>
I'm making a list app and I'm and trying to add a remove button, so that you can remove lists and list items.
My question is, how do I add this button within a list item? I want the whole list item to be clickable, but when I press the span element i don't want the anchor tag to activate, only the ng-click event.
<div class="list-group">
<a href="#/list" class="list-group-item">
{{listName}}
<span class="glyphicon glyphicon-remove pull-right" ng-click="delete()"></span>
</a>
</div>
I'm using bootstrap, feel free to suggest other ways to add this remove button.
You Can add this JQuery code:
$(a).click(function(){ return false;});
First here is my Plunker code: http://plnkr.co/edit/NAH3ePyZdQePbB9EdOzW?p=preview
I'm trying to change the icon from icon-refresh to icon-spinner when the button is clicked but for some reason it's not working. I am pretty new to HTML so I believe there might be a syntax error somewhere but I'm stumped.
Your document.getElementById("something").innerText = "Loading..."; command is replacing all the contents of the tag, including the i tag. You can wrap your text in a span and then target the innerText of the span:
<a href='#' onclick="load()" id="something" class="buttonLink">
<i id="changeThis" class="icon-refresh"></i> <span id="button-text">Button</span>
</a>
javascript:
document.getElementById("button-text").innerText = "Loading...";
I have been using Bootstrap for a while now and love it. Saves me a bunch of time. I just started with KnockoutJS and as it happens, I have to combine the two at a rather granular level. My Knockout object(s) are filling a results table. When I just want the values (like Name) it is working great. However, I want to put an icon (icon-pencil for you Bootstrap people) in front of my link so it stands out as something to edit. I am using ASP.Net (not MVC) but I suspect that is not an issue.
Here is some code that works (but has no icon):
<asp:LinkButton ID="lbtEditGenerator" runat="server" data-bind="text: GeneratorName, click: function() { EditGeneratorClick(GeneratorID) }"></asp:LinkButton>
However, I want to add the following code just in front of the "GeneratorName" to get me the pencil icon. I need it to be within the text property so it is part of the LinkButton:
<i class='icon-pencil'></i>
Combining them in the bind-data (as follows) throws a parsing error:
<asp:LinkButton ID="lbtEditGenerator" runat="server" data-bind="text: <i class='icon-pencil'></i> GeneratorName, click: function() { EditGeneratorClick(GeneratorID) }"></asp:LinkButton>
Aside from creating a new property on my object that combines the two values, is there a way to do this with the Knockout binding?
Have you tried something along these lines:
<asp:LinkButton ID="lbtEditGenerator" runat="server" click: function() { EditGeneratorClick(GeneratorID) }">
<i class='icon-pencil'></i>
<span data-bind="text: GeneratorName"></span>
</asp:LinkButton>
Alternatively, you can put the <i> element before the <asp:LinkButton>. The solution above allows you to click either on the icon or on the text to trigger the button.