We Keep Coding

how can i change div by click in javascript?

when i click one item in a.jsp, which is made by b.js calls c.js's function of getGrid() to show one more table.
it shows data of what i click in console well. but table grid-table-1 doesn't changed.
what i want is when i click another item, i want to call getGrid again to show data.
but in my code, only first click works
what is the problem? thanks!
itemClick: function(data){
getGrid(data.data.ITM_ID);
console.log(data.data.ITM_ID);
}
a.jsp
<nav>
<ul>
<li><a class="tri" href="javascript:void(0);" onclick="callMonth(50035);callSubtitle('살인'); this.onclick=null">살인</a></li>
<li><img src="css/f4f0edb08c97567ce6b0475a63bf7000.png" alt="Italian Trulli" width="40px" height="25px"></img></li>
<li>살인</li>
</ul>
</nav>
<div class="wrap">
<h3>등락율 순위</h3>
<table id="grid-table-1">
</table>
</div>
b.js
function callMonth(num) {
$.ajax({
url : 'http://www.crimestats.or.kr/openapi/Sttsapitbldata.do?KEY=373f2cc31cd449c992cc18004780f4e4&STATBL_ID=T184223019918177&DTACYCLE_CD=YY&WRTTIME_IDTFR_ID=2016&Type=json&CLS_ID='+num,
type : 'GET',
dataType: 'json',
success : function (resp) {
$(".chart01").html("");
console.log(resp);
var options = {
data : {
data: []
},
format: {
xAxis: function (_str) {
return _str.substr(0, 4);
},
yAxis: 'priceDataFormat'
},
func : {
tip: function (tipElement, data, rect) {
//console.log(data)
var date = data.xaxis.substr(0, 4);
var tip = '<div class="text">' + date + ' / ' + String(data.yaxis).format().trim() + '</div>';
tipElement.html(tip).show();
var arrow = '<div class="arrow" style="width: ' + tipElement.width() + 'px;"></div>';
tipElement.html(tipElement.html() + arrow).css({
left: rect.x - (tipElement.width() / 2), top: rect.y - 35
});
},
itemClick: function(data){
getGrid(data.data.ITM_ID);
console.log(data.data.ITM_ID);
}
},
use : {
animate : true,
aCrossLine: true
}
};
var rows = resp.Sttsapitbldata[1].row;
if (rows) {
var representativeRow;
for (i = 1; i < 13; i++) {
representativeRow = rows[i];
itemNm2 = representativeRow.ITM_NM;
dataV = representativeRow.DTA_VAL;
itm_id= representativeRow.ITM_ID;
/* console.log(itemNm2);
console.log(dataV);
console.log(itm_id);*/
options.data.data.push({DTA_VAL: dataV, ITM_NM: itemNm2, ITM_ID:itm_id});
}
var series = {
"main": {
"s1": {series: 'column', xaxis: 'ITM_NM', yaxis: 'DTA_VAL'}
}
};
event.stopPropagation();
var chart = webponent.chart.init($('.chart01'), options, styles, series);
}
}, /*error: function (xhr, status, error) {
alert("err")
}*/
});
}
c.js
function getGrid(itm_id_num) {
$(".grid-table-1").html("");
var table1 = $('#grid-table-1');
var template1 = $('#grid-template-1');
var grid1 = webponent.grid.init(table1, template1);
var body = [];
$.ajax({
dataType: 'json',
url : 'http://www.crimestats.or.kr/openapi/Sttsapitbldata.do?KEY=373f2cc31cd449c992cc18004780f4e4&STATBL_ID=T184223019918177&DTACYCLE_CD=YY&WRTTIME_IDTFR_ID=2016&Type=json&ITM_ID='+itm_id_num,
success : function (resp) {
var options = {
data: {
data: []
}
};
var rows = resp.Sttsapitbldata[1].row;
//console.log(rows);
if (rows) {
var representativeRow;
for (i = 11; i < 100; i++) {
representativeRow = rows[i];
itemNm2 = representativeRow.ITM_NM;
dataV = representativeRow.DTA_VAL;
stable_id = representativeRow.STATBL_ID;
cls_nm = representativeRow.CLS_NM;
cls_id = representativeRow.CLS_ID;
/* console.log(itemNm2);
console.log(dataV);*/
options.data.data.push({
ITM_NM : itemNm2,
STATBL_ID: stable_id,
CLS_NM : cls_nm,
CLS_ID : cls_id,
DTA_VAL : dataV
});
}
grid1.appendRow(options.data.data);
}
}
});
}

How to remain a checkbox "checked" in dataTables after move rows up and down

I have a dataTable that each row in it has a checkbox and up or down buttons to move rows. But if I check a checkbox and then move the row, checkbox change to unchecked state.
How can I prevent this event and hold the checkbox checked?
{ name: 'name',
data: 'name',
title: 'Name',
searchable: true,
sortable: false,
render: function (data, type, full, meta) {
if (type === 'display') {
var $span = $('<span></span>');
$('<input type="checkbox">').appendTo($span);
return $span.html();
}
return data;
}
},
here is my code : jsFiddle

