Mapping multiple link tables to a nested JQuery accordion - javascript

This is my first time asking on Stack Overflow so bear with me.
I have been trying to implement an HTML page using Jquery and Javascript. Here is a sample JSFiddle of my page: http://jsfiddle.net/R63Hz/2/. Notice the three tables at the top have elements that map to the nested accordion structure at the bottom. I would like to use Javascript to map the links in these tables to open the appropriate accordion section. I have tried alot of methods but I think I don't have enough knowledge to figure it out.
Here is my most recent attempt at a solution:
$(this).on("click", ".linkButton", function () {
var $tbl = $(this).closest("table");
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
var table = $tbl.attr("id");
if(table=="table1") {
("#accordion").accordion({ active: 0 });
("#accordion2").accordion({ active: row });
}
else if(table=="table2") {
("#accordion").accordion({ active: 1 });
("#accordion3").accordion({ active: row });
}
else if(table=="table3") {
("#accordion").accordion({ active: 2 });
("#accordion4").accordion({ active: row });
}
});
I am not sure if the 5th line is working to set up for the conditional statement.

You could assign a data value to the individual links then in the on.click handler create an if statement that would expand the relevant accordion section.
Your fiddle is very long/messy which is why I've not edited the Fiddle with an exact solution but I hope that the above makes sense.

Here is the solution I found :
I renamed the linkbutton classes to linkbutton1 for the first table, linkbutton2 for the second and linkbutton3 for the third. Then I created the conditional opening on JQuery based on that. The main thing I had screwed up was I forgot $ signs in front of the commands to open the accordion.
$(this).on("click", ".linkButton", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 0 });
$("#accordion2").accordion({ active: row });
});
$(this).on("click", ".linkButton2", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 1 });
$("#accordion3").accordion({ active: row });
});
$(this).on("click", ".linkButton3", function () {
var $tr = $(this).closest("tr");
var row = $tr.index() - 1;
$("#accordion").accordion({ active: 2 });
$("#accordion4").accordion({ active: row });
});

Related

jQuery datatable immediately hide column

