How to fix removing elements in dropdown box (Materialize) - javascript

Dropdown boxes are not removed as expected.
After the migration of Materialize from version 0.97 to 1.0.0 the function is not working. Only the text in the dropdown box is removed instead of the complete element.
M.AutoInit();
function removeEdit() {
var el = document.getElementById("edit");
el.parentNode.removeChild(el);
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
<!-- Record actions -->
<ul id="actions" class="dropdown-content">
<li>Edit</li>
<li>Delete</li>
</ul>
<button type="button" onclick="removeEdit()">Remove element edit</button>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="1" class="tr-d dropdown-trigger" href="#" hover="false" data-target="actions">
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
<td>Row 1, column 3</td>
</tr>
<tr id="2" class="tr-d dropdown-trigger" href="#" hover="false" data-target="actions">
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
<td>Row 2, column 3</td>
</tr>
</tbody>
</table>
</html>

In removeEdit function, el represents selected <a> so el.parentNode represents selected <li>.
When you use el.parentNode.removeChild(el), it means that remove child of selected <li> so it removes the <a> tag.
Change :
el.parentNode.removeChild(el);
To :
el.parentNode.remove();
And it removes selected <li>.

Related

How can I embed a datatable in a php drawn table?

<link rel="stylesheet" type="text/css" href="assets/libs/bootstrap/dist/css/jquery.dataTables.min.css">
Here is the attached CSS, and I also tried using CDN for both styles and Scripts and still it is not showing filters from data table CSS.
<table style="border-color:cadetblue;" id="dt_basic" class="table table-striped table-hover m-0 rounded-pill display dataa">
<tr class="nasiabg2 table-active text-white border-1 border-light">
<!--<th class="text-white">Reference</th>-->
<th class="text-white">Fund Name</th>
<th class="text-white">NaSIA Classification</th>
<th class="text-white">Initial Fees</th>
<th class="text-white">Max Initial Fees</th>
<th class="text-white">NAV</th>
</tr>
<tbody class="border-light"> <?php for ($j=0;$j<$fDaily->num_rows();$j++) {?> <tr>
<td> <?php echo $fDaily->row($j)->fund;?> </td>
<td> <?php echo $fDaily->row($j)->asset_class." - ".$fDaily->row($j)->style." - ".$fDaily->row($j)->region;?> </td>
<td> <?php echo $fDaily->row($j)->init_fee;?> </td>
<td> <?php echo $fDaily->row($j)->max_ann_fee;?> </td>
<td> <?php echo $fDaily->row($j)->nav;?> </td>
</tr> <?php }?> </tbody>
</table>
Here is my table with the below Javascript.
<script src="assets/libs/bootstrap/dist/js/jquery-3.5.1.js"></script>
<script src="assets/libs/bootstrap/dist/js/jquery.dataTables.min.js"></script>
According to the official Datatable documentation you should follow the following structure :
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>

datatables compatible with jquery 1.12?

I'm trying out DataTables, and I have a similar issue to this user:
how to use jquery datatable plugin properly.
When I try their code I actually have a proper DataTable. But if I use the latest versions of jQuery and DataTables, I only have a basic HTML table.
Are there some issues of compatibility between DataTables and jQuery?
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.css"/>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
});
</script>
</html>
EDIT : Thanks to Rory McCrossan, the links to datatables that I copy-pasted were indeed broken!
The problem is the order of your Js
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
Jquery needs to be initialized first:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
Example:
$(document).ready( function () {
$('#table_id').DataTable();
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
You have a problem - you're importing jQuery DataTables before you're importing jQuery itself. Change your script loading order:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>

Jquery sortable index position

I try to change the index 0 by 1 at the start position in order to refresh the position in my td attribute; How can I change this?
$(document).ready(function() {
$('#sortable').sortable({
update: function(event, ui) {
var data = $(this).sortable("toArray", ui.item.attr("id"));
$(this).children().each(function(index) {
$(this).find('td.ordre').html(index + 1);
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table id="players" name="players" class="table table-striped">
<thead>
<tr>
<td>N°</td>
<td>Nom</td>
<td>Prénom</td>
<td>N° licence</td>
</tr>
</thead>
<tbody id="sortable">
<tr id="1" data-position="1">
<td class="ordre">1</td>
<td>Name 1</td>
<td>Surname 1</td>
</tr>
<tr id="2" data-position="2">
<td class="ordre">2</td>
<td>Name 2</td>
<td>Surname 2</td>
</tr>
<tr id="3" data-position="3">
<td class="ordre">3</td>
<td>Name 3</td>
<td>Surname 3</td>
</tr>
</tbody>
</table>

Datatables. Hide / Show multiple rows within loop

This questions targets to Datatables plug-in for JQuery.
I have HTML table with 3 languages en, ru, fr. For example if English language is chosen French and Russian entries should be hidden, if Russian language is chosen then French and English entries should be hidden and so on.
In the HTML table id looks like:
etc_1_en
etc_1_ru
etc_1_fr
etc_2_en
etc_2_ru
etc_2_fr
etc_3_en
etc_3_ru
etc_3_fr
...
But each entry have the same class: row
HTML table like this:
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr id="etc_1_en" class="row">
<td>Etc 1</td>
<td>Etc 2</td>
</tr>
<tr id="etc_1_ru" class="row">
<td>Etc 3</td>
<td>Etc 4</td>
</tr>
<tr id="etc_1_fr" class="row">
<td>Etc 5</td>
<td>Etc 6</td>
</tr>
<tr id="etc_2_en" class="row">
<td>Foo 1</td>
<td>Foo 2</td>
</tr>
<tr id="etc_2_ru" class="row">
<td>Foo 3</td>
<td>Foo 4</td>
</tr>
<tr id="etc_2_fr" class="row">
<td>Foo 5</td>
<td>Foo 6</td>
</tr>
</tbody>
</table>
There are 3 buttons with ID like:
btn_id_en
btn_id_ru
btn_id_fr
But each button have the same class: btn
Here is JQuery code:
tbl = $('#myTable').DataTable();
var rows = tbl.rows().data();
// there looping through all entries
rows.each(function (row, index) {
var row = tbl.row(index);
var data = row.data();
var id = row.id();
// there trying to assign each row to child variable (using Datatable)
var child = row.child;
if (/* some conditions */) { // if / else conditions is working, tested with console.log();
// this part not working, something wrong with child maybe
child.show();
} else {
// this part not working, something wrong with child maybe
child.hide();
}
}
row.id() returning correct ID of each row (tested via console.log(id);). Problem is that hide not working. I'm thinking that something wrong with declaring child.
Maybe I have to use remove() instead of hide(), but in this case how could I restore it after another button will be clicked?
Have you any ideas?
If you're use case is simply to have buttons then this should work:
var lang = ""
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var thisId = Object.keys(settings.aIds)[dataIndex].split("_")[2]
return thisId === lang;
}
);
var table = $('#example').DataTable({
"language": {
"infoFiltered": ""
}
});
$(".filter").click(function(e) {
lang = $(e.target).attr("id").split("_")[2];
table.draw();
});
Working JSFiddle here: https://jsfiddle.net/annoyingmouse/opu869ko/
That was fun!
You need a custom filter:
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var langs = new Set();
$(".filter").each(function(k, v) {
if ($(v).is(':checked')) {
langs.add($(v).attr("id").split("_")[2]);
}
});
var thisId = Object.keys(settings.aIds)[dataIndex].split("_")[2]
return langs.has(thisId);
}
);
And I'm wary of using buttons as you'd probably need to show the hidden rows at some point so I've replaced them with checkboxes:
<label for="btn_id_en">
<input class="filter" id="btn_id_en" type="checkbox" checked="checked">
English
</label>
<label for="btn_id_ru">
<input class="filter" id="btn_id_ru" type="checkbox" checked="checked">
Russian
</label>
<label for="btn_id_fr">
<input class="filter" id="btn_id_fr" type="checkbox" checked="checked">
French
</label>
<hr>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr id="etc_1_en" class="row">
<td>Etc 1</td>
<td>Etc 2</td>
</tr>
<tr id="etc_1_ru" class="row">
<td>Etc 3</td>
<td>Etc 4</td>
</tr>
<tr id="etc_1_fr" class="row">
<td>Etc 5</td>
<td>Etc 6</td>
</tr>
<tr id="etc_2_en" class="row">
<td>Foo 1</td>
<td>Foo 2</td>
</tr>
<tr id="etc_2_ru" class="row">
<td>Foo 3</td>
<td>Foo 4</td>
</tr>
<tr id="etc_2_fr" class="row">
<td>Foo 5</td>
<td>Foo 6</td>
</tr>
</tbody>
</table>
Working JSFiddle here.
Hope that helps.
child is not a variable but a function. Replacing:
var child = row.child;
with
var child = row.child();
should fix it.
See here: https://datatables.net/reference/api/row().child().hide()

jquery to select second row column using first row column <td> in table

I want to select second row second column using first row second column <td> tag in html table.
Example:
<table>
<tr>
<td>Row 1</td>
<td id="amount-paid">$1.00 USD</td>
</tr>
<tr>
<td>Row 2</td>
<td>$2.69 USD</td>
</tr>
</table>
Now I need to change the Row 2 second column value to "Paid" message.
This I need to do by using the first row second column id "amount-paid".
I tried the below code but it not worked:
$('#amount-paid td:eq(2)').text('Paid');
Try following:
$('#amount-paid td:eq(1)').text('Paid');
How about these?
$('table tr:eq(1) td:eq(1)').text("Paid")
or
$('#amount-paid').closest('tr').next().find('td:eq(1)').text('Paid');
Try using innerHTML instead of text like this:
$('#amount-paid td:eq(1)').innerHTML = 'Paid';
Using jQuery .eq()
$('table tr').eq(1).find('td').eq(1).text('Paid');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Row 1</td>
<td>$1.00 USD</td>
</tr>
<tr id="amount-paid">
<td>Row 2</td>
<td>$2.69 USD</td>
</tr>
</table>

Categories