I am need to perform search on the below code ..
When I type something on search textbox all table data is hiding but never coming back. what is happening here..please help me on this
my search textbox is inside the body of the table and panels are required, can't remove those panels
When I type something on search textbox all table data is hiding but never coming back. what is happening here..please help me on this
my search textbox is inside the body of the table and panels are required, can't remove those
When I type something on search textbox all table data is hiding but never coming back. what is happening here..please help me on this
my search textbox is inside the body of the table and panels are required, can't remove those
<!DOCTYPE html>
<html>
<head>
js code:
enter code here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Search on name column only
$('#SearchValue').keyup(function () {
// Search Text
var search = $(this).val();
// Hide all table tbody rows
$('table tbody tr').hide();
// Count total search result
var len = $('table tbody tr: td:nth-child(1):contains("' + search + '")').length;
if (len > 0) {
// Searching text in columns and show match row
$('table tbody tr: td:contains("' + search + '")').each(function () {
$(this).closest('tr').show();
});
}
else {
$('table tbody tr').show();
}
});
});
//// Case-insensitive searching (Note - remove the below script for Case sensitive search )
//$.expr[":"].contains = $.expr.createPseudo(function (arg) {
// return function (elem) {
// return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
// };
//});
</script>
</head>
<body>
<div class="col-md-4 col-xs-12 sideBlock">
<div class="panel panel-default">
<div class="panel-heading">
Site Details Search:
<input type="text" id="SearchValue" placeholder=" search name"/>
</div>
<div class="panel-body">
<div class="table-responsive" id="SiteDetails" style="height:430px;overflow-y: auto;">
<table class="table table-hover" id="tblSiteDetails">
<tbody>
<tr class="test testremove" id="Site46">
<td class="Normal"> 1. AnotherTestSite<button type="button" class="pull-right btn btn-grey btn-xs" id="site_46" onclick="ChangeColorforSensor('Site46', 'Normal'); ShowSitePopup('[object Object]', '(38.627002, -90.199404)', 'AnotherTestSite', '46', 'Normal', '8050 West Florissant', 'CSK Ltd.', '2');">Normal</button></td>
</tr>
<tr class="test testremove" id="Site43">
<td class="Normal"> 2. CB2<button type="button" class="pull-right btn btn-grey btn-xs" id="site_43" onclick="ChangeColorforSensor('Site43', 'Normal'); ShowSitePopup('[object Object]', '(25.556044, 84.66033)', 'CB2', '43', 'Normal', 'HYD', 'CSK Ltd.', '1');">Normal</button></td>
</tr>
<tr class="test testremove" id="Site48">
<td class="Normal"> 3. Eswar-TestSite<button type="button" class="pull-right btn btn-success btn-xs" id="site_48" onclick="ChangeColorforSensor('Site48', 'Normal'); ShowSitePopup('[object Object]', '(17.385044, 78.486671)', 'Eswar-TestSite', '48', 'Normal', 'plot 203, pushparesidency, kamalanagar, medipalli, Uppal', '3334', '1');">Normal</button></td>
</tr>
<tr class="test testremove" id="Site32"><td class="Critical"> 4. FFT_Test_Site<button type="button" class="pull-right btn btn-danger btn-xs" id="site_32" onclick="ChangeColorforSensor('Site32', 'Critical'); ShowSitePopup('[object Object]', '(17.451788, 78.372044)', 'FFT_Test_Site', '32', 'Critical', 'TMTC', 'CSK Ltd.', '3');">Critical</button></td></tr>
<tr class="test testremove" id="Site35"><td class="Critical"> 5. NMC<button type="button" class="pull-right btn btn-grey btn-xs" id="site_35" onclick="ChangeColorforSensor('Site35', 'Critical'); ShowSitePopup('[object Object]', '(38.627002, -90.199404)', 'NMC', '35', 'Critical', '8050 W. Florissant Ave', 'Test Motor Corporation', '1');">Critical</button></td></tr>
<tr class="test testremove" id="Site38"><td class="Normal"> 6. PROD SETUP<button type="button" class="pull-right btn btn-grey btn-xs" id="site_38" onclick="ChangeColorforSensor('Site38', 'Normal'); ShowSitePopup('[object Object]', '(38.627002, -90.199404)', 'PROD SETUP', '38', 'Normal', 'St Louis', 'Test Motor Corporation', '1');">Normal</button></td></tr>
<tr class="test testremove" id="Site39"><td class="Critical"> 7. Plexus_Site<button type="button" class="pull-right btn btn-danger btn-xs" id="site_39" onclick="ChangeColorforSensor('Site39', 'Critical'); ShowSitePopup('[object Object]', '(-15.230583, 129.494306)', 'Plexus_Site', '39', 'Critical', 'Plexus', 'CSK Ltd.', '1');">Critical</button></td></tr>
<tr class="test testremove" id="Site40"><td class="Fair"> 8. Plexus_Test_STL<button type="button" class="pull-right btn btn-warning btn-xs fairbtnwidth" id="site_40" onclick="ChangeColorforSensor('Site40', 'Fair'); ShowSitePopup('[object Object]', '(37.065525, -90.441103)', 'Plexus_Test_STL', '40', 'Fair', '8050 W Florissant', 'CSK Ltd.', '2');">Fair</button></td></tr>
<tr class="test testremove" id="Site36"><td class="Normal"> 9. SD_Card_Site<button type="button" class="pull-right btn btn-success btn-xs" id="site_36" onclick="ChangeColorforSensor('Site36', 'Normal'); ShowSitePopup('[object Object]', '(51.50735, -0.127758)', 'SD_Card_Site', '36', 'Normal', 'Test', 'CSK Ltd.', '1');">Normal</button></td></tr>
<tr class="test testremove" id="Site33"><td class="Normal"> 10. Sam Test Site<button type="button" class="pull-right btn btn-grey btn-xs" id="site_33" onclick="ChangeColorforSensor('Site33', 'Normal'); ShowSitePopup('[object Object]', '(28.084589, 104.979385)', 'Sam Test Site', '33', 'Normal', 'TMTC, Hyderabad', 'CSK Ltd.', '1');">Normal</button></td></tr>
<tr class="test testremove" id="Site44"><td class="Normal"> 11. T123<button type="button" class="pull-right btn btn-success btn-xs" id="site_44" onclick="ChangeColorforSensor('Site44', 'Normal'); ShowSitePopup('[object Object]', '(37.061973, -97.038371)', 'T123', '44', 'Normal', 'XXX', 'TestCmp', '0');">Normal</button></td></tr>
<tr class="test testremove" id="Site3"><td class="Normal"> 12. TMTC_Subscriber_Site<button type="button" class="pull-right btn btn-grey btn-xs" id="site_3" onclick="ChangeColorforSensor('Site3', 'Normal'); ShowSitePopup('[object Object]', '(55.632955, 99.223156)', 'TMTC_Subscriber_Site', '3', 'Normal', 'Begumpet, Hyderabad', 'CSK Ltd.', '1');">Normal</button></td></tr>
<tr class="test testremove" id="Site42"><td class="Critical"> 13. TestSite01<button type="button" class="pull-right btn btn-danger btn-xs" id="site_42" onclick="ChangeColorforSensor('Site42', 'Critical'); ShowSitePopup('[object Object]', '(62.3919, 6.598008)', 'TestSite01', '42', 'Critical', 'Vijayawada', 'CSK Ltd.', '1');">Critical</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
You selector has some issues there:
`.table tbody tr td:nth-child(1):contains(${search})`
JQuery:
$(document).ready(function () {
// Search on name column only
$('#SearchValue').keyup(function () {
// Search Text
var search = $(this).val();
// Hide all table tbody rows
$('table tbody tr').hide();
const select2 = `.table tbody tr td:nth-child(1):contains(${search})`;
// Count total search result
var len = $(select2).length;
console.log(select2);
if (len > 0) {
// Searching text in columns and show match row
$(select2).each(function () {
$(this).closest('tr').show();
});
}
else {
$('table tbody tr').show();
}
});
});
https://jsfiddle.net/ramseyfeng/p34bfyzw/
I am trying to create a new table row every time the associated button is clicked. However, once I click the button and I go to select the row, it does not get highlighted. I have an append function that passes a <tr> to the html. My end goal is to have the the new row that was appended become clickable and can be selected.
Code:
<div class="col-md-3 left-pane">
<div class="row justify-content-md-center">
<button class="btn btn-sm btn-block eNew">New Tier</button>
</div>
<hr>
<table class="table table-sm table-hover tAdd">
<tbody>
<tr>
<td>IIS</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>SQL</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>Windows File Share</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>Etc</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
</tbody>
</table>
</div>
Javascript:
$(".eNew").on("click", function(event){
$(".tAdd tbody").append(
"<tr>" +
"<td>New Selector</td>" +
"<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
"</tr>"
);
$(".tAdd tr").click(function() {
$(".tAdd tr").removeAttr('class');
$(this).toggleClass("table-active");
});
Also, it works for the original <tr> that is in the html file but for some reason when I append a table row it does not work.
This is entirely due to the fact that dynamic content is not bound using the event handler you have declared:
$(".eNew").on("click", function(event){
Although this will bind to all .eNew elements when the code first runs, new elements will not be bound.
Instead, bind to the document and specify .eNew as a selector for the click event and it will work:
$(document).on("click", ".eNew", function(event){
Edit following OP comment about not working
Just to verify that your code should now look like this:
$(document).on("click", ".eNew", function(event){
$(".tAdd tbody").append(
"<tr>" +
"<td>New Selector</td>" +
"<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
"</tr>"
);
});
$(document).on("click", ".tAdd tr", function(event){
$(".tAdd tr").removeAttr('class');
$(this).toggleClass("table-active");
});
I have a jQuery Datatable and I dynamically add rows. Each row has a cell in which there's a delete button. My problem is that I can't get to delete the rows with the buttons and I can't even manage to target the current row.
Here's my DataTable code :
var tab_presta = $("#tableau_presta").DataTable({
"searching": false,
"paging": false,
"ordering": false,
"info": false,
responsive: true,
"language": {
"emptyTable": "No product added to the contract for the moment."
}
});
Here is how I create the buttons on each row (on a submit event) :
form2.on('submit', function (event) {
tab_presta.row.add(
[
'<center><button type="button" id="btn_supp' + (++idCount) + '" onclick="alert(this.parentNode)" class="btn btn-xs btn-block btn-danger confirmation">Delete</button></center>'
]
)
.draw( false );
// here I dynamically add an id to each button based on a variable
$('.btn btn-xs btn-block btn-danger confirmation').each(function() {
$(this).attr('id', 'suppr' + idCount);
idCount++;
});
});
And here is my code for deleting when clicking on each button :
for (j = 0; j <= btn_count; j++) {
$("#tableau_presta").on("click", btn_supp[j], function(){
//tab_presta.row($(this).parents('tr')).remove().draw(false);
var row = $(this).closest("tr");
console.log(row);
});
}
As you can see I commented the remove() part because it doesn't work, so I tried to find the closest tr of $(this) (button), but I don't get the row in the console as a result. It's empty and I don't understand why because the button actually exists and I can get its id when I click on it if I put a onclick"alert(this.id).
Any idea ?
You don't need to bind the click event inside of a loop. Instead, use a class or an attribute selector. In this case, selecting all elements with an id that ^ starts with btn_supp = [id^=btn_supp].
$("#tableau_presta").on("click", "[id^=btn_supp]", function() {
$(this).closest("tr").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableau_presta">
<tr>
<td>
<button type="button" id="btn_supp1" class="btn btn-xs btn-block btn-danger confirmation">Delete</button>
</td>
</tr>
<tr>
<td>
<button type="button" id="btn_supp2" class="btn btn-xs btn-block btn-danger confirmation">Delete</button>
</td>
</tr>
</table>
I have a problem. How to pass the value of the variable to the bootbox in the loop.
I have an array taken from the database and displayed in a loop:
<tr>
<td>Order nr1</td>
<td></td>
<td>
<button id="confirm-delete-modal" type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
<tr>
<td>Order nr2</td>
<td></td>
<td>
<button id="confirm-delete-modal" type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
And Js Bootbox:
$('#confirm-delete-modal').click(function() {
var tesst = "aaa";
bootbox.confirm({
message: "Delete?",
buttons: {
confirm: {
label: 'YES',
className: 'btn-danger'
},
cancel: {
label: 'NO',
className: 'btn-success'
}
},
callback: function (result) {
if(result)
{
window.location.href = "/"+ tesst
}
}
});
});
I would like to pass a separate Id to the link for each row in the loop.How can I do this?
I added a data-index="" to the HTML, this way you can send "parameters" to your click function.
$('.btn').click(function() {
var index = $(this).data("index");
alert(index);
});
<button id="confirm-delete-modal" type="button"
class="btn btn-danger btn-sm" data-index="1">Delete</button>
<button id="confirm-delete-modal" type="button"
class="btn btn-danger btn-sm" data-index="2">Delete</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Notice that I also changed your selector, since it was selecting just one HTML element id (you have two elements with the same id). Try to create a new class and selecting this class instead (in this example I used just the normal btn class).
I have a datatable that I need to add rows dynamically throught t.row.add(), the table is composed by 4 columns, one of them has buttons inside, those buttons are Show & Edit, and they need the {{ row.id }} so the can be shown or edit, the problem is that I don't know how get the twig variable works. Here is my table code:
<table class="table table-striped table-bordered table-hover" id="sample_2">
<thead>
<tr>
<th class="table-checkbox noprint" style="text-align:center;">
<input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" disabled/>
</th>
<th width="40%" style="text-align:center;">
Valoraciones
</th>
<th width="20%" style="text-align:center;">
Estado
</th>
<th width="20%" style="text-align:center;" class="noprint">
Acciones
</th>
</tr>
</thead>
<tbody>
{% for valoracion in valoracion %}
<tr class="odd gradeX" id="fila{{ valoracion.id }}">
<td class="noprint">
<input type="checkbox" class="checkboxes" disabled/>
</td>
<td style="text-align:center;" id="valoracion">
{{ valoracion.descripcion }}
</td>
{% if valoracion.enabled == 1 %}
<td style="text-align:center;" id="estadoValEnable">Activo</td>
{% else %}
<td style="text-align:center;" id="estadoValEnable">Inactivo</td>
{% endif %}
<td style="text-align:center;" class="noprint">
<a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion({{valoracion.id}})">Ver</a>
<a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails({{valoracion.id}})">Editar</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
and here is the action to create a new row (the create action is in a modal view):
function sendDataCreateValoracionDetails() {
if ($('#CrearValoracionMantenimiento').val() == "") {
Notificacion("error", "La descripión de la competencia no puede estar vacía");
$('#CrearValoracionMantenimiento').focus();
} else {
$.blockUI({
baseZ: 20000,
message: '<h4><img src="{{ asset('
assets / global / plugins / cubeportfolio / cubeportfolio / img / cbp - loading.gif ') }}" /> Guardando datos, por favor espere...</h4>'
});
var form = document.getElementById("formCreateMantenimientoValoracionDetails");
var formData = new FormData(form);
$.ajax({
url: '{{ path('
createValoracionMantenimiento ') }}',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(returndata) {
if (returndata.success == true) {
$.unblockUI();
$('#crearValoracion').modal('hide');
Notificacion("success", "Valoración RP", "Los datos se han guardado correctamente.");
if ($('#EstadoValoracion').attr('checked')) {
var status = "Activo";
} else {
var status = "Inactivo";
}
$(document).ready(function() {
var t = $('#sample_2').addClass('centro').DataTable();
$("#sample_2").each(function() {
t.row.add([
'<tr>' +
'<td><input type="checkbox" class="checkboxes" disabled/></td>',
'<td>' + ($("#CrearValoracionMantenimiento").val()) + '</td>',
'<td>' + status + '</td>',
'<td ><a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion(' {
{
valoracion.id
}
}
')">Ver</a><a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails(' {
{
valoracion.id
}
}
')">Editar</a></td></tr>',
]).draw(false);
});
});
} else {
if (returndata.success == false) {
$.unblockUI();
Notificacion("error", "Valoración RP", "Existe una valoración igual.");
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
Notificacion("error", "Valoración RP", "Ha existido un problema y no se ha podido crear la valoración.");
$.unblockUI();
}
});
}
}
These are my buttons:
<a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion('{{ valoracion.id }}')">Ver</a>
<a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails('{{ valoracion.id }} ')">Editar</a>
and these are the twig parameters I need to pas inside the functions:
onclick="showMantenimientoValoracion('{{ valoracion.id }}') ///
onclick="editMantenimientoValoracionDetails('{{ valoracion.id }} ')`
here is the function code:
if ($('#EstadoValoracion').attr('checked')) {
var status = "Activo";
} else {
var status = "Inactivo";
}
$(document).ready(function() {
var t = $('#sample_2').addClass('centro').DataTable();
$("#sample_2").each(function() {
t.row.add([
'<tr>' +
'<td><input type="checkbox" class="checkboxes" disabled/></td>',
'<td>' + ($("#CrearValoracionMantenimiento").val()) + '</td>',
'<td>' + status + '</td>',
'<td ><a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion(' {
{
valoracion.id
}
}
')">Ver</a><a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails(' {
{
valoracion.id
}
}
')">Editar</a></td></tr>',
]).draw(false);
});
});
Thanks everyone :)
A twig variable can be readed by using .twig extension to the file name ends , When I need to use a variable twig inside javascript function, I create it inside file twig. There is not another way.
Just remove the quotes from the twig variable -
onclick="showMantenimientoValoracion('{{ valoracion.id }}')
should be
onclick="showMantenimientoValoracion({{ valoracion.id }})
And in your javascript function add the parameter -
function sendDataCreateValoracionDetails(valoracion_id) {
console.log(valoracion_id)
// Your code goes here
}
This should do it.