I am trying to get the selected data from table, I am using bootstrap and jquery. After selecting checkbox and click on Add to Cart button I have to get the selected data from table. Below is my code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
<script type="text/javascript">
var checkedRows = [];
$('#eventsTable').on('.bs-checkbox', function (e, row) {
checkedRows.push({id: row.id, name: row.name, forks: row.forks});
console.log(checkedRows);
});
$('#eventsTable').on('uncheck.bs.table', function (e, row) {
$.each(checkedRows, function(index, value) {
if (value.id === row.id) {
checkedRows.splice(index,1);
}
});
console.log(checkedRows);
});
$("#add_cart").click(function() {
$("#output").empty();
console.log(checkedRows);
$.each(checkedRows, function(index, value) {
$('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
});
});
</script>
</head>
<body>
<div style="position: absolute;bottom: 42px; padding-left:10px; ">
<table id="eventsTable"
data-toggle="table"
data-height="300"
data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
<button id="add_cart">Add to card</button>
<ul id="output"></ul>
</div>
</body>
</html>
When I click on my button none of my jquery functions are calling.
I have referred :
Getting values of selected table rows in bootstrap using jquery
Kindly help me to resolve this. Thanks in advance.
The problem is casued by the fact that your js loads before the DOM is ready.
You can do one of two things:
Put your script tag with the event handlers in it before
</body>
Add a document ready event around your code
$(document).ready(function(){
// your code here
});
Use #add_cart click function like this
$(document).ready(function(){
$("#add_cart").click(function() {
$("#output").empty();
$("tbody tr").each(function() {
if($(this).hasClass("selected")){
$('#output').append($('<li>'+$(this).find("td:eq(1)").text()+' | '+$(this).find("td:eq(2)").text()+'</li>'));
}
});
});
});
Related
I'm re-writing a project of mine to better align with the best practice documentation. I'm most of the way there, but it seems the jQuery I'm using to make the rows of my table sortable is not working. When I inspect the raw HTML of the table when it loads following the async call, I noticed that the sortable classes that the jQuery sortable widget is supposed to embed is not there (I can see it in my old code).
I have the relevant code duplicated on this sheet, but I'll include it here:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base target="_top">
<?!= include('1.1 openPackV2Stylesheet'); ?>
</head>
<body>
<div class="grid-container">
<table id="awayLineup">
<thead>
<tr>
<th></th>
<th>Rtg</th>
<th>Season</th>
<th>Name</th>
<th>Age</th>
<th>Team</th>
<th>OB</th>
<th>Out</th>
<th>Walk</th>
<th>Single</th>
<th>Single+</th>
<th>Double</th>
<th>Double+</th>
<th>Triple</th>
<th>Homer</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<?!= include('1.1 openPackV2Javascript'); ?>
</body>
</html>
1.1 openPackV2Javascript
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
function displayAwayLineup(awayLineup){
// $('.loading').style.display("hidden");
var tbody = $('#awayLineup > tbody');
for (i in awayLineup){
tbody.append(
'<tr><td class="demographics">'+awayLineup[i][54]+'</td><td class="demographics">'+awayLineup[i][52]+'</td><td class="demographics">'+awayLineup[i][0]+'</td><td class="playerName">'+awayLineup[i][3]+'</td><td class="demographics">'+awayLineup[i][4]+'</td><td class="demographics">'+awayLineup[i][7]+'</td><td class="cardData"><span class="circle">'+awayLineup[i][32]+'</span></td><td class="cardData">'+awayLineup[i][33]+'</td><td class="cardData">'+awayLineup[i][34]+'</td><td class="cardData">'+awayLineup[i][35]+'</td><td class="cardData">'+awayLineup[i][36]+'</td><td class="cardData">'+awayLineup[i][37]+'</td><td class="cardData">'+awayLineup[i][38]+'</td><td class="cardData">'+awayLineup[i][39]+'</td><td class="cardData">'+awayLineup[i][40]+'</td></tr>')
}
}
// make tables sortable
$(window).on("load", function(){
$("table tbody").sortable({
helper:function(e,row){
var originalCells = row.children();
var cloneRow = row.clone();
cloneRow.children().each(function(index){
$(this).width(originalCells.eq(index).width());
})
return cloneRow;
}
});
});
</script>
When I saw your script, it seems that jQuery UI is not loaded. So, how about the following modification?
From:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
To:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
google.script.run.withSuccessHandler(displayAwayLineup).getLineupV2();
});
In your script, var awayLineup = of var awayLineup = google.script.run can be removed.
Reference:
jQuery UI
I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```
When ever I click submit button, page just get refreshed. However this code works everywhere.
The form id is #pager. Code that is note working as expected is
$("#pager").submit(function(e){
console.log("Hi!!!")
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<script>
// The Edit and
function actionFormatter(value, row, index) {
return [
'<a class="edit ml10" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove ml10" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join(' ');
}
$.ajax({
type:"GET",
crossDomain: true,
beforeSend: function (request)
{
request.setRequestHeader("Content-Type", "application/json");
},
url: "http://localhost:5000/api/members/",
processData: false,
success: function(msg) {
console.log(msg);
$('#memberTable').bootstrapTable({
data: msg
});
}
});
$(function () {
$('#memberTable').on('all.bs.table', function (e, name, args) {
console.log(args);
})
.on('check.bs.table', function (e, row) {
console.log(row);
})
});
window.actionEvents = {
'click .edit': function (e, value, row, index) {
console.log(row);
},
'click .remove': function (e, value, row, index) {
console.log(row);
}
};
$("#pager").submit(function(e){
console.log("Hi!!!")
});
</script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Member Data</h2>
<p>
<br>
<table id="memberTable" data-search="true"
>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name" data-sortable="true" >Name</th>
<th data-field="phone">Phone</th>
<th data-field="date" data-sortable="true">Date</th>
<th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
</tr>
</thead>
</table>
</p>
<br>
</div></div>
<div class="row">
<div class="col-sm-12">
<form id = "pager">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block"></span>
<button type="submit" id="sendButton" class="form-control btn btn-primary">Send</button>
</form>
</div>
</div></div>
</body>
</html>
Looks like there are two problems here. The first is that you need to prevent the default form behavior so that the page doesn't redirect.
The second is that you need to instantiate your listener after the document is ready. At the moment your listener gets added before the DOM is ready so it's never actually running. This should solve both problems.
$(function() {
$("#pager").submit(function(e) {
e.preventDefault();
console.log("Hi!!!")
});
// You should probably put the rest of your Javascript in here too, so it doesn't run until the DOM is fully ready.
});
You can read more about event.preventDefault here. And document.ready here.
I have a Bootstrap table somewhat like this:
<table id="myTable">
<tr>
<th data-field="name" data-formatter="nameFormatter"></th>
<th data-field="number" data-formatter="numberFormatter"></th>
<th class="newClass"></th>
</tr>
</table>
jQuery
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
// $('.newClass').removeClass('newClass');
$('.newClass').addClass('shown') // <-- this doesn't seem to work
}
CSS
td.newClass {
background-image: url("../../Content/Images/open.png");
}
tr.shown td.newClass {
background-image: url("../../Content/Images/close.png");
}
I am trying to addClass() on the row click event of the table but it doesn't seem to work. Am I missing something or doing something incorrectly.
It appears that your CSS does not match your markup:
tr.shown td.newClass
{
background-image: url("../../Content/Images/close.png");
}
Which is looking for the shown class on the table-row. But it looks like you are adding the shown class to the table-cell:
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
//$('.newClass').removeClass('newClass');
$('.newClass').addClass('shown') // isn't $('.newClass') the cell and not the row?
}
UPDATE:
To fix this you can change your CSS:
td.newClass.shown { ... }
or your jQuery:
$element.addClass('shown');
It will help you :
$(document).ready(function(){
$("#myTable tr").on('click',function(){
$(this).find(".newClass").addClass("shown");
});
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>SPLessons</title>
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div class="container">
<div class="jumbotron">
<h3>
SPLessons.com
</h3>
<table id="myTable" class="table table-bordered">
<tr>
<th data-field="name" data-formatter="nameFormatter"></th>
<th data-field="number" data-formatter="numberFormatter"></th>
<th class="newClass"></th>
</tr>
</table>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
From the code below, I can't get the input[radio] to check the selected row in the table. The code below is using HTML5 and JQuery 1.10.2.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
input[type="radio"] {
margin: 10px;
}
</style>
<script src="jquery-1.10.2.min.js" />
<script>
$(function() {
$("#table_list tr").click(function() {
$(this).find("td input:radio").prop("checked", true);
});
});
</script>
</head>
<body>
<table id="table_list">
<thead>
<th></th>
<th>Name</th>
<th>Email</th>
</thead>
<tbody>
<tr>
<td><input type="radio" name="record"/></th>
<td>Sample1</td>
<td>sample_1#sample.com</td>
</tr>
<tr>
<th><input type="radio" name="record"/></th>
<td>Sample1</td>
<td>sample_1#sample.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Your first input is in a td and the second is in a th. You'll have to remove the td from your input selector: working codepen
$(function() {
$("#table_list tr").click(function() {
$(this).find("input:radio").prop("checked", true);
});
});
The attached javascript will work for both.. Another option is to just change the th to a td and keep your selector the way it was.
Note: you have a few more markup issues as people mentioned in the comments. (forgot tr in thead)
Please have a look at http://jsbin.com/atosaq/4/edit
$(document).ready(function(){
$('#table_list tr').on("click",function(){
$(this).find('input[type=radio]').prop("checked", true);
});
});