We Keep Coding

How to eliminate the empty rows from the jTable jQuery?

I have two jTables in my web page, which loads data from a database. The first jTable fetches the data directly from the database and the second table loads its data according to the selected data in the first table.
The problem now I am facing is, in-case if there are no data to be fetched for the second table, from the particular selected row, the rows are displaying empty.
For example, I have selected a data in the table 1, but since there is no data related to the selected data, the second table is displaying empty rows.
How to hide or not to fetch if the rows were completely empty at the same time if the row has even a single entry I wanted to display that row.
I am using python in the back end to fetch the data. So, do I need to make changes in my python code or do I need to make a change in the front end jQuery or CSS.
I have tried to use the jQuery, it is not working as expected.
My first jTable code is:
$('#SelectCode').jtable({
selecting: true,
paging: true,
actions: {
listAction:// my back end connection here
},
fields: {
codes: {
title: 'Code',
},
name:{
title: 'Name',
},
},
selectionChanged: function () {
var $selectedRows = $('#SelectCode').jtable('selectedRows');
if ($selectedRows.length > 0) {
$selectedRows.each(function () {
var record = $(this).data('record');
Code = record.event_codes;
$('#System').jtable('load',{code:(SelectedCode)});
});
},
});
My second jTable code is:
$('#System').jtable({
selecting: true,
paging: true,
actions: {
listAction:// my back end connection here
},
fields: {
date:{
title:'Date',
},
Time:{
title:'Time'
},
},
});
So, can someone, please help me how can I achieve in eliminating the empty rows from the table.
Thanks,

I have achieved it by adding the following line of codes in my jTable fields:
display: function(data) {
if (data.record.date == null) {
$("#System tr").each(function() {
var cellText = $.trim($(this).text());
if (cellText.length == 0) {
$(this).hide();
}
});
}
return data.record.date;
},

Adding to x-editable select source with button click

I have using BootstrapTable with X-editable. I have a select box, that I would like to update the source data with a button click. Ideally, I like to get the source from the column, push a value to it and reload it without changing any edits to that column by the user.
Full code:
http://jsfiddle.net/rp4nkb46/1/
relevant code:
$('#addoption').click(function () {
names.push({value: 5, text: 'Bob'})
$('#table').bootstrapTable('OnRefresh', {});
});

Use a function to return the names array rather than specifying the array directly in your table setup:
$(function () {
$('#table').bootstrapTable({
columns: [{field: 'Contact',
title: 'Contact',
editable: {
type: 'select',
source: function() { return names; }
}
}],
data: data
});
});
It seems that the X-Editable will bind a supplied array once upon creation of the control but will call the function each time.

AutoComplete with Key-Value in grid, showing key when focus

I am using paramquery grid component in which I am trying to use autocomplete.
Column Model for branch:
{ title: "Branch", dataIndx: "branchId", width: 150,
filter: { type: "select",
condition: 'equal',
prepend: { '': '--All--' },
listeners: ['change'],
valueIndx: "branchId",
labelIndx: "branchName",
options: branchList,
},
editor: {
type: "textbox",
init: autoCompleteEditor
//type: function (ui) { return dropdowneditor(this, ui); }
},
render: function (ui) {
for (var i = 0; i < branchList.length; i++) {
var option = branchList[i];
if (option.branchId == ui.rowData.branchId) {
return option.branchName;
}
}
}
}
autoCompleteEditorMethod:
var autoCompleteEditor = function (ui) {
var $inp = ui.$cell.find("input");
//initialize the editor
$inp.autocomplete({
source: function(request, response) {
var rows = imAutocompleteJSONParse(branchList);// this method converting my JSON object into Value and label format.
return response(rows);
},
selectItem: { on: true }, //custom option
highlightText: { on: true }, //custom option
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#search").val(ui.item.label);
}
}).focus(function () {
//open the autocomplete upon focus
$(this).autocomplete("search", "");
});
}
I get branch id into my grid and I have branchList JSON which have branch id & branch Name. Inside grid my render function showing branchName on UI.
But when I click on searchable dropdown I'm getting branch id.
Below snapshot may explain my issue properly.
Summary of issue: I am getting branch id in Grid. With help of render method I am able to show branch name on grid. but when I click on textbox I getting branch id.
http://jsfiddle.net/v4zx8tjc/4/

