I have a bootstrap table in which I dynamically display the results of a database search, using Angular's directive ng-repeat. Those results include an email field. I'm trying to display a button to the right of each email cell that would copy the email of that cell into the clipboard.
But that table has no unique Id field, and I don't know how to assign a different id to each row's email field, so that clipboard.js' "data-clipboard-target" knows it has to copy the email of the same row. Right now, every button copies the first row's email, independently of its own row, probably because it looks up the first appearance of the "#emailField" tag.
Any ideas ?
Here's my html file:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<input type="text" class="form-control" ng-model="query" placeholder="Chercher ici">
<br>
<br>
<h4>Results:</h4>
<table class="table table-striped table-responsive table-condensed table-bordered">
<thead>
<tr>
<th>Client</th>
<th>Contact</th>
<th>Email</th>
<th>Telephone</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td>{{ x.client }}</td>
<td>{{ x.contact }}</td>
<td>
<b id="emailField">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
<td>{{ x.telephone }}</td>
<td>{{ x.mobile }}</td>
</tr>
</tbody>
</table>
<h4>Query status:</h4>
<pre class="ng-binding" ng-bind="queryStatus"></pre>
</div>
<!-- Scripts-->
<script src="./bower_components/clipboard/dist/clipboard.min.js"></script>
<script>
new Clipboard('.btn');
</script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./controller.js"></script>
</body>
Try changing this section of markup:
<td>
<b id="emailField">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
to this:
<td>
<b id="emailField_{{$index}}">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField_{{$index}}">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
You can use the $index that is available inside ng-repeat to create a unique id for each email element.
Related
I have a DataTable and in this table is a cell, which contains multiple span-Elements, like this one:
<span class="btn btn-xs btn-info" data-room="1910" data-id="1" disabled>
<strong>unimportant description</strong>
</span>
I've just put the content of the cell into a variable:
var extras = roomstable.cell(closestRow,3).data();
How can I filter out the IDs in the data-id-Tags to put it into an Array?
I can provide the solution with jquery.
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
As argument you should define your cell, in your case it would be extras. Try to give yours roomstable.cell(closestRow,3). In my case was $('#dt').find('tr').eq(1).find('td').eq(0)
$(function(){
var table = $('#dt').DataTable();
arr_ids($('#dt').find('tr').eq(1).find('td').eq(0));
})
function arr_ids(celll) {
var ar = [];
celll.find('span').each(function(){
if ($(this).data('id')) {
ar.push($(this).data('id'));
}
});
alert(ar);
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<table id="dt">
<thead>
<th>aaaaaaaaaaaaaaaaaaaaaa </th>
<th>bbbbbbbbbbbbbbbbbbbbbbb </th>
<th>ccccccccccccccccccccc </th>
</thead>
<tbody>
<tr>
<td>
<span class="btn btn-xs btn-info" data-room="1910" data-id="1" disabled>
<strong>unimportant description</strong>
</span>
<span class="btn btn-xs btn-info" data-room="1945" data-id="13" disabled>
<strong>unimportant description</strong>
</span>
</td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<th>aaaaaaaaaaaaaaaaaaaaaa </th>
<th>bbbbbbbbbbbbbbbbbbbbbbb </th>
<th>ccccccccccccccccccccc</th>
</tfoot>
</table>
If the idea is to extract multiple buttons id's within a cell into an array, you would rather need to employ cell().node() method instead of cell().data().
That would let you grab all the buttons, turn that set toArray() and extract data-id attribute values:
var extras = $(roomstable.cell(closestRow,3).node())
.find('span.btn')
.toArray()
.map(span => $(span).attr('data-id'));
i'm trying to submit a modal to the controller, and doing a #foreach loop but when i try to send the id of the corresponding item's id, it sends the last value of the id, always = 13 :-
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach($categories as $category)
<tr>
<td>{{ $category->id }}</td>
<td>{{ $category->name }}</td>
<td>
<button class="myBtn btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
so when i press on the edit button it always sends the last value of the id not the corresponding one
<form action="{{ route('category.update', $category->id) }}" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="Category Name" name="name">
</div>
<button type="submit" class="bn btn-success">Save</button>
{{ csrf_field() }}
</form>
Write onlick function which ll set route to your form:
<button data-url="{{ route('category.update', $category->id) }}" class="myBtn btn btn-primary" onclick="changeRoute({{ route('category.update', $category->id) }})">Edit</button>
Write this in your script, but you need to give id to your form as myForm
<script>
function changeRoute(url) {
alert(url);
$("#myForm").attr("action",url);
}
$(".myBtn").click(function() {
var url = $(this).attr("data-url");
console.log(url);
$("#myForm").attr("action",url);
});
</script>
I keep on getting an unwanted span tag with and "s" in it when viewing in Chrome. I've searched online but I am still stumped. Help please?
Stop AngularJS inserting <span class="ng-scope"></span> using ng-include
Looked at that post. Similar problem but I think my issue is caused by something else. I am not using ng-include.
Let me know if I can provide more details!
Here is the code https://github.com/benhbaik/crm
Here is public/views/users/all.html and a screenshot of the issue below it.
<div class="page-header">
<h1>
Users
<a href="/users/create" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
New User
</a>
</h1>
</div>
<div class="jumbotron text-center" ng-show="user.processing">
<span class="glyphicon glyphicon-repeat spinner"></span>
<p>Loading Users...</p>
</div>
<!-- GETTING RANDOM SPAN TAG HERE w/ "s" -->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>_id</th>
<th>Name</th>s
<th>Username</th>
<th class="col-sm-2"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in user.users">
<td>{{ person._id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td class="col-sm-2">
Edit
Delete
</td>
</tr>
</tbody>
</table>
Here is a picture in dev tools.
There's a typo in your code:
<th>Name</th>s
So, I have a table that has multiple rows. I'm trying to select each row with a button; also, in the table heading, there's a select all button that will select ALL buttons in all rows. Here is the html:
<table class="table" ng-controller="myController">
<thead>
<tr class="info">
<th>Company Name</th>
<th>Address</th>
<th>
<input type="button" class="btn btn-default" id="select-all" data-toggle="button" value="Show All" aria-pressed="false">
</th>
</tr>
</thead>
<tbody ng-repeat="company in fieldData">
<tr>
<td>{{ company.name }}</td>
<td>{{ company.address }}</td>
<td style="text-align: center">
<input type="button" class="btn btn-default" id="select-one" data-toggle="button" value="Show" aria-pressed="false">
</td>
</tr>
</tbody>
</table>
How can I make a function using jQuery to change aria-pressed values of ALL rows? Any ideas?
are you using Angular js.
I have write a simple code, have a look
<div>
<ul ng-controller="checkboxController">
<li>Check All
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
Angular code here
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
});
set an ng-model on the "Select All" checkbox then use the ng-checked directive to select/deselect all.
<table class="table" ng-controller="myController">
<thead>
<tr class="info">
<th>Company Name</th>
<th>Address</th>
<th>
<input type="button" ng-model="selectAll" class="btn btn-default" id="select-all" data-toggle="button" value="Show All" aria-pressed="false">
</th>
</tr>
</thead>
<tbody ng-repeat="company in fieldData">
<tr>
<td>{{ company.name }}</td>
<td>{{ company.address }}</td>
<td style="text-align: center">
<input type="button" class="btn btn-default" id="select-one" data-toggle="button" value="Show" aria-pressed="false" ng-checked="selectAll">
</td>
</tr>
</tbody>
</table>
I want a button on-click I want to sort table with last week dates in angularjs. If this is my Angular view page.
<div class="form-inline has-feedback filter-header">
<input type="text" class="form-control" placeholder="Search" ng-model="search.$" />
<!-- <i class="glyphicon glyphicon-search form-control-feedback"></i> -->
<button class="btn btn-default btn-sm" ng-click="hideFilter=!hideFilter">Advanced Search</button>
</div>
<a class="btn btn-default btn-sm pull-right" href="/#/add">Add New</a>
</div> <!-- Grid filter ends -->
<table class="table table-striped table-condensed table-responsive table-hover">
<thead class="data-grid-header">
<!-- table header -->
<tr>
<th>
<span class="fa fa-th-large"></span>
Title
</th>
<th class="hidden-xs">
<span class="fa fa-calendar"></span>
Schedule Date
</th>
</tr>
<!-- table filter -->
<tr ng-hide="hideFilter">
<th><span ng-hide="hideFilter"><input type="text" ng-model="search.title"></span></th>
</tr>
</thead>
<tbody class="data-grid-data">
<tr ng-repeat="visit in visitsList | filter: dateRange | filter: search |orderBy:orderByField:reverseSort">
<td>{{visit.title}}</td>
<td>{{visit.startDate | date:medium}}
</tr>
</tbody>
</table>
dont know how to fill controller to sort last week .
do help thanks in advance