You can save the states in variable and after drawing table can check and update the state of checkboxes
Fiddle https://jsfiddle.net/jdvusytn/1/
function moveRow(row, direction) {
var index = table.row(row).index();
var order = -1;
if (direction === 'down') {
order = 1;
}
var data1 = table.row(index).data();
data1.order += order;
var data1Checked = $(table.row(index).node()).find('input[type=checkbox]').prop('checked');
var data2 = table.row(index + order).data();
data2.order += -order;
var data2Checked = $(table.row(index + order).node()).find('input[type=checkbox]').prop('checked');
table.row(index).data(data2);
table.row(index + order).data(data1);
table.page(0).draw(false);
$(table.row(index + order).node()).find('input[type=checkbox]').prop('checked', data1Checked);
$(table.row(index).node()).find('input[type=checkbox]').prop('checked', data2Checked)
}

Dropdown filter on specific column in DataTable

I'm using DataTables to create table. One of columns contains 'i' element and hidden input. I would like to filter data rows by that hidden value, but I can't manage to do that. As far I found that problem is in search() method, I suppose it doesn't search in children elements like 'input' in which I'm keeping my value.
Code fragment:
var select = $('<select><option value=""></option><option value="true">Accepted</option><option value="false">Rejected</option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
var val = $(this).val();
column.search(val, true, false) // problem is here
.draw(true);
});

