When i try to add a row to my embedded cloudtable using row.add() there are some problems

pmarks906d

I have an embedded cloudtable and am trying to add a row to it using javascript and "table.row.add()". When I try to add a row, the row shows up in my table on the web page with most fields populated. One of the fields is a unique sequence field where the next number in sequence is not there. Another field is a date-time field where the date and time is not filled in. If I select the added row and hit edit, the edit button hangs and I get the following message in my console.log: "Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14". Finally if i reload the page, the added row is not there any more. For testing I have hardcoded the following row.add() code which runs when i hit a button.Please ignore the commented out stuff.

    editEmailButton2Element = document.getElementById("editEmailButton2Id"); 
    $('#editEmailButton2Id').on( 'click', function () {
          console.log("Adding row");        
          table2.row.add( { 
            "dp-25": "pmarks906d@aol.com",//email2Element.innerHTML,// cust email            
            "dp-50":  "Saved", // to/from cust
            //firstName2Element.innerHTML+" "+lastName2Element.innerHTML, name   
            "dp-26": "phil marks", 
            "dp-24": rowIdNumber, //  email id (sequence, unique, positive integer)
            "dp-52": "", // email date/time (date time required)
            "dp-29": "", // image (deault empty)
            "dp-30": "Painting",//artworkTitle2Element.innerHTML, // art img name
            "dp-51": 00101, //artIdElement.innerHTML, // art id #
            "dp-34": "", //imageUrlElement.innerHTML, // img url (must url default empty)
            "dp-35": "2x2", //titleSize2Element.innerHTML, // orig size
            "dp-78": 20.00, //titlePrice2Element.innerHTML, // orig price
            //titleAvail2Element.innerHTML,//orig available
            "dp-38": "Avail",
            "dp-53": "Gen", //radio2Element.innerHTML, // reason
            "dp-85": "yes", //titleBuy2Element.innerHTML, // buy original
            "dp-39": "1x1", //print1Size2Element.innerHTML, // print1 size
            "dp-79": 5.00,//print1Price2Element.innerHTML, // print1 price
            "dp-55": 10, //print1Qty2Element.innerHTML, // print1 qty
            "dp-41": "3x3", //print2Size2Element.innerHTML, // print2 size
            "dp-80": 5.00,//print2Price2Element.innerHTML,//print2 price
            "dp-56": 2, //print2Qty2Element.innerHTML, // print2 qty
            "dp-43": "5x5", //print3Size2Element.innerHTML, // print3 size
            "dp-81": 9.00,//print3Price2Element.innerHTML,//print3 price   
            "dp-57": 3, //print3Qty2Element.innerHTML, // print3 qty   
            "dp-45": "6x6", //print4Size2Element.innerHTML, // print4 size   
            "dp-82": 7.00,//print4Price2Element.innerHTML,//print4 price   
            "dp-58": 1, //print4Qty2Element.innerHTML, // print4 qty  
            "dp-47": "2x2", //print5Size2Element.innerHTML, // print5 size   
            "dp-83": 3.00,//print5Price2Element.innerHTML,//print5 price   
            "dp-59": 90, //print5Qty2Element.innerHTML, // print5 qty  
            //msgFromCustomer2Element.innerHTML,//msg from customer   
            "dp-60": "from cust",
            "dp-61": "to cust",//msgToCustomer2Element.innerHTML,//msg to customer   
            "dp-62": "phil", //firstName2Element.innerHTML, // 1st name   
            "dp-63": "marks", //lastName2Element.innerHTML, // last name   
            "dp-64": "1582 rd", //address12Element.innerHTML, // address1   
            "dp-65": "apt 3", //address22Element.innerHTML, // address2   
            "dp-66": "pb", //city2Element.innerHTML, // city   
            "dp-67": "fl", //state2Element.innerHTML, // state   
            "dp-68": "usa", //country2Element.innerHTML, // country   
            "dp-84": 32909, //zip2Element.innerHTML, // zip   
            "dp-70": 2.00, //buyOrigShipping2Element.innerHTML, // master shipping   
            "dp-71": 1.00, //print1Shipping2Element.innerHTML, // print 1 shipping   
            "dp-72": 1.00, //print2Shipping2Element.innerHTML, // print 2 shipping   
            "dp-73": 1.00, //print3Shipping2Element.innerHTML, // print 3 shipping   
            "dp-74": 1.00, //print4Shipping2Element.innerHTML, // print 4 shipping   
            "dp-75": 4.00, //print5Shipping2Element.innerHTML, // print 5 shipping   
            "dp-76": 5000.00, //totalCostWithShipping2Element.innerHTML // total cost 
          }).invalidate().draw();
          console.log("Added row");          
        });

Note that one of the fields is an image field which i will eventually need to figure out how to fill. Note on the page there are two tables. The table I am talking about is at the bottom of the page and has an email address in the leftmost column. my web page is "philipmarksart.com/email". The fields in my embedded cloudtable are displayed/hidden as follows:

