I work on meteor with footable. I fill the table with a {{each}}.
I need to set a button in this footable, on a hidden column, like here. In my helper, I want to get corresponding object by writing:
'click #updateFilter': function(evt) {
console.dir(this);
}
It works as long as the button is not in a <td> tag or if the button is not on a hidden column. The following html code doesn't work, console.dir(this);give me something wrong.
<table class="table footable table-stripped toggle-arrow-tiny">
<thead>
<tr>
<th>ID</th>
<th data-hide="all">update</th>
</tr>
</thead>
<tbody>
{{#each filters}}
<tr>
<td>{{_id}}</td>
<!-- **********Problem is here*********** -->
<td>
<button id="updateFilter" class="btn btn-w-m btn-primary m-t btn-block">Update</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
How can I access to my object data in this case?
Related
I am trying to add the html tooltip in the table.
Included the below CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
Table code:
<table class="table table-bordered">
<thead *ngIf="serchResults">
<tr>
<th scope="col">Description</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of serchResults">
<td data-container="body" data-toggle="tooltip" data-html="true" title="<p>Mapped to: </p> <p>Abcd data </p> <p> Test data </p><p> Test data two </p><p> Test data 3</p>">
{{item.title}}
</td>
<td><input type="checkbox" id="{{item.code}}" name="{{item.code}}" value="{{item.code}}"></td>
</tr>
</tbody>
</table>
Jquery:
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip({
html: true,
});
});
</script>
Please have a look at the below screenshot. HTML tooltip is not working.
The tooltip HTML is not getting displayed properly in the table and inside for loop. Also applied CSS to "inner-tooltip" is not working inside for loop as well as without for loop.
First thing, avoid using jquery, you can use ngx-bootstrap.
Still, to fix this issue, you might need to run the below script after searchResults has been set. Reason, ngFor creates the DOM only after it has got the object on which it is iterating on. Once the serachResults object is available you need to run.
$(function() {
$('[data-toggle="tooltip"]').tooltip({
html: true,
});
});
Found the solution. It was simple.
<table class="table table-bordered" *ngIf="serchResults; else elseTable">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of serchResults">
<td>
<span data-container="body" data-toggle="tooltip" data-html="true" [tooltip]="tooltipData" placement="bottom">{{item.title}}</span>
<ng-template #tooltipData><p [innerHtml]="createTooltip(item)"></p></ng-template>
</td>
<td><input type="checkbox" id="item.code" name="item.code" value="item.code" (change)="fieldsChange($event, item)"></td>
</tr>
</tbody>
</table>
I have two grids of text boxes as shown here:
Input Boxes
The goal is that the user would fill out the above boxes and then as they fill out the below boxes, the above boxes auto update. ie if you entered 100 in the first box on the top and then 75 in the first box at the bottom, the first box would change to 25.
I tried to use onchange() but was unsuccessful. v-model seems to cause some problems with its two way binding, which makes sense. Any help is appreciated.
Here is the HTML that populates the input boxes:
> <form v-on:submit.prevent="addNewTask">
<table>
<thead>
<tr>
<th></th>
<th v-for="(column, columnIndex) in columns" :key="columnIndex">{{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, rowIndex) in records" :key="rowIndex">
<td>{{record.row}}</td>
<td v-for="(detail, index) in record.details" :key="index">
<input type="text" v-model="detail.value">
</td>
</tr>
</tbody>
</table>
<br><br>
<table>
<thead>
<tr>
<th></th>
<th v-for="(columnS, columnIndexS) in columns_Spend" :key="columnIndexS">{{columnS}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(recordS, rowIndexS) in records_Spend" :key="rowIndexS">
<td>{{recordS.rowS}}</td>
<td v-for="(detailS, indexS) in recordS.details_Spend" :key="indexS">
<input type="text" v-model="detailS.value_Spend">
</td>
</tr>
</tbody>
</table>
<br><br>
<button v-if="this.isEdit == false" type="submit" class="btn btn-success btn-block mt-3">
Submit
</button>
To start, split up the <td> nodes into child components, and emit their value on input change to the parent (main) component. Then use a method to calculate and set the remaining value for the "other" box child component (saved presumably inside an Array, you need to find the right element inside that Array in that method). The changed array will automatically update the other child component, as it is bound to the prop.
I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx
I have an HTML table which is built in the following way:-
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th> <th>Name</th> <th>Chamber</th> <th>District</th> <th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
Is it possible to create this table from javascript and in the HTML I just create a div and append the created table from javascript into this div. I tried placing the above content in a javascript variable and do an append but it did not work out. Is there a way to do this?? I think it did not work out may be because of the Angular JS variables. Correct me if I am wrong. I am pretty new to this.
In AngularJS use <div ng-bind-html="html-var"></div> and save the html-code in $scope.html-var.
For that you need to include <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
I have a table that I am trying to add an empty row to the end of. (Eventually I will add input boxes and allow saving)
<div ng-repeat="rule in model.rules">
<table id="" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered" style="margin-bottom: 2%">
<caption>{{rule.CategoryName}}</caption>
<thead>
<tr>
<th>Order</th>
<th>Rule</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subRule in rule.Rules">
<td>{{subRule.Sequence}}</td>
<td>{{subRule.Name}}</td>
<td><button type="button" ng-click="removeRule($subRule)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" ng-click="addRule(rule)">Add Rule</button>
</div>
Controller:
$scope.addRule = function (rule) {
rule.Rules.push({ key: rule.Rules.length });
console.log(rule.Rules);
};
Before the click:
After the click:
As you can see the empty TR is popped to the front of the array on the page but:
The array has the data in the right order, the screen just puts them in the front.
Why aren't the new tr's added to the end of the table?