How to show and hide buttons with bootstrap and angularjs? - html

I have a table which contains some data and some buttons which changes according to response and user.
Here's the table.
<div class="form-group">
<div class="col-lg-12 col-md-9">
<table id="basic-datatables" class="table table-bordered" cellspacing="0" width="100">
<thead style="text-align:center">
<tr>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Employee ID</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Employe Name</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Email</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Department</th>
<th rowspan="1" colspan="1" style="width:100px; text-align:center">Date Created / Joined</th>
<th rowspan="1" colspan="1" style="width:110px; text-align:center">Actions</th>
</tr>
</thead>
<tbody style="text-align:match-parent">
<tr ng-repeat="data in details = (FilterDetails | limitTo:itemsPerPage:(currentPage-1)*itemsPerPage)">
<td style="text-align:center">{{data.Employee.Empid}}</td>
<td style="text-align:center">{{data.Employee.Fname}} {{data.Employee.Lname}}</td>
<td style="text-align:center">{{data.Employee.Email}}</td>
<td style="text-align:center">{{data.Department.DeptName}}</td>
<td style="text-align:center">{{data.Employee.Date_of_join | dateFormat}}</td>
<td style="text-align:center; width:100px">
<div>
<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)">Generate</button>
<!--<button type="submit" class="btn btn-success pad btn-sm" ng-click="state = true" ng-hide="state">Generate</button>-->
<button type="submit" class="btn btn-warning btn-sm" ng-show="data.UserLogin.Status=='pending'">Pending</button>
<button type="submit" class="btn btn-default btn-sm" ng-show="data.UserLogin.Statuss=='pending'">Retry</button>
</div>
</td>
</tr>
</tbody>
</table>
<p ng-show="details.length == 0">No Users found.</p>
<div class="col-md-8 col-xs-12">
<uib-pagination total-items="totalEmployees" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination>
</div>
</div>
</div>
What I need to get done is that when the response comes from the JSON data the buttons have to change. Now according to this;
Generate button should show whendata.UserLogin.Status == ''(empty)
Pending button should show when data.UserLogin.Status == 'pending'
Retry button should show when data.UserLogin.Status == 'pending'
How do I achieve this. Help woud be appreciated.

You can use ng-show ng-hide or ng-if like below,
<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>
or
<button class="btn btn-default" ng-hide="data.UserLogin.Status != ''">Generate </button>
or
<button class="btn btn-default" ng-if="data.UserLogin.Status == ''">Generate </button>

You should go for ng-if instead of ng-show or ng-hide. Because in case of ng-show or ng-hide based on the flag the content is loaded in the DOM. so if u try to change the value of flag by using web developer of browser u can be able to see the actual content. But if u go for ng-if, the content is loaded at runtime only when the condition is true. so whenever u want a quicker performance you can go for ng-show or ng-hide but if we want runtime behavior u should use ng-if.

You can write code as below..
<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>
<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Pending </button>
<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Retry</button>

We can use ng-if,ng-show,ng-hide like
<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)" ng-if="!data.UserLogin.Status">Generate</button> <button type="submit" class="btn btn-success pad btn-sm" ng-click="Pending (data)" ng-if="!data.UserLogin.Status">Pending </button>
use ng-if ,it is efficient

Use below code in the success function of the API. This code will run after you get the response and the DOM is created.
$scope.$evalAsync(function(){
$timeout(function() {
// Here set the scope variable and it will work in ng-show
}, 0); // wait...
});
Note: Do not forget to add $timeout in the controller.

Related

Razor Page and Bootstrap, no space between links

