This is my function that takes the id from my button and changes the text:
var modal_button_update = document.getElementById("modal_button_text");
if (modal_button_update.innerHTML === "Add") { modal_button_update.innerHTML = "Update"; }
It's working fine with this button (Add becomes Update)
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>
But for some reason it does not change anymore if I try to add a font awesome icon:
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>
What could be the cause?
I ran your code. It seems the problem is that you are checking if your modal_button_update button's innerHTML is equal to Add. The original button:
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>
works because the innerHTML of your modal_button_update is exactly 'Add', but your modified modal_button_update: <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button> does not work because the innerHTML is <i class="fas fa-save" aria-hidden="true"></i>>Add which is not equal (===) to 'Add'.
Here's three different ways I chose to solve this issue:
Remove the <i class="fas fa-save" aria-hidden="true"> element and place the font-awesome icon inside the button class like: <button type="button" class="btn btn-primary save_button add_group fas fa-save" id="modal_button_text">Add</button>
`
Alter your Javascript to look something like: var modal_button_update = document.getElementById("modal_button_text"); if (modal_button_update.innerHTML.includes("Add")) { modal_button_update.innerHTML = "Update"; }
Here the button checks to see if the innerHTML contains 'Add'.
Keeping the font-awesome icon:
In the two solutions above, your Javascript code will strip the button element of the font-awesome class when successfully changing the innerHTML to 'Update'. It is, imo, easier to use jQuery to alter the value of the button to solve this issue like:
---HTML---
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>
---Javascript--
if ($('#modal_button_text').html().includes("Add")) {
$('#modal_button_text').html("Update");
}
If your intent is to keep the icon no matter the state of the text (i.e., Add or Update), I would personally enclose the word "Add" in a span as follows:
HTML:
<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>
Then it is just a matter of whether you use jQuery or not as to which of the following will work for you.
JavaScript:
Change value based on current text:
if(document.getElementById("modal_button_span").innerHTML === "Add") document.getElementById("modal_button_span").innerHTML = "Update";
Toggle value when the button is clicked based on current text:
document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";
jQuery:
Change value based on current text:
if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");
Toggle value when the button is clicked based on current text:
$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");
By enclosing the word Add in a span, you are free to do whatever you need to the text without disrupting the rest of the button or save icon.
Related
I have a button
<button class="mx-2" mat-button type="button" (click)="close()"
name="buttonClose">
<mat-icon>cancel</mat-icon>
{{t('commonActions.cancel')}}
</button>
where i have to show the whole button when on PC but only show the button without commonActions.cancel when on mobile.
I use isMobile() function for that but i dont know where to place the ngIf, so that only the text gets added/removed, not the button or icon
You need to put the text in a text tag like (span, p ... ) and add the ngIf inside it , here's an example :
<button class="mx-2" mat-button type="button" (click)="close()"
name="buttonClose">
<mat-icon>cancel</mat-icon>
<span *ngIf="!isMobile()" >{{t('commonActions.cancel')}}</span>
</button>
your best option is to use <ng-container> in this case:
<ng-container *ngIf="!isMobile()">{{t('commonActions.cancel')}}</ng-container>
Following code consists of html part.
I need to change the color of button of a particular row on click of it after all values in table body are validated
This code changes the color of button on click of it before validation.
<tbody>
<tr data-ng-repeat="val in finalData[0]" ">
<td><button type="button"
ng-click="storeTicketKey(val.TicketKey,val.clicked = !val.clicked)" class="btn btn-primary"
ng-class="{'btn-danger': !val.clicked, 'btn-success': val.clicked }"
data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>
<td>{{val.Status}}</td>
<td>{{val.AssignedGroup}}</td>
<td>{{val.AssignedTo}}</td>
<td>{{val.L1}}</td>
<td>{{val.L2}}</td>
<td>{{val.L3}}</td>
<td>{{val.L4}}</td>
<td>{{val.L5}}</td>
<td>{{val.AssignedTo}}</td>
<td>{{val.ResponseSLAStatus}}</td>
<td>{{val.ResolutionSLAStatus}}</td>
<td>{{val.Region}}</td>
<td>{{val.SLABreachReason}}</td>
</tbody>
In the scenario you provided a solution would be removing the ng-class attribute and instead creating a (click)= "checkFields(event)" on the button and in your .ts you can create the function which will check the validity of the fields and change the class of your component.
Your .html:
<td><button type="button" ng-click="storeTicketKey(val.TicketKey,val.clicked = !val.clicked)" class="btn btn-primary" "checkFields(event)" data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>
Your .ts:
checkFields(event: any){
//Check if the fields are valid, in this case I only check if they exist
if(!val.Status){
return;
}if(!val.AssignedGroup){
return;
}
.. and so on for all the fields you want to test
//If all variables are valid and the function gets to the end
//You change the class of the button
event.target.className = 'btn-success';
}
<tr data-ng-repeat="val in finalData[0] track by $index ">
<td><button type="button"
ng-click="storeTicketKey(val.TicketKey, $index)" class="btn btn-primary" ng-class="{'btn-success': $index=== isActive}"
data-toggle="modal" data-target="#myModal">{{val.TicketKey}}</button></td>
<td>{{val.Status}}</td>
<td>{{val.AssignedGroup}}</td>
<td>{{val.AssignedTo}}</td>
<td>{{val.L1}}</td>
<td>{{val.L2}}</td>
<td>{{val.L3}}</td>
<td>{{val.L4}}</td>
<td>{{val.L5}}</td>
<td>{{val.ResponseSLAStatus}}</td>
<td>{{val.ResolutionSLAStatus}}</td>
<td>{{val.Region}}</td>
<td>{{val.SLABreachReason}}</td>
</tbody>
$scope.valClicked=false;
$scope.isActive = "";
$scope.tempTicket="";
$scope.storeTicketKey = function(ticketKey,str) {
$scope.finalTicketKey=ticketKey;
$scope.tempTicket = str;
// $scope.valClicked=val;
}
$scope.isActiveButton = function(){
$scope.isActive = $scope.tempTicket;
}
I am using angular 2 and I have two buttons I want toggle class between two buttons but. Below is my code
<button class="btn rounded" [ngClass]="{'btn-default': !clicked, 'btn-primary': clicked}" (click)="clicked = !clicked">
<i class="fa fa-long-arrow-up"></i>
</button>
<button class="btn rounded" [ngClass]="{'btn-default': !clicked, 'btn-primary': clicked}" (click)="clicked = !clicked">
<i class="fa fa-long-arrow-down"></i>
</button>
My problem is I want to toggle class but at time only one button can select and other condition is both buttons can be deselect. On click of one button other button should be deselect and once you click on selected button that button should be deselect and I want to do this only using buttons. Please help
You can use this pattern which will work for any number of buttons:
In your controller, set up an array of buttons and a selectedButton variable
buttons= [
{class: "fa fa-long-arrow-up", name: "button1"},
{class: "fa fa-long-arrow-down", name: "button2"},
]
selectedButton;
toggleSelect(button) {
if (button == this.selectedButton) {
this.selectedButton = undefined
} else {
this.selectedButton = button
}
}
Then in your template populate the selectedButton on click, and set your class based on whether it is selected
<button *ngFor="let button of buttons" class="btn rounded" [ngClass]="(selectedButton == button) ? 'btn-primary' : 'btn-default'" (click)="toggleSelect(button)">
<i [class]="button.class"></i>
</button>
This way you could have any number of buttons and only one will ever be "selected" at a time
working example: https://stackblitz.com/edit/angular-v9zlaz?file=src%2Fapp%2Fapp.component.html
I have this piece of code in a ASP.NET MVC view:
<div ng-repeat="it in (#source)">
<button class="btn hvr-glow btn-success" >
{{it.name}}
<p ng-if="it.check==true"><i class="fa fa-check-circle-o" ng-click="it.check=false"></i></p>
<p ng-if="it.check==false'"><i class="fa fa-circle-o" ng-click="it.check=true"></i></p>
</button>
</div>
source is a list of objects of type ApplicationStatus, which contain a boolean field named check. I want to change the type of the font awesome icon on click. But I don't see the icons. Source is correctly loaded. Where is the problem ?
You can use ng-class for that. For example:
<i ng-class="{'fa fa-check-circle-o': check, 'fa fa-circle-o': !check}"
Here's another question related to ng-class
Note - a ternary operator would probably be best in your case
<div ng-repeat="it in source">
<button class="btn hvr-glow btn-success" ng-click="it.check = !it.check">
{{it.name}}
<p>
<i ng-class="{'fa fa-check-circle-o': it.check, 'fa fa-circle-o': !it.check}"></i>
</p>
</button>
</div>
I have this code:
<button type="submit" name="submit" class="btn green pull-right">
Potvrdi <i class="m-icon-swapright m-icon-white"></i>
</button>
How can I make Zend_Form_Element_Button with these attributes? (including tag, it is an icon that goes with the text "Potvrdi" as label on button)
I have done this so far:
$submit = new Zend_Form_Element_Button('submit');
$submit ->setLabel('Potvrdi')
->setAttrib('type', 'submit')
->setAttrib('class', 'btn green pull-right');
Thank you.
The quickest solution is to disable escaping for the label and include the HTML code directly in the label:
$submit = new Zend_Form_Element_Button('submit');
$submit ->setLabel('Potvrdi <i class="m-icon-swapright m-icon-white"></i>')
->setAttrib('type', 'submit')
->setAttrib('class', 'btn green pull-right')
->setAttrib('escape', false);
However, If you plan to use this type of button often in your source code, you should consider writing your own Zend_Form_Element (e.g. My_Form_Element_IconButton) that takes care of adding these tags.