i have little jtable shows list of records pulled local database using node.js express-generator , mysql. can show, create, edit , delete records in/from table fine.
my problem when add new record using jtable, creates empty row in jtable , doesn't populate newly added data unless refresh page. weird because updates row in jtable when edit , delete using jtable well.
can see why happening?
(i excluded edit , delete code since work properly)
tbl_bar structure
rowid = int, pk, ai rowname = varchar, uq roworder = int (for future row organization) index.js
var express = require('express'); var router = express.router(); var mysql = require('mysql'); var connection = mysql.createconnection({ host: 'localhost', user: 'root', password: 'password' }); // select database use connection.query('use db_foo;'); /*********************/ /***** show rows *****/ /*********************/ // retrieves rows , sends them jtable display router.showrows = function (request, response) { // query tbl_bar , return ordered result/s connection.query('select * tbl_bar order roworder;', function (error, result) { if (error) response.send({ result: "error", message: "error getting rows" }); else response.send({ result: "ok", records: result }); }); } /**********************/ /***** create row *****/ /**********************/ // function inserting new row tbl_bar function insertrow(data, response) { connection.query('insert tbl_bar set ?', data, function(error, result) { if (error) response.send({ result: "error", message: "error adding row" }); else response.send({ result: "ok", records: result }); }); } // adds new row tbl_bar router.createrow = function (request, response) { var query = json.parse(json.stringify(request.body)); // check if tbl_bar contains rows connection.query('select count(*) rowcount tbl_bar', function (error, result) { if (error) response.send({ result: "error", message: "error getting rows" }); else { var data = { rowname: query.rowname }; // if tbl_bar contains no rows, make roworder 1 if (result[0].rowcount === 0) { data['roworder'] = 1; insertrow(data, response); } else { // highest roworder determine order of newly added row connection.query('select roworder tbl_bar order roworder desc limit 1', function (error, result) { if (error) response.send({ result: "error", message: "error getting rows" }); else { data['roworder'] = result[0].roworder + 1; insertrow(data, response); } }); } } }); } /*************************/ /***** home page *****/ /*************************/ router.get('/', function (request, response, next) { response.render('index', { title: 'my jtable' }); }); // event listeners router.post('/showrows', router.showrows); router.post('/createrow', router.createrow); module.exports = router; table.js
function populatetable() { $('#container').jtable({ title: 'my jtable', paging: false, messages: { addnewrecord: 'add new row' }, deleteconfirmation: function(data) { data.deleteconfirmmessage = 'delete row: ' + data.record.rowname + '?'; }, actions: { listaction: '/showrows', createaction: '/createrow' }, fields: { rowid: { key: true, list: false, create: false, edit: false }, rowname: { title: 'name', list: true, create: true, edit: true }, roworder: { list: false, create: false, edit: true } } }); } $(document).ready(function () { populatetable(); $('#container').jtable('load'); }); index.jade
doctype html html head meta(charset='utf-8') | title jtable | link(rel='stylesheet', type='text/css', href='javascripts/jquery-ui-1.11.4/jquery-ui.min.css') | link(rel='stylesheet', type='text/css', href='javascripts/jtable.2.4.0/themes/metro/blue/jtable.min.css') | script(type='text/javascript', src='javascripts/jquery-1.11.2.min.js') | script(type='text/javascript', src='javascripts/jquery-ui-1.11.4/jquery-ui.min.js') | script(type='text/javascript', src='javascripts/jtable.2.4.0/jquery.jtable.min.js') | script(type='text/javascript', src='javascripts/table.js') | body #container
reading code maybe can try change line in insertrow function:
else response.send({ result: "ok", records: result });
to
else response.send({ result: "ok", record: result });
i had same problem (jtable not showing data in new added row) php.
the problem format of json response of php page.
this format (1 element array) not work intended:
{"result":"ok","record":[{"id_documento":"96","id_prodotto":"27","qta":"5"}]}
this format work intended, fade-in effect:
{"result":"ok","record":{"id_documento":"96","id_prodotto":"27","qta":"5"}}
in php, difference (wrong way):
while($row = $result->fetch_assoc()){ $rows[]=$row; } $jtableresult['result'] = "ok"; $jtableresult['record'] = $rows; to (correct way):
$jtableresult['result'] = "ok"; $jtableresult['record'] = $result->fetch_assoc(); hope helps.
Comments
Post a Comment