Below is the code of the internal database table from which I want to display the result in a div
var sear=$("#search").val();
var db = openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(function (tx) {
tx.executeSql("SELECT * FROM DEMO", [],
function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
$('#output2').append('<tr>td>'+ results.rows.item(i).D_Indications +'</td></tr>');
alert(results.rows.item(i).D_Indications);
}
});
});
I can view the result in alert but I cant view it in the div
Two issues:
table-tag is missing
Typo in call to append(...). Look at opening tags tr td.
Related
Trying to implement the lazy loading using the Clusterize js in Angular js Typescript. Unfortunately getting the errors.
Any expert advice please?
HTML VIEW
<div id="scrollArea" class="clusterize-scroll">
<ul id="contentArea" class="clusterize-content"></ul>
</div>
Angular JS
namespace Cis2.VC.OrderCreate {
angular.module("cis2")
.directive("cis2VCOrderCreate", directiveDefinition);
templateUrl = "sections/vc/columns/vcOrderCreate/view.html";
function directiveDefinition () {
directive = {
"bindToController": true,
"controller": cis2VCOrderCreateController,
"templateUrl": templateUrl
};
}
class cis2VCOrderCreateController implements Cis2.Finder.Column.IEntityCreator {
constructor() {
activate () {
let rows = [];
for(var i = 1; i < 50000; i++) {
rows.push(i);
}
console.log(rows);
var clusterize = new Clusterize({
rows: rows,
scrollId: 'scrollArea',
contentId: 'contentArea'
});
}
}
}
Console errors
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at Clusterize.html (http://localhost:63342/cis-ui-src/public/lib/clusterize/clusterize.js:341:26)
You are supposed to supply markup to the rows option. Numbers won't work. From the documentation:
rows
If you render rows by yourself - pass array of tags in String. This way is preferable.
If you need to use existing markup - do not specify this option at all.
activate () {
let rows = [];
for(var i = 1; i < 50000; i++) {
rows.push("<li>" + i + "</li>"); //this must be a string of markup
}
console.log(rows);
var clusterize = new Clusterize({
rows: rows,
scrollId: 'scrollArea',
contentId: 'contentArea'
});
friends.
I have ionic V1 application with 2 tabs, add and list. And for persist the data, I use SQLite.
My problem.
In add tab, I insert data in database perfectly, but, when I redirect to list, the last that i insert, doesn't display on list
arrList = []
db.transaction(function (tx)
{
var query_users = "SELECT * FROM users";
tx.executeSql(query_users, [], function (tx, results)
{
var len = results.rows.length;
for (var i = 0; i < len; i++) {
arrList.push(results.rows[i]);
}
}, null);
});
$scope.userList = arrList;
What is my mistake?
for (var i = 0; i < len; i++)
{
$scope.arrList.push({id: result.rows.item(i).id, message:
result.rows.item(i).message});
}
i used to push data in this way..
ie is... result.rows.item(i).["variable name"]
may be it will help u...
I make a example of directive in angular js .I am using this directive
https://github.com/ONE-LOGIC/ngFlowchart
when I take static data ..it show the output please check my plunker
http://plnkr.co/edit/d2hAhkFG0oN3HPBRS9UU?p=preview
but when I use $http request and make same json object .it not display the chart see my plunker using $http request .I have same data object as in static
http://plnkr.co/edit/Vts6GdT0NNudZr2SJgVY?p=preview
$http.get('data.json').success(function(data) {
console.log(data)
var arr = data
var model={};
var new_array = []
for (var i = 0; i < arr.length; i++) {
var obj = {};
obj.name = arr[i].name;
obj.id = arr[i].id;
obj.x = arr[i].x;
obj.y = arr[i].y;
obj.color = '#000';
obj.borderColor = '#000';
var p = {};
p.type = 'flowchartConstants.bottomConnectorType';
p.id = arr[i].con_id
obj.connectors = [];
obj.connectors.push(p);
new_array.push(obj);
}
console.log('new array')
console.log(new_array)
model.nodes=new_array;
var edge = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].children.length > 0) {
for (var j = 0; j < arr[i].children.length; j++) {
var obj = {};
obj.source = arr[i].con_id;
obj.destination = arr[i].children[j].con_id;
edge.push(obj);
}
}
}
model.edges=edge;
console.log(edge)
console.log("model")
console.log(JSON.stringify(model))
$scope.flowchartselected = [];
var modelservice = Modelfactory(model, $scope.flowchartselected);
$scope.model = model;
$scope.modelservice = modelservice;
})
any update ?
Working Example
It is now working.
The issue was when we load the directive first time it has no parameter value to it. So, when the chart directive try to initialize your chart with no parameter it gets an error. So, it will not work anymore.
How solve the issue?
Just give a dummy parameter upon the page load. I have given the dummy model as,
$scope.model = model;
$scope.modelservice = modelservice;
So, first your chart will display a chart based on the dummy values. After that it populates chart with the data from the server ($http.get())
I am currently using ui-grid implemented with external pagination to display my data. I've run into as issue where I can only export the currently viewed data, however I need to be able to export ALL data as well.
Anyone know a work around to export all data using external pagination?
I ended up using csvExport function included with ui-grid. I added an "Export All" custom menu item and it works great! Here is my code:
gridMenuCustomItems: [
{
title: 'Export All',
action: function ($event) {
$http.get(url).success(function(data) {
$scope.gridOptions.totalItems = data.totalFeatures;
$scope.gridOptions.data = data.features;
$timeout(function()
{
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, myElement );
}, 1000);
});
}
}
]
Hope this helps someone!
Ok, so I took ui-grids server side example and modified their plnkr a bit. I simply created a button outside the ui-grid and that button calls your datasource which converts json into CSV and downloads the file
http://plnkr.co/edit/xK3TYtKANuci0kUgGacQ?p=preview
<button ng-click="exportAllData()">Export Data</button>
then in your controller:
$scope.exportAllData = function()
{
setTimeout(function()
{
$http.get('largeLoad.json').success(function(response)
{
$scope.JSONToCSVConvertor(response, "Data Title", true);
});
},100);
};
$scope.JSONToCSVConvertor = function(JSONData, ReportTitle, ShowLabel)
{
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//Set Report title in first row or line
CSV += ReportTitle + '\r\n\n';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + '\r\n';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
//Generate a file name
var fileName = "MyReport_";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
JSONToCSVConverter() source: http://jsfiddle.net/hybrid13i/JXrwM/
I have integrated SlickGrid with my Angular JS application. Earlier I was populating the Grid Data with plain hardcoded javascript code[see below]. But now I need to get the grid data from REST service which is invoked in my angular Js Controller and saved in an object array. How do I access a variable[array] defined in angular js inside my SlickGrid javascript code.
I tried replacing 'data' below with the array defined in angular js code but it's not working. Can anyone please help me here.
$(function () {
/* need to comment out this code once I can use the array defined in angular Js */
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})
Update: This is my slickgrid code. I am invoking a REST service to get the data in $scope.data1 and then using it to populate the slickgrid but I am getting an empty slickgrid. But if I hardcode the data in $scope.data1 , it works. What I am missing? Can anyone please help me. I have spent an entire day on this issue.
$scope.populateGridData = function()
FetchPopulation.get({id:1} , function(response ) {
$scope.data1 = [];
for (var i = 0; i < response.PopulationList.population.length; i++)
$scope.data1[i] = {
firstName: response.PopulationList.population[i].firstName,
lastName: response.PopulationList.population[i].lastName,
designation: response.PopulationList.population[i].designation,
department: response.PopulationList.population[i].department,
salary: response.PopulationList.population[i].salary,
rating: response.PopulationList.population[i].rating,
joiningDate: response.PopulationList.population[i].joiningDate,
employeeId: response.PopulationList.population[i].employeeId,
employeeType: response.PopulationList.population[i].employeeType,
manager: response.PopulationList.population[i].manager,
permanent: (i % 5 == 0),
percentComplete: Math.round(Math.random() * 100)
};
/*
$scope.data1= [{employeeId:"12345", firstName: "aaa", lastName: "bbb" , designation:"Business Analyst" , department:"FSI" ,
salary:"120000",rating:"1" , joiningDate:"12/8/2013" , employeeType:"permanent" , manager:"aaaa" }];
*/
var grid = new Slick.Grid("#myGrid", $scope.data1, $scope.columns, $scope.options);
$scope.grid.setSelectionModel(new Slick.CellSelectionModel());
});
};
Did you type by hand the commented line there? Because it's not valid JSON, everything has to be escape [{employeeId:"12345" should be [{"employeeId":"12345",... and even if it's not that, your dataset seems wrong. I am not using SlickGrid without the DataView as you are doing but if you take the basic example and copy this piece of code (pulled from SlickGrid example2:
$(function () {
for (var i = 0; i < 5; i++) {
var d = (data[i] = {});
d["title"] = "<a href='#' tabindex='0'>Task</a> " + i;
d["duration"] = "5 days";
d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
d["start"] = "01/01/2009";
d["finish"] = "01/05/2009";
d["effortDriven"] = (i % 5 == 0);
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})
it will most probably work... Try this piece out before going back to your code, but I strongly suspect your JSON result might not be valid as you think it is... now after you tried the basic sample and you go back to your code, you could try to validate your JSON output by going here: JSONLint just copy+paste your JSON in there and click validate.