Creating an Invoice program

classic12 · October 8, 2017, 9:02pm

I have been using ApplicationCraft for a few years but sadly it is being put to rest. So my first project is to re-write my existing app.

I have the PHP side already I can populate lists with data ok.

I am going to use the BootStrap DataTable widget.

However I have been struggling for a few hours trying to get it to work.

I have tried various code and from the following link.

I can clear the tables but not populate them with any new data.

http://wiki.nsbasic.com/DataTable_(Bootstrap)

Button1.onclick=function(){
var config = {
 "aaData": [
        /* Reduced data set */
        [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
        [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
        [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
        [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
        [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
        [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
        [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
        [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
        [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
        [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
        [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
        [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
       ],
       "aoColumns": [
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version", "sClass": "center" },
        { "sTitle": "Grade", "sClass": "center" }
    ]
  };
 var table = $('#DataTable1').dataTable(config);

  //table.fnClearTable();
table.fnDestroy();
$('#DataTable1').empty()
table = $('#DataTable1').dataTable(config);
} 

Button2.onclick=function(){
//$('#DataTable1').DataTable().clear();
var table = $('#DataTable1').DataTable();

table
.clear()
.draw();
 }

Button3.onclick=function(){
var table = $('#DataTable1').DataTable();

    table.rows.add( [ {
    "name":       "Tiger Nixon222",
    "position":   "System Architect",
    "salary":     "$3,120",
    "start_date": "2011/04/25",
    "office":     "Edinburgh",
    "extn":       "5421"
 }, {
    "name": "Garrett Winters222",
    "position": "Director",
    "salary": "$5,300",
    "start_date": "2011/07/25",
    "office": "Edinburgh",
    "extn": "8422"
} ] )
.draw();
}

Button4.onclick=function(){
if ( $.fn.DataTable.isDataTable('#DataTable1') ) {
$('#DataTable1').DataTable().destroy();
 }

$('#DataTable1 tbody').empty();

// ... skipped ...

$('#DataTable1').dataTable({
  "autoWidth":false
, "info":false
, "JQueryUI":true
, "ordering":true
, "paging":false
, "scrollY":"500px"
, "scrollCollapse":true
});
}

Button5.onclick=function(){
// Quickly and simply clear a table
//$('#DataTable1').dataTable().fnClearTable();

// Restore the table to it's original state in the DOM by removing all of DataTables enhancements, alterations to the DOM   structure of the table and event listeners
$('#DataTable1').dataTable().fnDestroy();
}

Button6.onclick=function(){
$('#DataTable1').DataTable();
}

Button7.onclick=function(){
var t = $('#DataTable1').DataTable();
var counter = 1;

$('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3',
        counter +'.4',
        counter +'.5'
    ] ).draw( false );

    counter++;
} );

// Automatically add a first row of data
$('#addRow').click();

}

Button9.onclick=function(){

$('#DataTable1').DataTable( {
    "ajax": {
        "url": "http://toolfolks.com/techy/array.txt",
        "dataSrc": "tableData"
    },
    "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }
    ]
} );

}

Button10.onclick=function(){
var columns1 = [{title:"Name"}, {title:"Position"}, {title:"Salary"}];
data1 = [["Tiger Nixonqqq", "System Architectqq", "$320,800"], ["Garrett Wintersqq", "Accountantqq", "$170,750"]];
DataTable1.settings.columns = columns1
DataTable1.settings.data = data1
DataTable1.build()

}

Button11.onclick=function(){
var table = $('#DataTable1').DataTable();
table.destroy();
$('#DataTable1').empty();
table.rows.add( [ {
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "salary":     "$3,120"
}, {
    "name": "Garrett Winters",
    "position": "Director",
    "salary": "$5,300"
} ] )
.draw();

}

Cheers

Steve Warby

classic12 · October 8, 2017, 9:11pm

Sorry …

The reply I get when attempting to add data is
hfunc.js
TypeError: url.lastIndexOf is not a function. (In ‘url.lastIndexOf(’/’)’, ‘url.lastIndexOf’ is undefined).
line 3923 column 49

classic12 · October 9, 2017, 11:01am

Also how do I put the table in edit mode?

i.e. be able to change the data then output the data?

Cheers

Steve Warby

ghenne · October 9, 2017, 11:02am

The error that you are encountering is actually an error in the error handler. That obscures what the real problem is.

An updated build of AppStudio is here:

Give that a try - let’s see if it shows a better error message.

ghenne · October 9, 2017, 11:04am

You’ll need to consult the DataTables documentation for this. It’s pretty extensive - there is a lot to DataTables:

https://datatables.net/

classic12 · October 9, 2017, 11:06am

I’m on a Mac.

cheers

Steve Warby

classic12 · October 9, 2017, 11:16am

It looks like you have to buy the editor. Is this correct ?

If so what is the procedure to get this working in app Studio.

Cheers

Steve Warby

ghenne · October 9, 2017, 11:23am

Here you go!

classic12 · October 9, 2017, 12:37pm

I have the following code:

If I empty or destroy the tables then apply ’ change data’ The tables are restored with the original data not the 'swapped data;

If I add rows I get:

hfunc.js
TypeError: url.lastIndexOf is not a function. (In ‘url.lastIndexOf(’/’)’, ‘url.lastIndexOf’ is undefined).
line 3923 column 57

 var data1 = [
["Tiger Nixon1111", "System Architect", "Edinburgh"],
["Garrett Winters1111", "Accountant", "Tokyo"],
["Ashton Cox1111", "Junior Technical Author","England"]
];
var data2 = [
["Tiger Nixon222", "System Architect", "Edinburgh"],
["Garrett Winters222", "Accountant", "Tokyo"],
["Ashton Cox222", "Junior Technical Author","England"]
];

var columns1 = [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"

}];

function updateTable1() {
DataTable1.settings.columns = columns1;
DataTable1.settings.data = data1;
DataTable1.build();
}
function updateTable2() {
DataTable2.settings.columns = columns1;
DataTable2.settings.data = data2;
DataTable2.build();
}

function changeTable1() {
DataTable1.settings.columns = columns1;
DataTable1.settings.data = data2;
DataTable1.build();
}
function changeTable2() {
DataTable2.settings.columns = columns1;
DataTable2.settings.data = data1;
DataTable2.build();
}
function Main() {
updateTable1();
updateTable2();
}

Button3.onclick=function(){
changeTable1();
changeTable2();
}

btnAddRows.onclick=function(){
var table = $('#DataTable1').DataTable();
var table2 = $('#DataTable2').DataTable();
table.row.add( {
    "Name":       "Tiger Nixonadded11111",
    "Position":   "System Architect",
    "Office":     "$3,120"
} ).draw();



table2.row.add( {
    "Name":       "Tiger NixonAdded2222",
    "Position":   "System Architect",
    "Office":     "$3,120"
} ).draw();
}
 btnEmpty.onclick=function(){
 var table = $('#DataTable1').DataTable();

table
.clear()
.draw();

var table = $('#DataTable2').DataTable();

table
.clear()
.draw();

}

btnDestroy.onclick=function(){
var table = $('#DataTable1').DataTable();
table.destroy();
$("#DataTable1").empty();
var table2 = $('#DataTable2').DataTable();
table2.destroy();
$("#DataTable2").empty();

}

ghenne · October 9, 2017, 3:27pm

Are you using the new build of AppStudio? Did you do a full deploy? You shouldn’t be seeing the same error as before.

classic12 · October 10, 2017, 12:16pm

Hi Guys,
I am on the latest version you sent me.

I think the issue is the format of the data returned.
I have validated this as valid Json data.

I am trying to populate the DataTable using the following code.

Is the issue how to pass the data here:

DataTable1.settings.data = req.responseText ;//JSON.parse(dataJson2);

i.e. how do I pass the data in the correct format.

I have tried various parse / stringify etc.

I am getting this error:

TypeError: url.lastIndexOf is not a function. (In 'url.lastIndexOf('/')', 'url.lastIndexOf' is undefined).
line 3923 column 57

If I use some data formatted as

var data1 = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"]
]

I can populate the dataTable with

      var dataJson = JSON.stringify(data1);
      var table = $("#DataTable1").DataTable();
        table.clear();

        DataTable1.settings.data = JSON.parse(dataJson);
        setTimeout(loadTable, 50);

    Button1.onclick=function(){
    req = Ajax("http://www.toolfolks.com/techy/someData.php", "GET", txtSend.value, done);
    }


     function done() {
     if (req.status == 200) { //success
          htmResponse.innerHTML = req.responseText;
          console.log('This is the data'+req.responseText);
          // add to grid
        var table = $("#DataTable1").DataTable();
        table.clear();
        var dataJson2 = JSON.stringify(htmResponse.innerHTML);
        DataTable1.settings.data = req.responseText ;//JSON.parse(dataJson2);
        setTimeout(loadTable, 50);
       }
          else {//'failure
          htmResponse.innerHTML=req.err;
          }
  
    }

    function loadTable() {
      var table = $("#DataTable1").DataTable();
      table.rows.add(DataTable1.settings.data).draw();
    }

[{"invoice_no":"704523213-6","product_name":"Thyroidinum, Baryta carb., Berber. vulg., Bryonia, Calc. carb., Cinchona, Conium, Digitalis, Ferrum picricum, Hydrastis, Iodium, Lycopodium, Nux vom., Pareira, Pulsatilla, Sabal, Selenium, Staphysag., Thuja occ.,Trifolium pratense, Echinacea, Lappa, Solid","delivery_status":"0","pin_code":"9616"},{"invoice_no":"873879067-X","product_name":"OCTINOXATE and TITANIUM DIOXIDE","delivery_status":"0","pin_code":"90"},{"invoice_no":"888174546-1","product_name":"coffee bean","delivery_status":"0","pin_code":"5"},{"invoice_no":"742900466-0","product_name":"Bupropion Hydrochloride","delivery_status":"1","pin_code":"2"},{"invoice_no":"505396330-4","product_name":"Caffeine","delivery_status":"1","pin_code":"8313"},{"invoice_no":"344082937-5","product_name":"dimethicone","delivery_status":"1","pin_code":"816"},{"invoice_no":"824881650-8","product_name":"Oxazepam","delivery_status":"0","pin_code":"6944"},{"invoice_no":"793629004-4","product_name":"estradiol","delivery_status":"0","pin_code":"536"},{"invoice_no":"751800320-1","product_name":"SULFUR,SULFACETAMIDE SODIUM","delivery_status":"1","pin_code":"73"},{"invoice_no":"124982586-5","product_name":"Miconazole nitrate","delivery_status":"1","pin_code":"8"},{"invoice_no":"393625687-X","product_name":"dextromethorphan HBr, doxylamine succinate","delivery_status":"1","pin_code":"94271"},{"invoice_no":"533099566-3","product_name":"BENZALKONIUM CHLORIDE","delivery_status":"0","pin_code":"38"},{"invoice_no":"415234478-4","product_name":"acetaminophen, dextromethorphan hydrobromide and doxylamine succinate","delivery_status":"0","pin_code":"2"},{"invoice_no":"137027302-9","product_name":"PULSATILLA, ALLIUM CEPA, ARSENICUM ALBUM, NUX VOMICA, EUPHRASIA OFFICINALIS, SABADILLA, STICTA PULMONARIA, ARALIA RACEMOSA, CUPRUM METALLICUM","delivery_status":"1","pin_code":"72"},{"invoice_no":"428527283-0","product_name":"levofloxacin","delivery_status":"1","pin_code":"60"},{"invoice_no":"271939674-5","product_name":"Phenytoin","delivery_status":"0","pin_code":"7903"},{"invoice_no":"847229680-6","product_name":"Glipizide","delivery_status":"1","pin_code":"41"},{"invoice_no":"862907237-7","product_name":"methylphenidate hydrochloride","delivery_status":"1","pin_code":"23"},{"invoice_no":"092319365-0","product_name":"bisacodyl","delivery_status":"1","pin_code":"4"},{"invoice_no":"357948877-5","product_name":"hydrocodone bitartrate and ibuprofen","delivery_status":"1","pin_code":"78857"},{"invoice_no":"126264383-X","product_name":"Bisacodyl","delivery_status":"1","pin_code":"61007"},{"invoice_no":"822256216-9","product_name":"Treatment Set TS346876","delivery_status":"0","pin_code":"42"},{"invoice_no":"448501691-9","product_name":"Alcohol","delivery_status":"0","pin_code":"58641"},{"invoice_no":"486144265-6","product_name":"Carvedilol","delivery_status":"1","pin_code":"9"},{"invoice_no":"973277310-3","product_name":"buspirone hydrochloride","delivery_status":"1","pin_code":"41"},{"invoice_no":"615440246-5","product_name":"Carvedilol","delivery_status":"0","pin_code":"84"},{"invoice_no":"930597430-9","product_name":"TERBUTALINE SULFATE","delivery_status":"0","pin_code":"41"},{"invoice_no":"153411247-2","product_name":"Oak White","delivery_status":"0","pin_code":"21"},{"invoice_no":"627228036-X","product_name":"VERAPAMIL HYDROCHLORIDE","delivery_status":"0","pin_code":"69"},{"invoice_no":"302659823-2","product_name":"Ceftriaxone Sodium","delivery_status":"0","pin_code":"368"},{"invoice_no":"531848284-8","product_name":"glipizide","delivery_status":"1","pin_code":"7"},{"invoice_no":"086245636-3","product_name":"factor ix complex","delivery_status":"1","pin_code":"80"},{"invoice_no":"987178075-3","product_name":"Ceftriaxone Sodium","delivery_status":"1","pin_code":"648"},{"invoice_no":"561582077-2","product_name":"Pyrithione Zinc","delivery_status":"0","pin_code":"0"},{"invoice_no":"235966890-0","product_name":"Agnus castus, Arnica montana, Baryta carbonica, Caladium seguinum, Kali bromatum, Lycopodium clavatum, nuphar luteum, Nux vomica, Onosmodium virginianum, Phosphoricum acidum, Picnicum acidum, Selenium metallicum","delivery_status":"1","pin_code":"84009"},{"invoice_no":"247885358-2","product_name":"LATANOPROST","delivery_status":"0","pin_code":"233"},{"invoice_no":"271660434-7","product_name":"Diethylpropion hydrochloride","delivery_status":"1","pin_code":"54452"},{"invoice_no":"813320093-8","product_name":"Magnesium Citrate","delivery_status":"1","pin_code":"2"},{"invoice_no":"113150242-6","product_name":"Silver Maple","delivery_status":"1","pin_code":"93"},{"invoice_no":"311237529-7","product_name":"ALCOHOL","delivery_status":"1","pin_code":"56532"},{"invoice_no":"133196175-0","product_name":"Loperamide HCl","delivery_status":"1","pin_code":"9990"},{"invoice_no":"346713651-6","product_name":"Amitriptyline Hydrochloride","delivery_status":"1","pin_code":"8"},{"invoice_no":"380694458-X","product_name":"acetaminophen","delivery_status":"1","pin_code":"617"},{"invoice_no":"151137649-X","product_name":"OCTINOXATE and TITANIUM DIOXIDE","delivery_status":"0","pin_code":"70699"},{"invoice_no":"869299262-3","product_name":"DIPHENHYDRAMINE HYDROCHLORIDE","delivery_status":"1","pin_code":"18"},{"invoice_no":"289291592-9","product_name":"Danazol","delivery_status":"0","pin_code":"570"},{"invoice_no":"284994139-5","product_name":"simvastatin","delivery_status":"1","pin_code":"2597"},{"invoice_no":"445209665-4","product_name":"TETRAHYDROZOLINE HYDROCHLORIDE","delivery_status":"1","pin_code":"9527"},{"invoice_no":"227399116-9","product_name":"Benzalkonium Chloride","delivery_status":"1","pin_code":"788"},{"invoice_no":"714837287-9","product_name":"AVOBENZONE, OCTINOXATE,OCTISALATE","delivery_status":"1","pin_code":"118"},{"invoice_no":"133949701-8","product_name":"escitalopram","delivery_status":"1","pin_code":"3"},{"invoice_no":"991791431-5","product_name":"Aluminum Zirconium Tetrachlorohydrex GLY","delivery_status":"1","pin_code":"5"},{"invoice_no":"529683170-5","product_name":"ganciclovir sodium","delivery_status":"1","pin_code":"9"},{"invoice_no":"842657445-9","product_name":"Acetaminophen","delivery_status":"0","pin_code":"670"},{"invoice_no":"785100365-2","product_name":"Western Water Hemp","delivery_status":"1","pin_code":"82324"},{"invoice_no":"882329081-3","product_name":"Doxycycline Hyclate","delivery_status":"1","pin_code":"763"},{"invoice_no":"230796197-6","product_name":"ALCOHOL","delivery_status":"1","pin_code":"63477"},{"invoice_no":"541346259-X","product_name":"losartan potassium and hydrochlorothiazide","delivery_status":"0","pin_code":"800"},{"invoice_no":"973060608-0","product_name":"Acetaminophen, Phenylephrine HCl","delivery_status":"1","pin_code":"12984"},{"invoice_no":"563841670-6","product_name":"Mometasone furoate monohydrate","delivery_status":"1","pin_code":"16"},{"invoice_no":"340186652-4","product_name":"Morphine sulfate","delivery_status":"1","pin_code":"396"},{"invoice_no":"741830611-3","product_name":"ZINC OXIDE","delivery_status":"1","pin_code":"804"},{"invoice_no":"542955494-4","product_name":"ALPRAZOLAM","delivery_status":"1","pin_code":"4"},{"invoice_no":"864090158-9","product_name":"Nitrous Oxide","delivery_status":"1","pin_code":"47"},{"invoice_no":"079288528-7","product_name":"TRICLOSAN","delivery_status":"0","pin_code":"134"},{"invoice_no":"358384712-1","product_name":"Mirtazapine","delivery_status":"0","pin_code":"51"},{"invoice_no":"732437456-5","product_name":"calcium carbonate","delivery_status":"0","pin_code":"742"},{"invoice_no":"344524760-9","product_name":"Mineral Oil","delivery_status":"0","pin_code":"5321"},{"invoice_no":"412917237-9","product_name":"Dextromethorphan HBr","delivery_status":"0","pin_code":"6223"},{"invoice_no":"742834065-9","product_name":"Chamomilla, Myrrha, Rosmarinus, Ruta, Symphytum, Antimon Tart, RSV.","delivery_status":"1","pin_code":"70198"},{"invoice_no":"582729740-2","product_name":"Triclosan","delivery_status":"0","pin_code":"386"},{"invoice_no":"599415748-1","product_name":"Eucalyptus (Blue Gum) Eucalyptus globulus","delivery_status":"1","pin_code":"50498"},{"invoice_no":"218164196-X","product_name":"Thioridazine Hydrochloride","delivery_status":"0","pin_code":"2809"},{"invoice_no":"889690163-4","product_name":"CLOTRIMAZOLE","delivery_status":"1","pin_code":"24214"},{"invoice_no":"072490809-9","product_name":"Triamterene and Hydrochlorothiazide","delivery_status":"0","pin_code":"2"},{"invoice_no":"736005670-5","product_name":"lisdexamfetamine dimesylate","delivery_status":"0","pin_code":"51477"},{"invoice_no":"668774669-3","product_name":"Esterified Estrogens and Methyltestosterone","delivery_status":"1","pin_code":"4841"},{"invoice_no":"290961790-4","product_name":"Acetaminophen, Chlorpheniramine maleate, Dextromethorphan HBr, Phenylephrine HCl","delivery_status":"0","pin_code":"298"},{"invoice_no":"259230387-1","product_name":"PREGABALIN","delivery_status":"0","pin_code":"1648"},{"invoice_no":"880366143-3","product_name":"Chaetomium globosum","delivery_status":"1","pin_code":"1"},{"invoice_no":"891173758-5","product_name":"CLOVE","delivery_status":"1","pin_code":"7201"},{"invoice_no":"072553405-2","product_name":"Acetaminophen","delivery_status":"0","pin_code":"34452"},{"invoice_no":"316716477-8","product_name":"Apis Belladonna Mercurius","delivery_status":"1","pin_code":"975"},{"invoice_no":"179222518-0","product_name":"methylphenidate hydrochloride","delivery_status":"1","pin_code":"0"},{"invoice_no":"362689132-1","product_name":"Doxazosin Mesylate","delivery_status":"1","pin_code":"2731"},{"invoice_no":"127180182-5","product_name":"Calcium Carbonate","delivery_status":"0","pin_code":"56693"},{"invoice_no":"889833147-9","product_name":"Salicylic Acid","delivery_status":"0","pin_code":"46"},{"invoice_no":"835056640-X","product_name":"ethanol","delivery_status":"1","pin_code":"926"},{"invoice_no":"068110653-0","product_name":"SODIUM MONOFLUOROPHOSPHATE","delivery_status":"0","pin_code":"6"},{"invoice_no":"082635876-4","product_name":"Sulfamethoxazole and Trimethoprim","delivery_status":"0","pin_code":"33"},{"invoice_no":"277729706-1","product_name":"doxepin hydrochloride","delivery_status":"0","pin_code":"4570"},{"invoice_no":"614260216-2","product_name":"Meropenem","delivery_status":"1","pin_code":"1703"},{"invoice_no":"694172798-5","product_name":"Amphotericin B","delivery_status":"0","pin_code":"3"},{"invoice_no":"894328008-4","product_name":"Western Juniper","delivery_status":"0","pin_code":"49628"},{"invoice_no":"966169677-2","product_name":"Avobenzone, Homosalate, Octisalate, Octocrylene, and Oxybenzone","delivery_status":"0","pin_code":"1396"},{"invoice_no":"086967433-1","product_name":"Pemetrexed disodium","delivery_status":"0","pin_code":"69638"},{"invoice_no":"902504964-8","product_name":"BENZOYL PEROXIDE","delivery_status":"0","pin_code":"7"},{"invoice_no":"443655470-8","product_name":"risperidone","delivery_status":"1","pin_code":"11591"},{"invoice_no":"132374458-4","product_name":"OXYGEN","delivery_status":"1","pin_code":"6233"},{"invoice_no":"286421306-0","product_name":"Allergenic Extracts Alum Precipitated","delivery_status":"1","pin_code":"128"}]

ghenne · October 10, 2017, 9:38pm

I cleaned up your code by putting triple ticks (```) before and after the code blocks.

I’m interested in the error message you are getting. Does anything show in the console?

classic12 · October 11, 2017, 10:07am

Hi,

I am using this project to test.

getTest.nsx (33.6 KB)

www.toolfolks.com/getTest

The console errors are the same as the alert.

I think the issue is the ‘mapping’ / format of the returned data.

I have tried various methods but can’t get the data to show in the grid.

Cheers

Steve Warby

ghenne · October 11, 2017, 11:15am

Thanks! Yes, there is indeed another error which is causing this. The DataTables control is throwing a non standard error message. It reads:

“DataTables warning: table id=DataTable1 - Cannot reinitialise DataTable. For more information about this error, please see 3. Warning: Cannot reinitialise DataTable”

ghenne · October 11, 2017, 11:58am

Just posted a test build of AppStudio with improved error handling. It now handles DataTable’s non standard error messages.

classic12 · October 13, 2017, 12:01pm

Hi Guys finally got there…
Thanks for the help so far
I got some info from

So I was not doing the mapping correctly then I finally had to use JSON.parse on the data.

so I changed the PHP code to

 $query5 = "SELECT * ";  //intensionaly * to fetch all columns
 //$query5 = "SELECT Name,Position,Salary ";  //intensionaly * to fetch all columns
 $query5.=" FROM test ORDER by id ASC";


if ($result = mysqli_query($mysqli, $query5)) {
$out = array();

while ($row = $result->fetch_assoc()) {
$out[] = $row;
//$out[] = $row['Name'];
//$out[] = $row['Position'];
//$out[] = $row['Salary'];

}
}
 /* encode array as json and output it for the ajax script*/
//echo $query5;
echo json_encode($out);
//var_dump($result);

I then use

Button1Copy.onclick=function(){
req = Ajax("http://www.toolfolks.com/techy/getTest.php", "GET", txtSend.value, done2);
}

function done2() {
 if (req.status == 200) { //success
      //alert('data back');
      dataReturned = JSON.parse(req.responseText);
      htmResponse.innerHTML = req.responseText;
      $("#DataTable1").dataTable().fnDestroy();
    $('#DataTable1').DataTable( {
    data: dataReturned,
    columns: [
        { data: "Name" },
        { data: "Position" },
        { data: "Salary" }
                  ]
    } );
      
 
}
      else {//'failure
      htmResponse.innerHTML=req.err;
      }

}

So onwards & upwards…

The next phase is to use the grid in an editable format.

Is this what I have to purchase from here https://editor.datatables.net/ and if so what magic do I have to perform in appStudio to get this working.

Cheers

Steve Warby

classic12 · October 14, 2017, 1:41pm

Onward and upwards,

I have now got various display types in the cells ( so I am not sure what the dataTable editor offers) .
sample here getDataTest

local one is:

btnLocal.onclick=function(){
    data1 =  [["Tom","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Andy","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["John","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul4","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul5","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul6","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul7","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul8","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"]]
    $("#DataTable1").dataTable().fnDestroy();
    $('#DataTable1').empty();
    $('#DataTable1').DataTable( {
    data: data1,
    columns: [
        { data: 0 },
        { data: 1 },
        { data: 2 },
        {data: 3}
                  ]
    } );
}

local 2 is:

btnLocal2.onclick=function(){
  data1 =  [["Tom","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Andy","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["John","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul4","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul5","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul6","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul7","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul8","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"]]
  $("#DataTable1").dataTable().fnDestroy(); 
  $('#DataTable1').empty();
  $('#DataTable1').dataTable( {
  data: data1,

        "columnDefs": [
        {
        "title" : 'Salary',
        "targets": 2,
        "data": 2,
        "render": function (data, type, full, meta ) 
                      {
       return '<input type="text" name="'+data+'" value = '+data+'>'
                      }
        },
        { 
        "title" : 'Link',
        "targets": 3,
        "data": 3,
        "render": function ( data, type, row, meta ) 
                    {
        return '<img src="'+data+'" style="height:50px;width:50px;"/>'
                    }
        },
        {
        "title" : 'Position',
        "targets": 1,
        "data": 1,
        "render": function ( data, type, row, meta ) 
                    {
        return '<input type="text" name="'+data+'" value = '+data+'>'
                    }
        },
        { 
        "title" : 'Mane',
        "targets": 0,
        "data": 0,
        "render": function ( data, type, row, meta ) 
                    {
        return '<input type="text" name="'+data+'" value = '+data+'>' 
                      }
        },
        { 
        "targets": 4,
        "data": "Name",
        "render": function ( data, type, row, meta ) 
                    {
        return '<input type="button"  value = click Me>' 
                      }
        }
  ]
} );

}

I now need to do the following

Change data in the dataTable and export back out as Json ( or something I can play with). I have the code from here
export excel sheet — DataTables forums
Details here
Buttons
But it says that the ‘buttons’ extensions need to be installed. ( are they? if not is it possible to add these ).
Once in the cells that have an text input using

“render”: function (data, type, full, meta )
{
return ‘’
}

From the DataTable example I have the following:

DataTable1.onclick = function(event) {
if (typeof(event.target._DT_CellIndex) != "object") {
    return;
}
var row, col;
row = event.target._DT_CellIndex.row;
col = event.target._DT_CellIndex.column;
NSB.MsgBox("Click on " + row + ", " + col + ". Value is '" + data1[row][col] + "'.");
};

I get the value if I click on the cell outside the input box but not if I click in the input box.

How do I use or create an event for leaving the cell or the input ?

Cheers

Steve Warby