I'm using mustachesjs to add HTML code to my pages. I tried to add a row in a table using mustachejs but the td element or tr element are not in the html code.
Here is the mustachejs template :
<div id="tpl-general-tr-phone">
<tr>
<td>1</td>
<td>{{ number }}</td>
<td>{{ type }}</td>
<td>{{ published }}</td>
<td>
<button type="button" class="btn btn-warning btn-xs">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
And the javascript code :
$.get( "mustache", function(template) {
var output = Mustache.render($(template).filter('#tpl-general-tr-phone').html(),
{
number : phonenumber,
type : phonetype,
published : 1
});
console.log(output);
$('.table-phones').append(output);
});
Anyone knows the solution to this problem ?
Thank you for your help
Apparently, the tr element are not well interpreted if they are not in a table element. What I did is to change my template like this :
<div id="tpl-general-tr-phone">
<table>
<tbody>
<tr>
<td>1</td>
<td>{{ number }}</td>
<td>{{ type }}</td>
<td>{{ published }}</td>
<td>
<button type="button" class="btn btn-warning btn-xs">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
<table></div>
And I get the template in javascript like this :
var output = Mustache.render($(template).filter('#tpl-general-tr-phone').find("tbody").html(), ...
This solution works fine
Related
Hi I am using Angular8 and initially, it must be bound in a table all values and when click on edit, that particular row should be editable and one row at a time can be edited, I have attached the demo. And here I have added only one array data for demo purposes, but I need to bind multiple years so I tried with reactive forms to add input field and td based on click but couldn't bind values. So here in my case, I need to edit one row at a time.
HTML:
<ng-container *ngFor="let contact of yearManagement">
<tr>
<td></td>
<td class="text-capitalize">{{contact.policyTypeName}}</td>
<td>{{contact.quotes}}</td>
<td>{{contact.policyCT}}</td>
<td>{{contact.writtenPremium }}</td>
<td class="width125">
<button class="btn btn-outline-primary btn-table ml-1" title="Edit">Edit</button>
<button class="btn btn-outline-primary btn-table ml-1" title="Delete"
(click)="deleteCommitment(contact)">Delete</button>
</td>
</tr>
</ng-container>
Demo
Try with the following changes in html
<ng-container *ngFor="let contact of yearManagement">
<tr>
<td></td>
<td class="text-capitalize">
<ng-container *ngIf="editableRow !== contact.id; else newDeb">
{{contact.policyTypeName}}
</ng-container>
<ng-template #newDeb>
<input [(ngModel)]="contact.policyTypeName" />
</ng-template>
</td>
<td>{{contact.quotes}}</td>
<td>{{contact.policyCT}}</td>
<td>{{contact.writtenPremium }}</td>
<td class="width125">
<button class="btn btn-outline-primary btn-table ml-1" title="Edit"
(click)="editableRow = contact.id">Edit</button>
<button class="btn btn-outline-primary btn-table ml-1" title="Delete"
(click)="deleteCommitment(contact)">Delete</button>
</td>
</tr>
</ng-container>
And in typescript
export class AppComponent {
editableRow = 0;
I have a question with data passing to component using #Input(). When i have a list component that contains some data. When i click edit an view button it loads some component. in my detailComponent:
#Input() serviceTimeGoal: IServiceTimeGoal;
And my update component same as detail. But detail component works fine. But update component receives no data. Here is i am opening modal:
<table
class="table table-striped table-bordered table=hover"
aria-describedby="page-heading"
>
<thead>
<tr>
<th scope="col"><span>Үүсгэсэн огноо</span></th>
<th scope="col"><span>Үүсгэсэн хэрэглэгч</span></th>
<th scope="col"><span>Шинэчилсэн огноо</span></th>
<th scope="col"><span>Шинэчилсэн хэрэглэгч</span></th>
<th scope="col"><span>Идэвхитэй</span></th>
<th scope="col"><span>Хугацаа</span></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let serviceTimeGoal of serviceTimeGoals; let i = index">
<td>{{ serviceTimeGoal.createdAt | dateFormatPipe }}</td>
<td>{{ serviceTimeGoal.createdBy }}</td>
<td>{{ serviceTimeGoal.updatedAt | dateFormatPipe }}</td>
<td>{{ serviceTimeGoal.updatedBy }}</td>
<td>{{ serviceTimeGoal.enabled }}</td>
<td>{{ serviceTimeGoal.time }}</td>
<td class="text-right">
<div class="btn-group">
<button
type="submit"
(click)="
openModal(serviceTimeGoal, 'service-time-goal', $event)
"
class="btn btn-info btn-sm"
>
<i class="icon-eye"></i>
</button>
<button
type="submit"
class="btn btn-primary btn-sm"
(click)="
openModal(serviceTimeGoal, 'update-service-time', $event)
"
>
<i class="icon-pencil"></i>
</button>
<button
type="submit"
[routerLink]="[
'/service-time-goal',
{
outlets: {
popup: serviceTimeGoal.id.branchId + '/delete'
}
}
]"
replaceUrl="true"
queryParamsHandling="merge"
class="btn btn-danger btn-sm"
>
<i class="icon-bin"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Update component -->
<qms-modal id="update-service-time">
<qms-service-time-goal-update
[serviceTimeGoal]="serviceTimeGoal"
></qms-service-time-goal-update>
</qms-modal>
<!-- Detail component -->
<qms-modal id="service-time-goal">
<qms-service-time-goal-detail
[serviceTimeGoal]="serviceTimeGoal"
></qms-service-time-goal-detail>
</qms-modal>
And in my ts file:
openModal(serviceTimeGoal: IServiceTimeGoal, id: string, e: any) {
this.singleData = serviceTimeGoal;
this.modalService.open(id);
e.stopPropagation();
}
What am i doing wrong any advice ?
EDIT:
updateComponent:
#Input() serviceTimeGoal: IServiceTimeGoal;
ngOnInit() {
this.isSaving = false;
this.updateForm(this.serviceTimeGoal);
}
updateForm(serviceTimeGoal: IServiceTimeGoal) {
console.log(serviceTimeGoal);
this.editForm.patchValue({
cat: serviceTimeGoal.id.cat,
reg: serviceTimeGoal.id.reg,
loc: serviceTimeGoal.id.loc,
name: serviceTimeGoal.id.name,
tx1: serviceTimeGoal.id.tx1,
tx2: serviceTimeGoal.id.tx2,
tx3: serviceTimeGoal.id.tx3,
tx4: serviceTimeGoal.id.tx4,
createdBy: serviceTimeGoal.createdBy,
updatedBy: serviceTimeGoal.updatedBy,
enabled: serviceTimeGoal.enabled,
time: serviceTimeGoal.time
});
}
detailComponent:
#Input() serviceTimeGoal: IServiceTimeGoal;
Update:
Detail:
If you are going to share same data between multiple components, I think using a shared service will be more efficient. You can find some sample code snippets here.
I have list below and when i delete my items they will not be removed from my list unless i refresh the page.
List
<tbody>
<tr v-for="school in schools" v-bind:key="school.id">
<td>{{ school.id }}</td>
<td>{{ school.name }}</td>
<td>
<button
class="btn btn-danger"
v-on:click="deleteSchool(school.id)">
Delete
</button>
</td>
</tr>
</tbody>
Delete method
deleteSchool(id)
{
let uri = `http://localhost/schools/${id}`;
this.axios.delete(uri);
this.schools.splice(id, 1);
}
Any idea?
use index it 's like a key to splice an item from the list
<tbody>
<tr v-for="(school,index) in schools" v-bind:key="school.id">
<td>{{ school.id }}</td>
<td>{{ school.name }}</td>
<td>
<button
class="btn btn-danger"
v-on:click="deleteSchool(school.id,index)">
Delete
</button>
</td>
</tr>
</tbody>
deleteSchool(id,index)
{
let uri = `http://localhost/schools/${id}`;
this.axios.delete(uri);
this.schools.splice(index, 1);
}
Using ES6, it could also be done like this, with findIndex().
<tbody>
<tr v-for="school in schools" :key="school.id">
<td>{{ school.id }}</td>
<td>{{ school.name }}</td>
<td>
<button
class="btn btn-danger"
#click="deleteSchool(school.id)">
Delete
</button>
</td>
</tr>
</tbody>
methods: {
deleteSchool(id) {
const uri = `http://localhost/schools/${id}`;
this.axios.delete(uri);
const schoolIndex = this.schools.findIndex(school => school.id === id);
this.schools.splice(schoolIndex, 1);
}
}
I am trying to get id of a selected row in a table.
The rows are generated based on number of objects in foodList (JSP page).
JSP Code
<tbody>
<c:forEach items="${foodList}" var="det">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="${det.b_No}" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button></td>
<td><input type="text" class="form-control" value="${det.wt}" /></td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
JavaScript Code
$('#table_id').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0").attr("id"));
});
First alert is displaying the text as follows which is as expected,
<button id="1015" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button>
But for the second alert I am expecting the id (1015) but showing as "undefined".
the id is in button element so use :
alert($(this).find(".pt-0").find("button").attr("id"));
or simply direct access
alert($(this).find(".pt-0 button").attr("id"));
See below snippet :
$('#table').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0 button").attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="1508" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete">del</button></td>
</tr>
</table>
I am trying to create a repeater field within my table.
Basically I want the following behavior:
If no "Test Product2" has been added to the table, the user cannot add another field below.
If a "Test Product2" has been added to the table, the user is allowed to add a field below and can add another "Test Product2" next to the new blue button.
The below an example of the second case for the behaviour.
$(".btn.btn-dark.btn-sm.product2").on("click", this.clickDispatcherTable.bind(this))
//$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this));
$("#miningTable").on("click", ".btn.btn-primary.btn-sm.product2", this.ourClickDispatcher.bind(this));
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement.parentElement;
plusButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
function ourClickDispatcher(e) {
let targetButton = $(".btn.btn-primary.btn-sm.product2")
let targetButtonParent = targetButton[0].parentElement
targetButtonParent.insertAdjacentHTML('beforebegin', `
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
`)
targetButton.attr('class', 'btn btn-danger btn-sm product2'); // change button class to red
targetButton.text(function() {
return $(this).text().replace("Add", "Edit");
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="miningTable" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product4
</td>
</tr>
</tbody>
</table>
As you can see in the above example a user can add multiple fields as he want. There is currently no restriction.
Any suggestions how to restrict the user for adding a field if a condition is not satisfied?
I appreciate your reply!
If I correctly understand your problem, think this is your answer
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
let sw = true;
$( "tbody tr" ).each(function(index, row) {
if(row.children.length != 3) {
sw = false;
}
});
if (sw) {
$('tbody tr:last').after(`
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>`)
}
}