I don't know why after adding the if statement a margin/space between my action links disappears. I'm pretty sure that a HTML looks the same with or without #if (User.IsInRole("Admin")) (from the admin perspective). I'm using bootstrap 4.1.
<section id="sec5">
<div class="container pt-5">
<div class="table-responsive-sm mb-3">
<table class="table">
<tr>
<th>Name</th>
<th class="text-right">Action</th>
</tr>
#foreach (var u in Model)
{
<tr>
<td>#u.Name</td>
<td class="text-right">
#if (User.IsInRole("Admin"))
{
#Html.ActionLink("Edit", "Edit", new { id = u.SpecialityId }, new { #class = "btn btn-secondary" })
#Html.ActionLink("Delete", "Delete", new { id = u.SpecialityId }, new { #class = "btn btn-danger" })
}
</td>
</tr>
}
</table>
</div>
</div>
</section>
E:
https://jsfiddle.net/xoduf1sp/5/
In your example both the second link follows the first link immediately.
If i add a linebreak between them in the html the usual inline element gap appears.
Maybe your if clause does somehow elimitate whitespace/linebreak characters between the two links?
Was:
<a class="btn btn-secondary" href="#">Edit</a><a class="btn btn-danger" href="#">Delete</a>
Should be:
<a class="btn btn-secondary" href="#">Edit</a>
<a class="btn btn-danger" href="#">Delete</a>
See http://jsfiddle.net/xoduf1sp/7.

Show Partial view in Bootstrap modal

