I'm using DataTables with the columns.render option to implement custom sorting for a table. That works fine when the logic within the sort function only depends on static data. However, I'd like to provide some controls to my users controlling how the sorting should happen. The problem is that it seems like DataTables is caching the first sort result, so when the user tries to change the sorting controls it doesn't have any effect.
In short, I'd like to have a dynamic sort function.
Obviously this is best explained with an example. The idea is to allow the "Info" column to be sorted either by "customer name" or "price", depending on what the user selects in the radio above the table. Run it and you'll see that the sorting only works for the initial radio selection.
$(function() {
var opts = {
"columns": [{
'searchable': false
}, {
'render': function(data, type, row, meta) {
if (type === 'sort') {
var sel = $("input[name=infoFilterOptions]:checked").val();
return $(sel, $(data)).data('value');
}
return data;
}
}]
};
$("#the_table").DataTable(opts);
});
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>
<body>
<div style="color:green; margin-bottom: 10px;">
<div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price
</label>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name
</label>
</div>
<table id="the_table" class="stripe">
<thead>
<tr>
<th>Id</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="John">John</span>
</div>
<div>Price: <span class="info-price" data-value="42.42">$42.42</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span>
</div>
<div>Price: <span class="info-price" data-value="14.0">$14.00</span>
</div>
</td>
</tr>
<tr>
<td>18</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span>
</div>
<div>Price: <span class="info-price" data-value="22.3">$22.30</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Allan answered this question over on the DataTables forums. First class support, as always!
Short answer is that DataTables is indeed caching the sort result. You need to invalidate the data in the table (via row().invalidate() or rows().invalidate()) in order to recompute the sort order.
This does the trick:
$('input[type=radio][name=infoFilterOptions]').on('change', function() {
$("#the_table").DataTable().rows().invalidate();
});
Here's the full example from above including this fix:
$(function() {
var opts = {
"columns": [{
'searchable': false
}, {
'render': function(data, type, row, meta) {
if (type === 'sort') {
var sel = $("input[name=infoFilterOptions]:checked").val();
return $(sel, $(data)).data('value');
}
return data;
}
}]
};
$("#the_table").DataTable(opts);
$('input[type=radio][name=infoFilterOptions]').on('change', function() {
$("#the_table").DataTable().rows().invalidate();
});
});
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>
<body>
<div style="color:green; margin-bottom: 10px;">
<div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price
</label>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name
</label>
</div>
<table id="the_table" class="stripe">
<thead>
<tr>
<th>Id</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="John">John</span>
</div>
<div>Price: <span class="info-price" data-value="42.42">$42.42</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span>
</div>
<div>Price: <span class="info-price" data-value="14.0">$14.00</span>
</div>
</td>
</tr>
<tr>
<td>18</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span>
</div>
<div>Price: <span class="info-price" data-value="22.3">$22.30</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I want to check the checkbox items by looking for its value using JavaScript; I have the below test table with input form. When I put the value id to the form also hitting enter, then checking its checkbox.
For now the JavaScript is checking if value is = 1, but I want to make the value come from the input form to checking specific record.
$(document).ready(function() {
var chkbox = $('.customcheckbox');
$(".customvalue").keyup(function() {
chkbox.prop('checked', this.value == 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card-header">
<h4 class="text-center">Checking Checkboxes by Id </h4>
<div class="col-md-12">
<div class="card-md-4">
<div class="card-body">
<input id="myTxt" type="text" value="" name="search" class="form-control ml-auto m-2 customvalue" style="width: 25%;" placeholder="Enter barcode">
<form action="delete.php" method="post">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>
<button type="submit" name="stud_delete_multiple_btn" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete selected?')">DELETE</button>
</th>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10px;text-align:center">
<input type="checkbox" name="stud_id_1" class="customcheckbox" value="1">
</td>
<td>1</td>
<td>Susana</td>
<td>Daivid</td>
</tr>
<tr>
<td style="width: 10px;text-align:center">
<input type="checkbox" name="stud_id_1" class="customcheckbox" value="2">
</td>
<td>2</td>
<td>Sose</td>
<td>Nawsat</td>
</tr>
<tr>
<td style="width: 10px;text-align:center">
<input type="checkbox" name="stud_id_1" class="customcheckbox" value="3">
</td>
<td>3</td>
<td>Primso</td>
<td>Navid</td>
</tr>
<tr>
<td style="width: 10px;text-align:center">
<input type="checkbox" name="stud_id_1" class="customcheckbox" value="4">
</td>
<td>4</td>
<td>Lila</td>
<td>Noord</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</col-md-12>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
$(document).ready(function() {
var chkbox = $('.customcheckbox');
$(".customvalue").keyup(function() {
const customValue = $(this).val();
chkbox.each(function() {
$(this).prop('checked', customValue == $(this).val());
});
});
});
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$('#sp1').on('click', function() {
$("#t1").show();
});
$('#close').on('click', function() {
$("#t1").hide();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>
<div class="col-md-12 col-12 table-responsive">
<div class="form-group">
<div class="col-md-12" style="padding: 10px !important;" align="center">
<div class="form-group">Main heading</div>
</div>
<table class="table table-hover">
<thead class="lbbg3">
<tr>
<td style="width: 800px;">Sub heading 1</td>
<td>Sub heading 2</td>
</tr>
</thead>
<tbody>
<tr>
<th style="background: #eef7fc; text-align: left;" colspan="2">
<button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button><button class="table-minus-btn" id="close"><i class="fa fa-minus"></i></button> Child Heading
</th>
</tr>
<tr>
<td colspan="2">
<div class="table1shw">
<table class="table1 table-hover" id="t1">
<tr>
<td style="text-align: left; width: 800px;">
Row 1
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<a href="#doc">
<input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
<label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
</a>
</div>
</td>
</tr>
<tr>
<td style="text-align: left; width: 800px;">
Row 2
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
<label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Hi, Currently i am using two button Plus and minus, Just i need to display at time one button. when the plus button click the hidden table will get displayed and minus button should appear and plus button is hide. same for the minus button too. more we can say toggle button. also required can we display at time only one hidden table.
All the code and table currently working fine i used this method for accordion but not used for table.
also you can write it a bit shorter
$(document).ready(function() {
$("#t1, #close").hide();
$('#sp1, #close').on('click', function() {
$('#t1, .table-plus-btn, .table-minus-btn').toggle();
});
});
You can hide / show buttons based on the click. I added the function toggleButtons(show) where show is equal to if you want to show or hide the row.
function toggleButtons(show) {
if (show) {
$("#sp1").hide();
$("#close").show();
} else {
$("#sp1").show();
$("#close").hide();
}
}
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$('#sp1').on('click', function() {
toggleButtons(true)
$("#t1").show();
});
$('#close').on('click', function() {
toggleButtons(false)
$("#t1").hide();
});
function toggleButtons(show) {
if (show) {
$("#sp1").hide();
$("#close").show();
} else {
$("#sp1").show();
$("#close").hide();
}
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>
<div class="col-md-12 col-12 table-responsive">
<div class="form-group">
<div class="col-md-12" style="padding: 10px !important;" align="center">
<div class="form-group">Main heading</div>
</div>
<table class="table table-hover">
<thead class="lbbg3">
<tr>
<td style="width: 800px;">Sub heading 1</td>
<td>Sub heading 2</td>
</tr>
</thead>
<tbody>
<tr>
<th style="background: #eef7fc; text-align: left;" colspan="2">
<button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button>
<button class="table-minus-btn" id="close" style="display: none"><i class="fa fa-minus"></i></button>
Child Heading
</th>
</tr>
<tr>
<td colspan="2">
<div class="table1shw">
<table class="table1 table-hover" id="t1">
<tr>
<td style="text-align: left; width: 800px;">
Row 1
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<a href="#doc">
<input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
<label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
</a>
</div>
</td>
</tr>
<tr>
<td style="text-align: left; width: 800px;">
Row 2
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
<label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
If I am not mistaken this is what you want to do:
First - Display the plus button, and hide the table
Second- When plus button is clicked display the table, hide the plus button, and show the minus button
Third- When the minus button is clicked, hide the minus button, show the plus button, and hide the table.
It seems that you're code isn't working BECAUSE you are not hiding/displaying the buttons at the appropriate time. I am also assuming only one button should be shown at a time?
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$("#close").hide(); //hide the minus button as well if you only want one button to display at a time
$('#sp1').on('click', function() { //when plus button is clicked
$("#t1").show();
$("#sp1").hide(); //you need to hide the plus button now
$("#close").show(); //and then display the minus button
});
$('#close').on('click', function() {
$("#t1").hide(); //hide table
$("#close").hide(); //hide minus btn
$("#sp1").show(); //show plus button
});
});
So I've been trying to create a dynamic table for the better part of the day. I created two dropdown options which would display different table results depending on what's been selected and had got it working, however I realized a bug. I can only put one word as the dropdown selections. Any option with more than one word will break.
Here's my code below for html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamic Tables</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/showhide.js"></script>
</head>
<body>
<h2>HTML Table</h2>
<!-- Drop Down Begin -->
<div id="benefits" style="display: inline-block;">
Benefits
</div>
<div id="skyecc" style="display: inline-block;">
SKYECC
</div>
<div id="option1" style="display: inline-block;">
<select class="selectOption">
<option>Analytics1</option>
<option>Translation1</option>
<option>Poll1</option>
</select>
</div>
<div id="option2" style="display: inline-block;">
<select class="selectOption2">
<option>Analytics2</option>
<option>Translation2</option>
<option>Poll2</option>
</select>
</div>
<!-- Drop Down End -->
<br><br>
<!-- Table and Drop Down Results Start -->
<div id="changingArea" style="display: inline-block;">
<div id="Analytics1" class="desc">
<table style="float: left;">
<tr>
<td>Analytics P1</td>
</tr>
<tr>
<td>Analytics P2</td>
</tr>
<tr>
<td>Analytics P3</td>
</tr>
</table>
</div>
<div id="Translation1" class="desc">
<table style="float: left;">
<tr>
<td>Translation P1</td>
</tr>
<tr>
<td>Translation P2</td>
</tr>
<tr>
<td>Translation P3</td>
</tr>
</table>
</div>
<div id="Poll1" class="desc">
<table style="float: left;">
<tr>
<td>Poll P1</td>
</tr>
<tr>
<td>Poll P2</td>
</tr>
<tr>
<td>Poll P3</td>
</tr>
</table>
</div>
</div>
<div id="changingArea2" style="display: inline-block;">
<div id="Analytics2" class="desc2">
<table style="float: left;">
<tr>
<td>Analytics T1</td>
</tr>
<tr>
<td>Analytics T2</td>
</tr>
<tr>
<td>Analytics T3</td>
</tr>
</table>
</div>
<div id="Translation2" class="desc2">
<table style="float: left;">
<tr>
<td>Translation2 T1</td>
</tr>
<tr>
<td>Translation2 T2</td>
</tr>
<tr>
<td>Translation2 T3</td>
</tr>
</table>
</div>
<div id="Poll2" class="desc2">
<table style="float: left;">
<tr>
<td>Poll2 T1</td>
</tr>
<tr>
<td>Poll2 T2</td>
</tr>
<tr>
<td>Poll2 T3</td>
</tr>
</table>
</div>
</div>
<!-- Table and Drop Down Results End -->
</body>
</html>
Here's my code for css:
h2 {
text-align: center;
}
.desc {display: none;}
Heres my js:
$(function(){
$('.selectOption').change(function(){
var selected = $(this).find(':selected').text();
//alert(selected);
$(".desc").hide();
$('#' + selected).show();
}).change()
});
$(function(){
$('.selectOption2').change(function(){
var selected = $(this).find(':selected').text();
//alert(selected);
$(".desc2").hide();
$('#' + selected).show();
}).change()
});
As i'm a complete noob when it comes to js, any help, suggestions, or insights would be much appreciated.
Thanks again in advance!
That's because you can't have spaces in ID. If your option is two words then this line
$('#' + selected).show();
is selecting for #two words - tag words within the element with ID two.
Usually things like this are done by using a concatenated values for the IDs as well as the option values, while leaving the option text readable.
Make your select like this
<select class="selectOption">
<option value="analytics1">Analytics 1</option>
<option value="translation1">Translation 1</option>
<option value="poll1">Poll 1</option>
</select>
And you can retrieve the selected value with a simple $(this).val() instead of finding the selected option and retrieving text or the value attribute from it.
I want to press enter on the 'Buscar' input and focus on the first input ( 'Qtd on the table').
I tried
$(this).nextAll('input').first().focus();
$(this).next('input:text').focus();
And a lot of solutions and other codes I found here and online but nothing worked. I didn't get any errors on the console which makes it harder to find out what I'm missing.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
First, you shouldn't be setting numerical ids. Second, buscar has no siblings so you can't say nextAll because they aren't any siblings.
What you can do is watch the input for an enter key up and focus on the first input with the name quantidade. See the first function below.
$('#busca').on('keyup', function(e){
if(e.which === 13){
$('input[name="quantidade"]').first().focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
// get all the inputs that are not disabled and not hidden
var $allInputs = $(':input:not(:disabled):not(:hidden)');
$('#busca').on('keyup', function(e){
// if enter was pressed
if ((e.keyCode || e.which) === 13) {
// cancel any form submit that might happen
e.preventDefault();
// focus on the input that is the next index after the index that busca has
$allInputs.eq( $allInputs.index(this) + 1 ).focus();
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<center>
<div class="form-group has-feedback">
<input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
</div>
</center>
<table class="table table-striped">
<thead class="thead-dark">
<th class="w-50">Material</th>
<th>Unidade</th>
<th>Quantidade</th>
<th class="w-25">Preço</th>
<th>Qtd</th>
</thead>
<tbody class="resultado" id="lista">
<tr id="row1">
<td style="display:none;">1</td>
<td>Adesivo Instantâneo Almasuper 100g</td>
<td>Galão</td>
<td>64</td>
<td>R$ 20,00</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="1" type="text" class="form-control" name="quantidade">
</div>
</td>
</tr>
<tr id="row4">
<td style="display:none;">4</td>
<td>Batente Silicone Adesivo 12mm com 25</td>
<td>Cartela</td>
<td></td>
<td>R$ 6,50</td>
<td>
<div class="qtd" style="width: 60px;">
<input id="4" type="text" class="form-control" name="quantidade">
</div>
</td>
</tbody>
</table>
</div>
</div>
I've got a table with checkboxes. When the checkbox is checked there should be an twitter bootstrap popover with a form in it. This form is dependent to its checkbox. therefore i will render hidden forms and show them in an twitter popover.
But when I try to access the popover content with $(this).next(".my_class").html(); it's not working. When I render fixed content with return $("#my_id").html();
Here is an example (here as jsfiddle):
My html tables
<h4 class="hide">fixed form</h4>
<div id="popover-head" class="popover-head hide">fixed form</div>
<div id="popover-content" class="popover-content hide">
<form>
<!-- my form -->
</form>
</div>
<h4>table one working popover</h4>
<table class="table table-striped">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input title="" class="checkbox_cancel" id="checkbox1" type="checkbox">
</td>
</tr>
<tr>
<td>
<input title="" class="checkbox_cancel" id="checkbox1" type="checkbox">
</td>
</tr>
</tbody>
</table>
<h4>table two not working popover</h4>
<table class="table table-striped">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
</td>
<div id="popover-head" class="popover-head hide">dynamic form 1</div>
<div id="popover-content" class="popover-content hide">
<form>
<!-- my form -->
</form>
</div>
</tr>
<tr>
<td>
<input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
</td>
<div id="popover-head" class="popover-head hide">dynamic form 2</div>
<div id="popover-content" class="popover-content hide">
<form>
<!-- my form -->
</form>
</div>
</tr>
</tbody>
</table>
My javascript:
//working
$('.checkbox_cancel').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
//not working
$('.checkbox_cancel2').popover({
html : true,
title: function() {
return $(this).next(".popover-head").html();
},
content: function() {
return $(this).next(".popover-content").html();
}
});
How could I get this to work with dynamic selection?
Looks like your code should work but your html isn't correct (next is the next element) the following should work:
<tr>
<td>
<input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
<div id="popover-head" class="popover-head hide">dynamic form 1</div>
<div id="popover-content" class="popover-content hide">
<form>
<!-- my form -->
</form>
</div>
</td>