HTML panel to appear/disappear depending on DataTables Select - javascript

Im using datatables responsive/select right now to display some data. How would I go about making it so when I click on any of these rows in the table, it opens up the "col-md-6" panel? So hidden when no rows are selected, then shown when a row is selected.
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<div id="menu-panel"></div>
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Digital Inputs</h4>
</div>
<div class="alert alert-info fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
Click on a Digital Input to edit its properties.
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Input</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>Digital Input 1</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Digital Input 2</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Digital Input 3</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Digital Input 4</td>
</tr>
<tr class="gradeA">
<td>5</td>
<td>Digital Input 5</td>
</tr>
<tr class="gradeA">
<td>6</td>
<td>Digital Input 6</td>
</tr>
<tr class="gradeA">
<td>7</td>
<td>Digital Input 7</td>
</tr>
<tr class="gradeA">
<td>8</td>
<td>Digital Input 8</td>
</tr>
<tr class="gradeA">
<td>9</td>
<td>Digital Input 9</td>
</tr>
<tr class="gradeA">
<td>10</td>
<td>Digital Input 10</td>
</tr>
<tr class="gradeA">
<td>11</td>
<td>Digital Input 11</td>
</tr>
<tr class="gradeA">
<td>12</td>
<td>Digital Input 12</td>
</tr>
<tr class="gradeA">
<td>13</td>
<td>Digital Input 13</td>
</tr>
<tr class="gradeA">
<td>14</td>
<td>Digital Input 14</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Digital Input Basic Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Digital Input:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="1" disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Display Input:</label>
<div class="col-md-2">
<input type="checkbox" name="" value="" checked><br>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Signal Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Digital Input 1" />
</div>
</div>
</div>
</div>
<!-- end panel -->
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-sm btn-primary m-r-5">Save</button>
<button type="submit" class="btn btn-sm btn-default">Cancel</button>
</div>
</div>
<!-- end col-10 -->
</div>
<!-- end row -->
App.restartGlobalFunction();
App.setPageTitle('Color Admin | Managed Tables - Select');
$.getScript('assets/plugins/DataTables/media/js/jquery.dataTables.js').done(function() {
$.getScript('assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js').done(function() {
$.getScript('assets/plugins/DataTables/extensions/Select/js/dataTables.select.min.js').done(function() {
$.getScript('assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js').done(function() {
$.getScript('assets/js/table-manage-select.demo.min.js').done(function() {
TableManageTableSelect.init();
});
});
});
});
});

You can do something like this.. give your input field id for example
digital input: id="digital-input-number" and for digital signal id="digital-input-name" and here goes the code...
$('.gradeA td').on('click',function(){
var text=[];
text = $(this).parent().find('td');
//console.log(text[0].innerText);
// console.log(text[1].innerText);
$("#digital-input-number").val(text[0].innerText);
$("#digital-input-name").val(text[1].innerText);
});
this code will put the value of your table to form dynamically i.e you click on one row data of that row goes to the form which i suppose you want to see.

I don't see any JS, you should attempt this yourself. What I can say is that in order to get what you need, you will have to call the inputs and according to which column is selected on the table, place those values equal to what is selected.
So, if you click on Digital Input 1, set the value for Digital Input to the row selected but the first column. It will display the value of 1.
Then you just need to call the value of the selected column to the signal name and it will display Digital Input 1.
None of your elements have id tags.
In order to do this, your rows and columns will need to have id tags. Then you can easily grab the innerHTML of the id using JS.
I hope this helps.

Related

Content of "Ng-If ="0" <div>" shows on un-"collapse"

The content of the ng-if still shows if I click the button. But I want it only to show in a specific situation. In another situation the button should unhide a different <div>
I thought the part after ng-if gets removed in the DOM, so I am wondering why it is even able to show up.
<tr>
<td>{{approval_item.requested_for}}</td>
<td><a data-toggle="collapse" data-target=".{{approval_item.document_id_number}}"><i class="fa fa-trash"></i></a></td>
</tr>
<div ng-if="0">
<tr class="hide-table-padding collapse {{approval_item.document_id_number}}">
<td colspan="5">
<tr class="collapse {{approval_item.document_id_number}}">
<td><b>Item / Service</b></td>
<td><b>Quantity</b></td>
<td><b>One-time Price</b></td>
<td><b>Monthly</b></td>
<td><b>Yearly</b></td>
</tr>
<tr class="collapse {{approval_item.document_id_number}}" ng-repeat="requested_item in approval_item.request_ritms">
<td>{{requested_item.name}}</td>
<td>{{requested_item.quantity}}</td>
<td>{{requested_item.price_string}}</td>
<td>{{requested_item.price_monthly_string}}</td>
<td>{{requested_item.price_yearly_string}}</td>
</tr>
<tr class="collapse {{approval_item.document_id_number}}">
<td></td>
<td></td>
<td><b>One-time Total</b></td>
<td><b>Monthly Total</b></td>
<td><b>Annually Total</b></td>
</tr>
<tr class="collapse {{approval_item.document_id_number}}">
<td></td>
<td></td>
<td>{{approval_item.price_string}}</td>
<td>{{approval_item.price_monthly_string}}</td>
<td>{{approval_item.price_yearly_string}}</td>
</tr>
</td>
</tr>
</div>
The problem is that div can't be a child of table.
If you want to hide the row, you should remove the div and move the ng-if into the tr itself.
Do
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(s) {}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
<table>
<tr>
<td>
row 1
</td>
</tr>
<tr ng-if="0">
<td>
row 2
</td>
</tr>
</table>
</div>
</div>
Don't
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(s) {}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
<table>
<tr>
<td>
row 1
</td>
</tr>
<div ng-if="0">
<tr>
<td>
row 2
</td>
</tr>
</div>
</table>
</div>
</div>