I am creating MVC app and using Bootstrap Modal to give an opportunity to user to check input data, and to send those data to controller using Ajax. Modal window:
<div class="modal" tabindex="-1" role="dialog" id="myModal" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Check input data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
{
<div class="modal-body">
<table class="table">
<tr>
<td>Category name: </td>
<td><b>#Model.CategoryName </b></td>
</tr>
<tr>
<td>Date: </td>
<td><label id="SelectedDateTimeLabel"></label></td>
</tr>
<tr>
<td>Client name: </td>
<td><input type="text" name="ClientName" id="ClientName" value="#Model.ClientName" /></td>
</tr>
<tr>
<td>Client code: </td>
<td><input type="text" name="ClientCode" id="ClientCode" value="#Model.ClientCode" /></td>
</tr>
</table>
</div>
<input type="hidden" name="CategoryId" id="CategoryId" value="#Model.CategoryId" />
<input type="hidden" name="SelectedDateTime" id="SelectedDateTime" />
<div class="modal-footer" id="divChangeRegion">
<input type="submit" class="btn btn-info" value="OK" data-backdrop="static">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
And after pressing the submit button I execute controller's method which save inputed data in database and send back partial view, whcih I want to input in those Modal
Controller's code:
public ActionResult SelectReservationDateTime(ReservationTimeModel PartialViewModel)
{
...
return PartialView(newModel);
}
Partial view code:
#model EQueue.Data.Ticket
<div class="row">
<div class="col-md-4 offset-md-4">
<table>
<tr>
<td class="border" id="printThis">
You get ticket №<b>#Model.CodeTicket</b><br />
Category Name <br />
<b>"#Model.TicketCategory.NameCategory"</b><br />
</td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary text-center" value="Print ticket" onclick="printTicket('printThis')" data-dismiss="modal"></td>
<td><input type="button">
</tr>
</table>
</div>
</div>
<script>
function printTicket(partForPrint)
{
var printContents = document.getElementById(partForPrint).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
But I get new window instead of creating partial view in existing Modal, can anybody help me?
Firstly I would change this line:
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
To:
#using(Html.BeginForm(null, null, FormMethod.Post, new {id = "whatever"}))
Then have some jquery that uses the id of the form to check if it's been submitted. Once it has you should fire an ajax call to that method of yours that returns a partialview. To implement a partialview you need to specify a div where it will be place using an id and then in your success use this line of code to put the partialview into that div.
$("id of the div").html(result);

multiple deletion by using check box in angular 2

this is the code in html page, need code for both component and service please help for this problem ** multiple deletion by using check box in angular 2 **i posted only html code but i dont know code for both components and service here the code have using single deletions but i need multiple deletions
<div class="card-content table-responsive" *ngIf="this.pagedItems!=null && this.pagedItems.length > 0">
<table class="table">
<thead>
<tr>
<th class="text-danger" style="font-weight: bold">Sl NO</th>
<!-- <th class="text-danger" style="font-weight: bold">Date</th>-->
<th class="text-danger" style="font-weight: bold">Income/Expense</th>
<th class="text-danger" style="font-weight: bold">Payment Mode</th>
<th class="text-danger" style="font-weight: bold">Debtor</th>
<th class="text-danger" style="font-weight: bold">Remarks</th>
<th class="text-danger" style="font-weight: bold">Amount</th>
<th class="text-danger" style="font-weight: bold"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of this.pagedItems | paginate: { itemsPerPage: 500, currentPage: p }; let i = index" >
<td>{{i+1}}</td>
<!-- <td>{{item.date_of_entry}}</td>-->
<td>{{item.income_expense}}</td>
<td>{{item.payment_mode}}</td>
<td>{{item.creditor_fname}}</td>
<td>{{item.remarks}}</td>
<td>{{item.amount}}</td>
<td>{{item.entry_id}}</td>
<td><input type="checkbox" name="deletecheck"></td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit" class="btn btn-primary btn-simple btn-xs" (click) = "editSales({entryid:item.entry_id,InExp:item.income_expense,Amt:item.amount,Paymode:item.payment_mode,Debtr:item.creditor_id,Vehic:item.vechicle_no,Remarks:item.remarks})">
<i class="material-icons">edit</i>
</button>
</td>
</tr>
<button (click)="deleteSelected()">Delete</button>
</tbody>
</table>
<br>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
Add an array of selected items in the component:
selectedItems: Item[];
Add another button to (de)select items:
<button type="button" rel="tooltip" title="Select" class="btn btn-info btn-simple btn-xs" (click) = "selectSales({entryid:item.entry_id})">
<i class="material-icons">close</i>
</button>
In component:
selectSales(item) {
const indexFound = this.selectedItems.indexOf(selected => selected.id === item.id;
if (indexFound > -1) {
this.selectedItems.splice(indexFound, 1);
} else {
this.selectedItems.push(item);
}
}
deleteSelected() {
this.selectedItems.forEach(item => {
// delete each item
});
}

Make 2 buttons inside a table cell be next to each other

I have the following code :
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>
</button>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
</button>
</td>
They appear on 2 different lines.
How can I make them appear next to each other on the same line ?
I tried a few things with float and display but without success.
If I add that code in a snippet the buttons are next to each other, so it's hard to reproduce:
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>Button1
</button>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>Button2
</button>
</td>
</tr>
</table>
The buttons are already displayed as inline-block.
Maybe the table isn't wide enough; if so, You could try <td style='white-space: nowrap'>.
If you're using Bootstrap, try using classes like "pull-left". This will float both of the buttons left and bring them inline. Also check to be sure nothing is overriding the current display attribute.
<div class="pull-left">...</div>
<div class="pull-right">...</div>
Did you tried display: inline-block;?
However that seems unnecessary because two buttons in the same table cell will appear on the same line.
table,
td,
tr {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<td>
<button>Button1</button>
<button>Button2</button>
</td>
</tr>
</table>
What you need is just css display inline code, which can be use to format your button
form {
display: inline;
}
this displays an element as an inline element like span
Please see how to use <table> tag inside in <td> and get all button in line.
<table>
<td>
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs">Add</button>
</td>
<td>
<button class="btn btn-primary btn-xs">Edit</button>
</td>
<td>
<button class="btn btn-primary btn-xs">View</button>
</td>
</tr>
</table>
</td>
</table>

Element not being located by Xpath

I am trying to click on a button in a table row. The relevant HTML code is given below:
<div id="catalogItems" class="col-xs-12">
...
<table class="table table-condensed table-hover">
...
<tbody id="existingItemsList">
<tr id="item_3" class="info item" item_name="vegetables" role="form" item_id="3">
...
</tr>
<tr id="item_4" class="info item" item_name="pizza" role="form" item_id="4">
...
</tr>
<tr id="item_5" class="info item" item_name="Pastries" role="form" item_id="5">
<td>
<button onclick=".." class="btn btn-sm btn-info" type="button"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr id="item_6" class="info item" item_name="Burger" role="form" item_id="6">
...
I want to access the the button in the row with item_name="pastries" to run a test on it with Robot. My Xpath is given below:
xpath=//div[#id='catalogItems']//tr[#item_name=Pastries]//button[#class='btn btn-sm btn-info']
With this, however, the button in the first row (item_name="vegetables") is being selected by the Robot FW. How should I change the xpath to access the item_name="pastries" row? Please help!
I think this is because you have an issue here, please cover Pastries with '', so it looks like 'Pastries'
//tr[#item_name='Pastries']