Like blackmiaool suggests in his comment, this question would be easier to answer with a live demo using something like JSFiddle.
Based on what I can see in your question, which isn't that much, there are a few areas I would take a second look at.
The Source function in JQuery.autoComplete. Where is branchList coming from? I don't see it declared anywhere and why are you not using the 'request' param?
Not sure what your custom properties are doing but it might be a good idea to verify those are not interfering with the results.
Edit 1: Looking back at the code you posted I think I see where your branchList variable is coming from. It would be very helpful to see your imAutocompleteJSONParse() method because I believe that may be where things are breaking down.

Javascript page re-route after d3.js event

I experimenting with d3.js and how to implement the framework.
At this stage of experimental implementation, I would like to make the filled Countries create alerts when I click them.
The ultimate goal is to change the alert to a page re-route, using the country name to decide which page it gets routed to.
In depth explanations are greatly appreciated.
Here is the code:
var map = new Datamap({
element: document.getElementById('container'),
fills: {
PARTS:'green',
defaultFill: 'black'
},
data: {
USA: {
fillKey: 'PARTS'
},
IRL: {
fillKey: 'PARTS',
}
},
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography, data) {
if(data.fillKey=='PARTS'){
alert(geography.properties.name);
}
});
}
});

Getting Object Properties From External js File

I'm using a jquery script called jTable (www.jtable.org) to implement dynamic tables in my web application. In order to include a table on a particular page, you must include the following code to declare its properties:
<script type="text/javascript">
$(document).ready(function () {
$('#MyTableContainer').jtable({
//General options comes here
actions: {
//Action definitions comes here
},
fields: {
//Field definitions comes here
}
});
});
</script>
An example of what might go into the fields property:
fields: {
StudentId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Name',
width: '23%'
},
EmailAddress: {
title: 'Email address',
list: false
},
Password: {
title: 'User Password',
type: 'password',
list: false
},
Gender: {
title: 'Gender',
width: '13%',
options: { 'M': 'Male', 'F': 'Female' }
},
BirthDate: {
title: 'Birth date',
width: '15%',
type: 'date',
displayFormat: 'yy-mm-dd'
}
}
The problem is I use the same table (or very similar tables) throughout my web application. I would like to be able to implement a way to store the fields in an external .js file and then refer to it on each page, thus avoiding copying and pasting. On some pages, I may only include some of the above fields (ex. I may want to exclude Password and EmailAddress) or make slight variations to the fields when I load them (ie. use a different displayFormat (for BirthDate) than the default in the external .js file on a particular page.
Thanks!

You can do this in several ways. Here's a simple one:
main.js
//should be modularized/namespaced
var defaultStudentTableFieldsCfg = {
...
};
other-file.js
$(function () {
var tableFieldsCfg = $.extend({}, defaultStudentTableFieldsCfg);
//define new column
tableFieldsCfg.someNewCol = {
//...
};
//remove some column
delete tableFieldsCfg.Password;
//override config
tableFieldsCfg.Gender.title = 'GENDER';
//it would be better not to hard-code #MyTableContainer here
$('#MyTableContainer').jtable({ fields: tableFieldsCfg });
});

You could create functions that you put in external JS files. Then those functions could return the JSON objects needed to construct your jTable.

The problem is the fact that you have a JSON object and that can not be just referenced in a JavaScript file. If you want to load the file, you would need to use something like getJSON and than use that with jQuery.
function createTable(fields) {
$('#MyTableContainer').jtable({
//General options comes here
actions: {
//Action definitions comes here
},
fields: fields
});
}
$(function(){
$.getJSON("YourFields.json", createTable);
});
Now what you are trying to do is reference a global variable.
Place the file before and reference the global variable.
<script type="text/javascript" src="YourFields.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#MyTableContainer').jtable({
actions: {
},
fields: fields
});
});
</script>
The YourFields.js file should look more like
if (!window.appDefaults) {
window.appDefaults = {}
}
window.appDefaults.fields = {
StudentId: {
key: true,
...
};