function initColumnVisibility2() { 
  //make most embedded cloudTable columns visible. Some column-handling code 
  //only accesses columns which are set to "visible(true)"; 
  table2.column( 0 ).visible( true ); // expansion button
  table2.column( 1 ).visible( false );
  table2.column( 2 ).visible( true ); // cust email
  table2.column( 3 ).visible( true ); // to/from cust
  table2.column( 4 ).visible( true ); // cust name
  table2.column( 5 ).visible( true ); // email id
  table2.column( 6 ).visible( true ); // email date/time
  table2.column( 7 ).visible( true ); // image
  table2.column( 8 ).visible( true ); // art img name
  table2.column( 9 ).visible( true ); // art id #
  table2.column( 10 ).visible( true ); // img url
  table2.column( 11 ).visible( true ); // orig size
  table2.column( 12 ).visible( true ); // orig price
  table2.column( 13 ).visible( true ); // orig available
  table2.column( 14 ).visible( true ); // reason
  table2.column( 15 ).visible( true ); // buy original
  table2.column( 16 ).visible( true ); // print1 size
  table2.column( 17 ).visible( true ); // print1 price
  table2.column( 18 ).visible( true ); // print1 qty
  table2.column( 19 ).visible( true ); // print2 size
  table2.column( 20 ).visible( true ); // print2 price
  table2.column( 21 ).visible( true ); // print2 qty
  table2.column( 22 ).visible( true ); // print3 size
  table2.column( 23 ).visible( true ); // print3 price   
  table2.column( 24 ).visible( true ); // print3 qty   
  table2.column( 25 ).visible( true ); // print4 size   
  table2.column( 26 ).visible( true ); // print4 price   
  table2.column( 27 ).visible( true ); // print4 qty  
  table2.column( 28 ).visible( true ); // print5 size   
  table2.column( 29 ).visible( true ); // print5 price   
  table2.column( 30 ).visible( true ); // print5 qty  
  table2.column( 31 ).visible( true ); // msg from customer   
  table2.column( 32 ).visible( true ); // msg to customer   
  table2.column( 33 ).visible( true ); // 1st name   
  table2.column( 34 ).visible( true ); // last name   
  table2.column( 35 ).visible( true ); // address1   
  table2.column( 36 ).visible( true ); // address2   
  table2.column( 37 ).visible( true ); // city   
  table2.column( 38 ).visible( true ); // state   
  table2.column( 39 ).visible( true ); // country   
  table2.column( 40 ).visible( true ); // zip   
  table2.column( 41 ).visible( true ); // master shipping   
  table2.column( 42 ).visible( true ); // print 1 shipping   
  table2.column( 43 ).visible( true ); // print 2 shipping   
  table2.column( 44 ).visible( true ); // print 3 shipping   
  table2.column( 45 ).visible( true ); // print 4 shipping   
  table2.column( 46 ).visible( true ); // print 5 shipping   
  table2.column( 47 ).visible( true ); // total cost   
};

colin

row.add() is used to add a row to the table in the DOM, it won't be reflected in the backend data - so a page refresh would just remove it.

Instead of row.add(), you'll need to use the Editor API instead to create (create()) the record, you would then set the field values (set()), and then submit (submit()) the record back to the server.

The code you've got in your first block is very similar, it just needs those different methods.

Colin

pmarks906d

Thanks Colin. I am having trouble finding the syntax for the "editor.create()", "editor.set()" and "editor.submit()" javascript commands. could you give me a quick example of what the code should look like?

pmarks906d

The following may be the syntax; but I haven't managed to add a row with it yet.

editor2.create(false).set({
            "dp-25": "pmarks906d@aol.com", // cust email            
            "dp-50":  "Saved", // to/from cust
              ........ etc ..............
            "dp-76": 5000.00,  // total cost 
          },).submit();         

colin

It seems the issue is that it doesn't like all the fields grouped together. I'm not sure why. I've raised it internally (CT-1603 for my reference) and we'll report back here when there's an update.

As a workaround, you can list the fields individually, like this (example here):

    editor
      .create(false)
      .set('dp-288', new Date().toString())
      .set('dp-289', 123)
      .submit()

Colin

pmarks906d