Nevermind, I've managed to achieve this on my own. I needed to define "columnDefs" and inside this "targets" which are columns that you want to filter and "render".
Here's the code:
var table = $('#dataCheck').DataTable({
"sDom": "ltp",
"columnDefs": [{
"targets": [6],
"render": function ( data, type, full, meta ) {
if(type === 'filter'){
return $('#dataCheck').DataTable().cell(meta.row, meta.col).nodes().to$().find('input').val();
} else {
return data;
}
}
}],
initComplete: function () {
this.api().columns().every(function (i) {
var column = this;
if (i == 6)
{
var select = $('<select><option value="..."></option><option value="true">Accepted</option><option value="false">Rejected</option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
var val = $(this).val();
column.search(val, true, false)
.draw(true);
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
}
});
}
});

DataTables merge jQuery/Javascript functions from two seperate tables

I am trying to make two functions work together that both work on their own.
Number 1: Is my table with a dropdown filter inside a control panel which I am trying to add a secondary checkbox filter to, everything works fine here.
http://jsfiddle.net/btofjkus/12/
$(document).ready(function () {
$('#example').DataTable({
ordering: false,
bLengthChange: false,
initComplete: function () {
this.api().columns(2).every(function () {
var column = this;
var select = $('<select><option value="">Show all</option></select>')
.appendTo($("#control-panel").find("div").eq(1))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val());
column.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
console.log(select);
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
console.log()
});
Number 2: Is an example I found online of filtering a DataTable with a button as you can see it works on its own but I am trying to change it slightly from a button to a checkbox so the filter can be released once it is unchecked.
You will have noticed the checkbox I made for this in Number 1. #checkbox-filter.
https://jsfiddle.net/annoyingmouse/ay16vnp1/
$(function () {
var dataTable = $('#example').DataTable({
searching: true,
info: false,
lengthChange: false
});
$('#filterButton').on('click', function () {
dataTable.draw();
});
});
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var target = 'Software Engineer';
var position = data[1]; // use data for the age column
if (target === position){
return true;
}
return false;
}
);
Now you can see the two functions I am trying to put all this together into one table (Number 1) at http://jsfiddle.net/btofjkus/12/.
What I want to do is create a checkbox filter for "Software Engineers" from the "Position" column in Number 1.
This looks complicated when I write it down with all these codeblocks but it's really just merging two functions together in the correct way.
I have tried tearing the code apart myself and gluing it together but everything I try seems to be wrong.
Example: (failure)
$(document).ready(function () {
$('#example').DataTable({
ordering: false,
bLengthChange: false,
initComplete: function () {
this.api().columns(2).every(function () {
var column = this;
var select = $('<select><option value="">Show all</option></select>')
.appendTo($("#control-panel").find("div").eq(1))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val());
column.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
console.log(select);
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
console.log()
});
$(document).ready(function() {
if $('#checkbox-filter').is(':checked' function() {
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var target = 'Software Engineer';
var position = data[1]; // use data for the age column
if (target === position){
return true;
}
return false;
}
);
});
});
As you can see above I tried mashing the code together with no luck, I have also tried some methods that seem to invoke the function but not when #checkbox-filter is checked.
The example below makes the dropdown filter only select "Software Engineers" from the "Position" column which is my criteria for this checkbox filter (but only when its checked).
$(document).ready(function () {
$('#example').DataTable({
ordering: false,
bLengthChange: false,
initComplete: function () {
this.api().columns(2).every(function () {
var column = this;
var select = $('<select><option value="">Show all</option></select>')
.appendTo($("#control-panel").find("div").eq(1))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val());
column.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
console.log(select);
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
console.log()
});
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var target = 'Software Engineer';
var position = data[1]; // use data for the position column
if (target === position){
return true;
}
return false;
}
);
How can I make this work only when the checkbox is selected. And release when it is deselected.
UPDATE:
This kind of works but not as it should (once checked try interacting with the dropdown filter) you will see it kind of works, but it doesn't change back when it is unchecked, it also does not filter the visible data when checked meaning I have to interact with the dropdown menu to see results. How can I fix this?
http://jsfiddle.net/btofjkus/13/
$(document).ready(function () {
$('#example').DataTable({
ordering: false,
bLengthChange: false,
initComplete: function () {
this.api().columns(2).every(function () {
var column = this;
var select = $('<select><option value="">Show all</option></select>')
.appendTo($("#control-panel").find("div").eq(1))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val());
column.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
console.log(select);
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
console.log()
});
//changes below
$('#checkbox-filter').change(function() {
if ($(this).is(':checked')) {
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var target = 'Software Engineer';
var position = data[1]; // use data for the position column
if (target === position){
return true;
}
return false;
}
);
}
});

Here is the working solution jsfiddle
$(document).ready(function () {
var dataTable = $('#example').DataTable({
ordering: false,
bLengthChange: false,
initComplete: function () {
this.api().columns(2).every(function () {
var column = this;
var select = $('<select><option value="">Show all</option></select>')
.appendTo($("#control-panel").find("div").eq(1))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val());
column.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
$('#checkbox-filter').on('change', function() {
dataTable.draw();
});
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var target = 'Software Engineer';
var position = data[1]; // use data for the age column
if($('#checkbox-filter').is(":checked")) {
if (target === position) {
return true;
}
return false;
}
return true;
}
);
});

Get the Id of an jqGrid row where a checkbox is clicked

I am using jqGrid and I added a column of checkboxes to the grid but I want to alert which checkbox is checked .. here is my code
dataGrid.prototype = {
display: function () {
var self = this;
var html = [];
var check = 0;
html.push("<table id='" + this.id + "" + "'class='table'>\n</table>");
html.push("<div id='pagger_" + this.id + "'></div>");
$('body').append(html.join(""));
$("#" + this.id).jqGrid({
url: "index.jsp",
styleUI: 'Bootstrap',
datatype: "local",
data: this.data,
colModel: this.getColModels(this.data[0]),
onSelectRow: this.editRow,
viewrecords: true,
width: 1300,
height: 250,
rowNum: 50,
pager: "#pagger_" + this.id,
loadComplete: function () {
var iCol = self.getColumnIndexByName('Enable');
var rows = $("#" + this.id).jqGrid('getGridParam', 'data');
var i;
var c = rows.length;
for (i = 0; i < c; i += 1) {
$(rows[i].cells[iCol]).click(
function (e) {
var id = $(e.target).closest('tr')[0].id, isChecked = $(e.target).is(':checked');
alert("checked:" + isChecked);
// you can also get the
// values of the row
// data
alert('clicked on the checkbox in the row with id=' + id + '\nNow the checkbox is ' + (isChecked ? 'checked' : 'not checked'));
});
}
}
});
},
getColNames: function (data) {
var keys = [];
for (var key in data) {
if (data.hasOwnProperty(key)) {
keys.push(key);
}
}
return keys;
},
getColModels: function (data) {
var colNames = this.getColNames(data);
var colModelsArray = [];
var str2;
for (var i = 0; i < colNames.length; i++) {
var str1;
str1 = {
name: colNames[i],
index: colNames[i],
align: 'center',
editable: true,
edittype: "text",
};
colModelsArray.push(str1);
}
str2 = {
name: 'Enable',
index: 'Enable',
formatter: 'checkbox',
editable: true,
edittype: 'checkbox',
width: 60,
align: 'center',
formatoptions: {
disabled: false
},
editoptions: {
value: '1:0'
},
};
colModelsArray.push(str2);
return colModelsArray;
},
getColumnIndexByName: function (columnName) {
var cm = $("#" + this.id).jqGrid('getGridParam', 'colModel'), i, l;
for (i = 0, l = cm.length; i < l; i += 1) {
if (cm[i].name === columnName) {
return i;
}
}
return -1;
},
};
hint ..
the data is json object
whenever i print rows[i] it gives me [object object]
Whats wrong here?

You can trust delegation instead of adding a handler to every checkbox. Let's assume you put an ID to the container, like #containerDataGrid:
$("#containerDataGrid").on("click", "input[type=checkbox]", function(e){
var $this = $(this); //this is the checkbox
//this is more reliable than e.target,
// because it DOES point to the input not some child it could have
var $row = $this.closest("tr"); //in case the rows are tr. If not, change by the class or parameter identifying a row
var id = $row.attr("id"); //here's the ID you want! :D
console.log("The checkbox in the row: ",$row, " which has id= ", id, " is " $this.is(":checked")?"checked":"not checked");
});
If you only wanted to get some particular checkbox, you can make the "input[type=checkbox]"selector more specific, adding a class for instance:
"input[type=checkbox].the-checkbox-I-want"
or making sure it's the child of a wrapper:
".wrapper-of-my-beloved-checkbox > input[type=checkbox]"