Show / hide columns dynamically using JavaScript does not function - javascript

My mission is to appear toggle JavaScript in my DataTables but it seems not function not only the button even the functions.
Here is my Code
HTML
<div class="col-lg-12 col-md-12 col-sm-12 mb-30">
<table class="data-table stripe hover multiple-select-row nowrap" id="example">
<thead>
<tr>
<th class="table-plus datatable-nosort">No</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-plus">1</td>
<td>Michael</td>
<td>123456789</td>
<td>michael#gmail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
JS
<script>
$(function(){
$.fn.bootstrapSwitch.defaults.onColor = 'success';
$.fn.bootstrapSwitch.defaults.offColor = 'danger';
$.fn.bootstrapSwitch.defaults.size = 'mini';
$.fn.bootstrapSwitch.defaults.state = 'false';
$.fn.bootstrapSwitch.defaults.inverse = 'true';
$(".toggle-vis").bootstrapSwitch();
var table = $('#example').DataTable();
$('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) {
event.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible( ! column.visible() );
});
});
</script>
I am trying to replicate someones code here JSFiddle unfortunately the toggle is not appear.

There are 3 reasons that I see on why it isn't running like the one you're copying.
first: The original author included links that needed for it to works. He added it in the jsfiddle left side Resources url.
second: The original author included input elements in his codes that became the toggle buttons.
third: In the original author input:checkbox he included data-label-text="Position" which the value should be equal to your column number that starts with 0.
so if you wish to used the whole functions of the author's code, You need to see every details on how it is going to work.
You can check this jsfiddle https://jsfiddle.net/u9h5k048/10/
this is the link you need to add in jsfiddle resources
https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js
https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js

you should add the toggle-vis element
<input
type="checkbox"
data-column="0"
class="toggle-vis"
data-label-text="ID"
checked/>
<input
type="checkbox"
data-column="1"
class="toggle-vis"
data-label-text="Name"
checked>
<input
type="checkbox"
data-column="2"
class="toggle-vis"
data-label-text="Position"
checked/>

Related

How to get radio button value and clear checked radio button in table

I'm creating multiple radio button in table, using Razor syntax (under ASP.NET Core MVC).
<table class="table table-striped table-hover table-bordered table-sm custom-font">
<thead>
<tr>
<th>Id</th>
<th>Document Name</th>
<th>Signed?</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Id</td>
<td>#item.DocumentName</td>
<td>
#foreach (var sign in item.Signs)
{
<div class="form-check form-check-inline">
<input type="radio" asp-for="#item.Sign" value="#sign" class="form-check-input" />
<label class="form-check-label">#sign</label>
</div>
}
<div class="text-center">
Update | Clear
</div>
</td>
</tr>
}
</tbody>
</table>
#section Scripts {
<script>
$(function () {
$('.update').click(function (e) {
e.preventDefault();
var signed = $('input[name="item.Signed"]:checked').val();
alert(signed);
});
$('.clear').click(function (e) {
e.preventDefault();
$('.clear input[type="radio"]').prop('checked', false);
});
});
</script>
}
Per row, there are Update and Clear links, to update the record and clear the checked radio button per row.
The problem is, from razor syntax, it will generate html radio with the same id & name for each row. So I cannot check the radio per row and clear the checked radio button.
How to solve this?
I'm creating similar code in jsfiddle for this case.
<input type="radio" asp-for="#item.Sign" value="#sign" class="form-check-input" />
it will generate html radio with the same id & name for each row.
The asp-for attribute will generate and set value for id and name html attribute, which cause the issue.
Per row, there are Update and Clear links, to update the record and clear the checked radio button per row.
To achieve your requirement, you can try:
remove asp-for attribute, and dynamically set default checked option
<input type="radio" name="Sign_for_#item.Id" #(item.Sign==sign? "checked" : "") value="#sign" class="form-check-input" />
modify js code to find parent td element, then find radio buttons
<script>
$(function () {
$('.update').click(function(e) {
e.preventDefault();
var signed = $(this).parent().parent().find('input[type="radio"]:checked').val();
alert(signed);
});
$('.clear').click(function(e) {
e.preventDefault();
$(this).parent().parent().find('input[type="radio"]').prop('checked', false);
});
})
</script>
Test Result
You could use for loop instead of foreach and take advantage of index number to create unique Ids per each row.
<table class="table table-striped table-hover table-bordered table-sm custom-font">
<thead>
<tr>
<th>Id</th>
<th>Document Name</th>
<th>Signed?</th>
</tr>
</thead>
<tbody>
#for(int i = 0; i < Model.Count; i++)
{
var item = Model[i];
<tr>
<td>#item.Id</td>
<td>#item.DocumentName</td>
<td>
#foreach (var sign in item.Signs)
{
<div class="form-check form-check-inline">
<input type="radio" name="item.Sign#i" id="#item.Sign#i" value="#sign" class="form-check-input" />
<label class="form-check-label">#sign</label>
</div>
}
<div class="text-center">
Update | Clear
</div>
</td>
</tr>
}
</tbody>
Instead of jquery event listeners you could use onclick attribute on Update and Clear buttons and pass row number as an argument. But I'm not sure if this is right solution.

