Bind Data to Modal on table cell click - javascript

I'm trying to bind KnockoutJS ViewModel to a datatable:
JsFiddle
<table class="table table-sm" id="user">
<thead>
<tr role="row">
<th>Id</th>
<th width="30%" class="text-uppercase">Email</th>
<th width="15%" class="text-uppercase">Active</th>
<th width="2%" class="text-center text-uppercase">Edit</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: users() -->
<tr>
<td data-bind="text: $data.id"></td>
<td data-bind="text: $data.email"></td>
<td data-bind="text: $data.isDisabled"></td>
<td class="text-center" data-bind="toggleClick: $root.showDialog"></td>
</tr>
<!-- /ko -->
</tbody>
</table>
When a user click the edit on each row it opens a modal dialog, where the data can be edited.
How do I bind the clicked row data to modal dialog form?
so I can do this:
<div class="modal-body" data-bind="with: User">
<input data-bind="text: email" />
<input data-bind="text: isDisabled" />
</div>

First off I would replace that toggleClick custom binding with a normal click function on your view-model as you really want to do more than just toggle the dialog. With a click function you can then access the row data that was clicked on, and then use that to set a current/selected user.
self.toggleClick = function(data){
self.showDialog(!self.showDialog());
self.selectedUser(data);
}
Example: https://jsfiddle.net/0vou6xs0/6/
You can then use a with binding like you had using the selected-user.
<div class="modal-body" data-bind="with: selectedUser">
<input data-bind="value: email" />
<input data-bind="value: isDisabled" />
</div>

Related

Submit all data from DataTable table with checkboxes using jQuery

So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>
I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.

DataTable not refreshing in angular

<div class="row-fluid padTop5">
<div class="col-12">
<div class="row" *ngIf="showFiles">
<div class="col-12 colBorder">
<table datatable class="table table-striped centerAlign">
<thead>
<tr>
<th class="centerAlign">Select All<input type="checkbox" [(ngModel)]="fileSelectAll" name="fileSelectAll" class="d-block" (change)="selectAll($event,fileSelectAll)"></th>
<th>TestCase Name</th>
<!-- <th>Provision Name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileList;let i =index">
<td>
<input type="checkbox" [(ngModel)]="file.selected" [checked]="isSelected" (change)='checkClicked($event,file)' name="cb">
</td>
<td>{{file.name}}</td>
<!-- <td>PE</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am using angular datatables ..the table is forming when the user selects the file from local.works fine for the first time..but when the user again selects the file previous records are not gone..how to. Refresh the table

How to get one or more data when we do click in checkbox?

I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}
This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.

Unable to Call Knockout function with arguments and simultaneously open css modal

I have searched thoroughly on this but couldn't find any thing to resolve my problem. i have a tag on which i need to pass argument to knockout function alongside i have to show the results of bindings in a css modal so now the problem is my link is calling knockout function perfectly but my modal popup is not showing up.
here is my link
0
here is my modal dialog
<div id="openDetailModal" class="modalDialog" >
<div class="modal-dialog-xl">
<div class="modal-content">
<div class="modal-header">
<a href="#close" title="Close">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</a>
<h4 class="modal-title">
Detail
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table id="tblContactLog" class="table table-striped table-bordered">
<thead>
<tr>
<th width="3%">SNo.</th>
<th width="4%">Registration No</th>
<th width="8%">First Name</th>
<th width="8%">Last Name</th>
<th width="8%">Contact</th>
<th width="7%">Message Subject</th>
<th width="7%">Message Description</th>
<th width="5%">Campaign Type</th>
<th width="5%">Date</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: ContactLogList() -->
<tr>
<td width="3%" data-bind="text:$index()+1">1</td>
<td width="4%" data-bind="text:RegistrationNo">Some</td>
<td width="8%" data-bind="text: FirstName">1</td>
<td width="8%" data-bind="text: LastName">1</td>
<td width="8%" data-bind="text: Contact">Some</td>
<td width="7%" data-bind="text: MessageSubject">One</td>
<td width="7%" data-bind="text: MessageDescription">English</td>
<td width="5%" data-bind="text: CampaignType">1</td>
<td width="5%" data-bind="text: CreationDate">1</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
</div>
</div>
</div>
i tried using jquery call
$("#openDetailModal").modal('show')
it just fades my page but do not show dialog.
following is the link which explains a little of my problem. it does not work for me

jQuery reset a single table during onchange

I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());

Categories