Hi again. So I've got the code ready to go shown following. When I hit the button it executes with no console errors, but nothing is added to the table. What am I missing?

    editEmailButton2Element = document.getElementById("editEmailButton2Id"); 
        $('#editEmailButton2Id').on( 'click', function () {
          console.log("Adding row");           
          editor2
            .create(false)
            .set('dp-25', "pmarks906d@aol.com") //email2Element.innerHTML,// cust email            
            .set('dp-50', "Saved") // to/from cust              
            .set('dp-26', "phil marks") // ull name
            .set('dp-24', 00200) //  email id (sequence, unique, positive integer)
            .set('dp-86', "" ) //new Date().toString()) // (date time required)
            .set('dp-29', null) // image (deault empty)
            .set('dp-30', "Painting") //artworkTitle2Element.innerHTML, // art img name
            .set('dp-51', 00101) //artIdElement.innerHTML, // art id #
            .set('dp-34',"") //imageUrlElement.innerHTML,//img url(must url default empty)
            .set('dp-35', "2x2") //titleSize2Element.innerHTML, // orig size
            .set('dp-78', 20.00) //titlePrice2Element.innerHTML, // orig price            
            .set('dp-38', "Avail") //titleAvail2Element.innerHTML,//orig available
            .set('dp-53', "Gen") //radio2Element.innerHTML, // reason
            .set('dp-85', "yes") //titleBuy2Element.innerHTML, // buy original
            .set('dp-39', "1x1") //print1Size2Element.innerHTML, // print1 size
            .set('dp-79', 5.00)//print1Price2Element.innerHTML, // print1 price
            .set('dp-55', 10) //print1Qty2Element.innerHTML, // print1 qty
            .set('dp-41', "3x3") //print2Size2Element.innerHTML, // print2 size
            .set('dp-80', 5.00)//print2Price2Element.innerHTML,//print2 price
            .set('dp-56', 2) //print2Qty2Element.innerHTML, // print2 qty
            .set('dp-43', "5x5") //print3Size2Element.innerHTML, // print3 size
            .set('dp-81', 9.00)//print3Price2Element.innerHTML,//print3 price   
            .set('dp-57', 3) //print3Qty2Element.innerHTML, // print3 qty   
            .set('dp-45', "6x6") //print4Size2Element.innerHTML, // print4 size   
            .set('dp-82', 7.00)//print4Price2Element.innerHTML,//print4 price   
            .set('dp-58', 1) //print4Qty2Element.innerHTML, // print4 qty  
            .set('dp-47', "2x2") //print5Size2Element.innerHTML, // print5 size   
            .set('dp-83', 3.00)//print5Price2Element.innerHTML,//print5 price   
            .set('dp-59', 90) //print5Qty2Element.innerHTML, // print5 qty              
            .set('dp-60', "from cust") //msgFromCustomer2Element.innerHTML,   
            .set('dp-61', "to cust")//msgToCustomer2Element.innerHTML,//msg to customer   
            .set('dp-62', "phil") //firstName2Element.innerHTML, // 1st name   
            .set('dp-63', "marks") //lastName2Element.innerHTML, // last name   
            .set('dp-64', "1582 rd") //address12Element.innerHTML, // address1   
            .set('dp-65', "apt 3") //address22Element.innerHTML, // address2   
            .set('dp-66', "pb") //city2Element.innerHTML, // city   
            .set('dp-67', "fl") //state2Element.innerHTML, // state   
            .set('dp-68', "usa") //country2Element.innerHTML, // country   
            .set('dp-84', 32909) //zip2Element.innerHTML, // zip   
            .set('dp-70', 2.00) //buyOrigShipping2Element.innerHTML, // master shipping   
            .set('dp-71', 1.00) //print1Shipping2Element.innerHTML, // print 1 shipping   
            .set('dp-72', 1.00) //print2Shipping2Element.innerHTML, // print 2 shipping   
            .set('dp-73', 1.00) //print3Shipping2Element.innerHTML, // print 3 shipping   
            .set('dp-74', 1.00) //print4Shipping2Element.innerHTML, // print 4 shipping   
            .set('dp-75', 4.00) //print5Shipping2Element.innerHTML, // print 5 shipping   
            .set('dp-76', 5000.00) //totalCostWithShipping2Element.innerHTML // total cost 
            .submit();                  
          console.log("Added row");             
        });
        console.log("here");

allan

Hi,

Are you able to PM me a link to the page showing the issue so I can take a look? There isn't an obvious issue there.

Allan

pmarks906d

Here is a syntax which works (Thanks allan amd colin):

          let newDat = new Date();
          editor
            .create(false)
            .set('dp-25', 'pmarks906d@aol.com') // customer email            
            .set('dp-50', 'To Customer') // to/from the customer              
            .set('dp-26', 'Phil Marks') // full name  
            .set('dp-24', '00200') // email id 
            .set('dp-86', newDat) // (date time)
            .set('dp-29', null) // image
                   ................ etc ....................
            .set('dp-75', '4.00')  // print 5 shipping   
            .set('dp-76', '5000.00')  // total cost 
            .submit(); 

Note that datatable fields defined as numbers are passed to the set command as strings. Also datatable fields defined as date-time are passed in as the direct result of a newly defined date. The image being passed in here is just a null, because I am still trying to figure out a way to pass in an uploaded img file. The email id field is a unique sequence type, whose dummy value gets replaced automatically with the number next in sequence (starting at 0 and always increasing by 1.

allan

Awesome thanks. Good to hear you got it working.

I should note that I never really anticipated CloudTable's Editor being used quite this way. I don't think it will cause any issues going forward, but my preference would be for the REST API to be used rather than Editor directly (just in case I ever change anything in how CloudTables).

Regards,
Allan