Show only one element of a panel using Angularjs

I am new to Angularjs and I am trying to figure out how it's different modules work. So, I am working on a project on which I wanna achieve an accordion-like style for a page, in which a table is shown when I click a panel button. The HTML code that creates(dynamically from a database) the div elements I modify is posted below.The problem is that in this panel, any number of tables can be shown,while I need to only have one opened at a time,so when one opens,the one opened before it should close.Any ideas how I can achieve this functionality?(I assume the error is because the showDB variable is local to each table scope, but I don't know how to work around it.) Thanks!' `
<div ng-repeat="(key, value) in data.services">
<div ng-show="showSection(key)" class="top_panel-section">
<button class="btn top_btn btn-header" type="button" name="showDB"
ng-click="showDB=!showDB">{{key}}</button>
<table ng-show="showDB"
class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
<thead class="n-table-thead">
<tr>
<th width="70%">VM Name</th>
<th width="30%">Status</th>
</tr>
</thead>
<tbody class="n-table-body">
<tr ng-repeat="vm in value.vms">
<td width="76%">{{vm.vm}}</td>
<td width="24%" ng-style="getStatusStyle(vm.status)">
{{vm.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Yes, you should remove that local showDB variable to achieve what you need.
You can easily replace it with a $scope.activeKey and evaluating it by the
<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>
And in your controller:
$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
$scope.activeKey = keyToBeActivated;
}
Now you can reach that exclusivity by checking:
<table ng-show="activeKey === key" ... >
Using table $index as unique field: (available from ng-repeat)
<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>
And
<table ng-show="activeKey === $index" ... >

how to combine ng-if , ng-click and ng-show and use them together

Pre-info
I try to sperate Admin and customer in a different stage or view.
so that, admin can modify the table before releasing it to customers.
Questions
In the table -> td there is button to control the staging, release(show) or revert (hide)?
so basically what I wanna do is that every table checked can be shown on the both in admin and customer. if it's unchecked, the data only show to admin.
Currently, the code is disabled whole table-body instead of 1 row.
is there any way to check or uncheck only 1 row?
thanks for the advice.
$scope.showDiv = isAdmin();
$scope.toggleShowDiv = function () {
$scope.showDiv = !isAdmin()&isAdmin();
console.log('fired');
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<thead>
<tr>
<th style="width: 80px">foo1</th>
<th style="width: 80px">foo2</th>
<th style="width: 200px">foo3</th>
<th>foo4</th>
<th>foo5</th>
<th>foo6</th>
</tr>
</thead>
<tbody class="auction-group" ng-repeat="a in foos" ng-if="showDiv">
<tr>
<td>abcd1</td>
<td>abcd1</td>
<td>abcd1</td>
<td>abcd3</td>
<td>abcd4</td>
<td>abcd5</td>
//is admin - show only to admin
<td ng-if="::isAdmin()">
<input type="checkbox" ng-click="toggleShowDiv()" />
</td>
</tr>
</tbody>
Take your first ng-if outside ng-repeat
<div ng-if="showDiv">
<tbody class="auction-group" ng-repeat="a in foos">
</div>
second ng-if should be like this,
<td ng-if="isAdmin()">
<input type="checkbox" ng-click="toggleShowDiv()" />
</td>

Change table header with response to button click ,where rows update using JSTL for loop

<div class="btn-group" >
<button type="submit" onclick="display">DISPLAY SCHEDULE</button>
<button type="submit" onclick="open" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<!-- column headers -->
<% Result result = (Result)request.getAttribute("result");%>
<thead>
<tr>
<th id="change"> Transfer Switch </th>
</tr>
</thead>
<!-- column data -->
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td>
<c:out value="${row.Schedule_ID}"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
I am trying to change my table header name with button click, so what i did was added a simple java script as follows.
<script>
function display(){
document.getElementById("change").innerHTML="display"
}
function open(){
document.getElementById("change").innerHTML="open"
}
</script>
but since my JSTL result row gets updated for every loop my header changed too thus ending myself with the same header Transfer switch.
Can i solve this using Jquery on load ??, not sure how to use it.
I heard of solutions to make 2 tables but that's not the solution i am looking for since the table is responsive uses bootstrap and also has some buttons in its rows .
Two things I have changed from your code, now it looks fine,
Don't use the JS reserved keyword(s) like open. Use openSchedule() instead.
For better practice, Use span tag for change the text instead of giving id to th.
Your HTML with rendered table rows (Assume I could not able to reproduce jsp values here.)
<div class="btn-group" >
<button type="button" onclick="displaySchedule()">DISPLAY SCHEDULE</button>
<button type="button" onclick="openSchedule()" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<thead>
<tr>
<th><span id="change">Transfer Switch</span></th>
</tr>
</thead>
<tbody>
<!-- Here I assumed two rows, since It's JSP value I couldn't reproduce -->
<tr>
<td>Text1</td>
</tr>
<tr>
<td>Text2</td>
</tr>
</tbody>
</table>
Your Script,
window.displaySchedule = function(){
document.getElementById("change").innerHTML="display";
}
window.openSchedule = function(){
document.getElementById("change").innerHTML="open";
}
See fiddled demo here for live sample.

Issue with Javascript creating identical rows with inputs

I have a table that contains a row. In that row, there is a file input that has been styled to look like a button. I need the user to choose an image, then enter some information about that image in the same row. Once they do that, if they need to add another image, they will click a button that creates a new row, which contains a new file input etc.
The problem that I have is in the JavaScript that creates the new row. The row is created fine. However, I think the issue begins with the file input not having a new id. So, I have attempted to throw it in some sort of loop with a count and then assign that file input the count number on each click of the add row button. I've failed miserably.
Here is a look at the JS:
/* add image */
$(document).ready(function() {
var clicks = 0;
$("#buttons .addimage").live('click', function() {
// Code between here will only run when the a link is clicked and has a name of addimage
$("table#dataTable tr:last").after('<tr><td><input type="checkbox" name="chk"/></td><td><span class="file-wrapper"><input type="file" name="photo" id="photo" /><span class="button">Choose a Photo</span></span></td><td></td><td><select name="imagetype" id="imagetype" class="required"><option value="thumbnail">Thumbnail</option><option value="other">Other</option></select></td></tr>');
return false;
});
});
The HTML Table:
<table id="dataTable">
<!-- All attributes will be sorted alphabetically. Default should be sorted by Status. Errors should be on top -->
<thead>
<tr>
<!-- Table Header -->
<th>Select</th>
<th>File Name</th>
<th>File Size</th>
<th>File Type</th>
</tr>
</thead>
<tbody>
<tr>
<!-- First Record / Dynamically populated/For mock up purposes only -->
<td><input type="checkbox" name="chk" /></td>
<td><span class="file-wrapper"><input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span></span></td>
<td></td>
<td><select name="imagetype" id="imagetype" class="required">
<option value="thumbnail">
Thumbnail
</option>
<option value="other">
Other
</option>
</select></td>
</tr>
</tbody>
So, you'll notice that the JS file doesn't dynamically create a new file input id. How would I go about doing this? Am I thinking about this the right way?

Categories