Div gets cloned multiple times instead of the required amount

I have some JSON data that contains four sections, and I want my html div to be cloned depending on how many sections there are. So if I have 100 sections in my JSON, the div should be cloned 100 times.
My div is getting cloned and the JSON data is getting appended to each one, but the problem is that the divs are getting cloned more than once. The first JSON section gets cloned 4x, the second one 3x, the third one 2x, etc. There's a pattern here but I'm not sure why it's happening.
JSON
JS snippet:
import $ from 'jquery';
import jsonData from "./test.json";
let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");
onlyTitles.forEach(title => {
let $clonedDiv = $("#template").clone();
$clonedDiv.removeAttr("id");
$clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
$clonedDiv.find("#filledRowBody").removeAttr("id");
$("#titleBody").append($clonedDiv);
})
HTML snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">
<h3 id="display-form-job-title"></h3>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>
<!-- Button trigger PDF -->
<button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
</div>
<hr>
<h4>Hiring Goals:</h4>
<div class="col-12">
<table class="table order-list" id="hiring-goals-table">
<thead>
<tr>
<td>Number of Hires</td>
</tr>
</thead>
<tbody class="tbody-hire">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4>Open Searches:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td>Role</td>
<td>Location</td>
<td>Active</td>
</tr>
</thead>
<tbody class="tbody-search">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h4>Roles Filled:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td class="thead-emp">Name</td>
<td class="thead-role-fill">Role</td>
<td class="thead-loc-fill">Location</td>
<td class="thead-act-fill">Active</td>
</tr>
</thead>
<tbody>
<tr id="filledRowBody">
</tr>
</tbody>
</table>
</div>
</div>
<div id="titleBody">
</div> <!-- col-6 -->
It turned out that #titleBody was inside of the col-6 div which somehow led to the duplications.

show loading/progress/spinner on table during loading data

There is a table which is populated by ng_repeat, I am going to show a loading/progress/spinner on it while data is loading
<div class="panel-body panel-success">
<div class="col-lg-12">
<table class="table table-bordered" >
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()"
items-per-page="pageSizeSelected"
direction-links="true" ng-model="pageIndex"
max-size="maxSize"
class="pagination"
boundary-links="true"
rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
How can show loading/progress/spinner inside table dusring loading data? I want to show spinner inside table (Instead of rows, I mean keep table column name)
Show spinner while data is not loaded... once loaded, hide it !!
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="soQuestion">
<div class="panel-body panel-success" ng-controller="soController">
{{results.length}}
<div class="col-lg-12">
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-if="results.length<1">
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
</tr>
<ng-container ng-if="results.length>0">
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
</ng-container>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

dirPaginate not working with ng-repeat-start(for expandable table)

I am using a expendable table for that the code is below
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Here I am using ng-repeat-start directive for expandable table.
but pagination showing this alert:
Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.
and an error:
pagination directive: the itemsPerPage id argument (id: __default) does not match a registered pagination-id.
Help me I need pagination in expandable table.
You have 2 errors, i think.
dirPaginate require use dir-paginate instead of ng-repeat.
You need use pagination control directive.
To solve you problem do next:
Change ng-repeat on dir-paginate in ng-repeat="position in listPositiondtls | itemsPerPage:10"
Add in html <dir-pagination-controls></dir-pagination-controls>
Modified html
<dir-pagination-controls></dir-pagination-controls>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>

Moving data betwen tables with "this"

I have a game that i'm working on and in it theres a shop that has two divs: a "Buy" section and a "Checkout". The first allows you to select different items and then move them into the "Checkout" using a button for each row. My problem is that i'm unsure how to move each selected row across to the second div (checkout).
Eg:
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<th>Level Required</th><th>Item</th><th>Cost</th>
<tr><td>Level 1</td><td><img src="img/shop/pickaxe_rusty.png" id="item1"></td><td>50 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 10</td><td><img src="img/shop/pickaxe_iron.png" id="item2"></td><td>500 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 25</td><td><img src="img/shop/pickaxe_steel.png" id="item3"></td><td>5000 Gold</td><td class="moveToCheckout">⇒</td></tr>
</table>
</div>
The <td class="moveToCheckout">⇒</td>or ⇒ is what the user will click on to move the items across.
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table>
<th>Items</th><th>Quantity</th><th>Price</th>
<tr><td><img src="" id=""></td><td><input type="text" value="1" id="quantity"><td>X Gold</td></td></tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>
Additional info:
I have an array for each item with all the info for it (cost, level, img src), would it be possible to use this to create a new row in the checkout section and insert the details into it using a for loop?
I don't exactly understand what you want, but something like this should look close enough :
function buy(elem) {
$(elem).parents('tr').appendTo("#co-table");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<tr>
<th>Level Required</th>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Level 1</td>
<td>
<img src="img/shop/pickaxe_rusty.png" id="item1">
</td>
<td>50 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 10</td>
<td>
<img src="img/shop/pickaxe_iron.png" id="item2">
</td>
<td>500 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 25</td>
<td>
<img src="img/shop/pickaxe_steel.png" id="item3">
</td>
<td>5000 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
</table>
</div>
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table id="co-table">
<tr>
<th>Items</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>
<img src="" id="">
</td>
<td>X Gold</td>
<td>
<input type="text" value="1" id="quantity">
</td>
</tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>

Categories