I got the jQuery datatable hide column feature to work properly. The following code will hide the 2nd column of the table:
HTML
Show/Hide
JS
$(document).ready(function()
{
var table = $('#example1').DataTable();
$('a.toggle-vis').on('click', function(e)
{
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible( ! column.visible());
});
}
What I would like to do is initially hide the column when the user first enters the page. The column will only show when clicked.
How do I go about adjusting the code to achieve this effect?
You need to use columnDefs
Try:
var table = $('#example1').DataTable(
{
"columnDefs": [
{
"targets": [ 2 ],
"visible": false
}
]
} );
EDIT
I'm not sure why that doesn't work. Adding the code in here since in the comment did not display well.
Try this instead:
var table = $('#example1').DataTable();
table.column(1).visible(false);
Try this
$(function () {
// To hide the table header during page load
$("#example1 tr th:nth-child(2)").hide();
// To hide the 2nd column during page load
$("#example1 tr td:nth-child(2)").each(function () {
$(this).hide();
});
// Hide and show while clicking the link
$(".toggle-vis").click(function () {
var col = $(this).data("column");
// Hide/Show the header
$("#example1 tr th:nth-child(" + col + ")").is(":visible") ? $("#example1 tr th:nth-child(" + col + ")").hide() : $("#example1 tr th:nth-child(" + col + ")").show();
// Hide/Show the details
$("#example1 tr td:nth-child(" + col + ")").each(function () {
$(this).is(":visible") ? $(this).hide() : $(this).show();
});
});
});

Cannot change page in datatable

i've a problem with my datatable...
The problem is: I can't change the page after inizialization....
The workflow that i desire is:
A user select a radiobutton in page 3
i save the id of this radio and the curent page
i destroy datatable
when user re-enter in datatable (re-creating datatable) I wish that user would go directly to the page 2
This is my code:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
});
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
});
P.S. 2 is an example to test function :)
But i get this error in consolle:
Uncaught TypeError: oTable.fnPageChange is not a function
What can i do?
Thanks
Use stateSave, it will do exactly what you need atomatically :
var oTable = $("#id").DataTable({
stateSave : true,
...
});
Now each time the table is instantiated it will restore the settings from last session, i.e pagination, sorting, search-phrase ...
Could you try this ?
$(document).ready(function() {
var currentPaging = 1;
$('#example').DataTable( {
responsive: true
} );
var oTable = $('#example').dataTable();
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
$('#example').on( 'page.dt', function () {
var info = $('#example').DataTable().page.info();
var page = info.page + 1;
alert('Current paging : '+page);
currentPaging = info.page + 1;
});
$('#memorizePaging').on("click", function (e) {
alert("I'm on the page : "+currentPaging);
});
} );
I did a fiddle to show you fnPageChange works : https://jsfiddle.net/z4zgp9az/5/
It seems the "DataTable" should begins from small character "dataTable"
It should helps:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
change to:
$('.js_select').click(function (e) {
var oTable = $("#id").dataTable({
......

Deselecting datatables hidden checkbox

I think I have a simple problem here but my jquery is somewhat limited.
I'm using this script to check all the checkboxes in my table rows which are handled by datatables (including the hidden ones from deferred rendering)
It's working for the checking portion, but the unchecking is not working when I want to deselect the boxes. How can I tweak what I have to to uncheck the boxes correctly?
Heres my code:
$('#selectall').on('click', function() { //on click
if(this.checked) { // check select status
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked', $(this).is(':checked'));
} else {
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked', $(this).is(':not(:checked)'));
}
});
Thanks in advance
I'm partial to this version myself:
$('#selectall').on('click', function() { //on click
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked',this.checked);
});
Looks to me like your uncheck code evaluates to true.. which means it would be checking them. Try this instead:
$('#selectall').on('click', function() { //on click
if (this.checked) { // check select status
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked',true);
} else {
var cells = dTable.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked',false);
}
});

Conditionally display button on Table depending on number of visible rows

I have a form which allows the user to add a new table row via a button in the bottom row which all is working well and also allows users to delete a table row but will always leave one row visible. You can see a working example of this at this jsFiddle.
I now need to make one change to how the Delete button appears. Currently it doesn't appear when there is one row, but when you add a row it appears for all rows except the last row. I need to change it using the following rules:
(i) if there is only one row the delete button should not appear
(ii) if there are 2 rows the delete button should appear on all rows, but if one row is delete rule (i) applies and there should be no delete button again
(iii) if there are 3 rows the delete button should appear on all rows, but if they delete 2 rows then rule (i) applies
and so on.
I'm hiding the delete button on the first row as follows:
<td>
<input type="button" class="button mt5 delbtn" value="Delete" id="deleteRowButton" name="deleteRowButton" style="display: none"/>
</td>
and here's the script that runs when new rows are added/deleted:
$('#lastYear').on('click', '.delbtn', function () {
$(this).closest('tr').remove()
});
var newIDSuffix = 2;
$('#lastYear').on('click', '.addbtn', function () {
var thisRow = $(this).closest('tr')[0];
$(thisRow).find('.delbtn').show();
var cloned = $(thisRow).clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
id = id.substring(0, id.length - 1) + newIDSuffix;
$(this).attr('id', id);
});
cloned.insertAfter(thisRow).find('input:text').val('');
cloned.find('.delbtn').hide();
cloned.find("[id^=lastYearSelect]")
.autocomplete({
source: availableTags,
select: function (e, ui) {
$(e.target).val(ui.item.value);
setDropDown.call($(e.target));
}
}).change(setDropDown);
$(this).remove();
newIDSuffix++;
});
I'm completely stumped at this point - appreciate any solutions to this problem. Thanks!
Hi i have updated your code. Now its working at fiddle.
$('#lastYear').on('click', '.delbtn', function () {
var tableRef=$(this).parent("td").parent("tr").parent("tbody");
$(this).closest('tr').remove();
if( tableRef.find("tr").length==3){
tableRef.find("tr").find("input.addbtn").show();
tableRef.find("tr").find("input.delbtn").hide();
}else{
tableRef.find("tr:last").find("input.addbtn").show();
}
});
var newIDSuffix = 2;
$('#lastYear').on('click', '.addbtn', function () {
var thisRow = $(this).closest('tr')[0];
$(thisRow).find('.delbtn').show();
var cloned = $(thisRow).clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
id = id.substring(0, id.length - 1) + newIDSuffix;
$(this).attr('id', id);
});
cloned.insertAfter(thisRow).find('input:text').val('');
cloned.find('.delbtn').show();
cloned.find("[id^=lastYearSelect]")
.autocomplete({
source: availableTags,
select: function (e, ui) {
$(e.target).val(ui.item.value);
setDropDown.call($(e.target));
}
}).change(setDropDown);
$(this).hide();
newIDSuffix++;
});
Please have a look at http://jsfiddle.net/wnSfa/7/
This will apply the 3 rules told by you.
I did changes in
$('#lastYear').on('click', '.delbtn', function () {
$(this).closest('tr').remove();
if ($("#lastYear tr").length < 4){
$('.delbtn').hide();
}
});
cloned.insertAfter(thisRow).find('input:text').val('');
if ($("#lastYear tr").length < 2){
cloned.find('.delbtn').hide();
}
Note: But if you delete the "last row" Which has "Add another activity" button, you can't add any other rows. You didn't mention user can delete the last or not so i didn't do anything for that. Let me know your comments.

Remove table row, subtract from sum

I am quite new with jQuery, the following code is a collage of 2 different codes I found to achieve my objective
I have a table with a an image that when clicked it removes a table row, that is the first part of the below code.
The second part of the script finds the sum of all the table rows
I am trying to make it so that when you remove a row the sum also changes accordingly. So when you remove a table row the amount in that table row will be subtracted from the total. I need the sum to change according to the row you delete
jQuery part that removes the table row
$(document).ready(function(){
$('table#FeatureMatrix td a.delete').click(function()
{
{
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
parent.fadeOut('slow', function()
{$(this).remove();});
return false;
}
});
Part of jQuery that calculates the sum of all table rows
$(document).ready(function() {
//this calculates values automatically
calculateSum();
$(".txt").live("keydown keyup", function() {
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
else if (this.value.length != 0){
}
});
$("#sum").html(sum.toFixed(2));
}
If somebody wants to see the example page on the web this is the link http://webiceberg.net/Prices.php, you can also view the source of the page if you need more detail on the code.
You simply need to call calculateSum() when you delete the row (tidied the code up a bit as well!):
$('table#FeatureMatrix td a.delete').click(function() {
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
parent.fadeOut('slow', function() {
$(this).remove();
calculateSum();
});
return false;
});
Note that it has to be done after the $(this).remove() inside the callback otherwise you will call calculate before actually removing the row.
If you are concerned about it calling calculateSum directly then fire a custom event and listen for that and then recalculate:
$('table#FeatureMatrix td a.delete').click(function() {
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
parent.fadeOut('slow', function() {
$(this).remove();
$.event.trigger("rowDeleted"); // fire custom event
});
return false;
});
Then listen for this event:
$('#sum').bind('rowDeleted', function() { // listen for custom event
calculateSum();
});
Try the following:
$("table#FeatureMatrix").bind("DOMSubtreeModified", function() {
calculateSum();
});
This will recalculate the sum each time the table is modified (It will work for rows added too)

Categories

Resources