Datatable issue using different forms

Dear NSB team,
I’m trying to use two different datatables in two different forms, but when I add the second one,it works well, but the first doesn’t work anymore. I simply created a project with 3 forms (code attached), using the example on section 3 Datatable, obviously changing the occurrences of variables and controls.
As I said, one work fine, the other not.
What’s the problem? What I miss? I’m getting crazy.
Thanks in advance.
Best Regards
Rotondi Alex

Code->
First form:

Function BtnForm1_onclick()
  ChangeForm(Form11)
End Function
Function BtnForm2_onclick()
  ChangeForm(Form12)
End Function

Form11:

JavaScript
// an array of arrays. One array for each row.
 var data1 = [
    ["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000"],
    ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"],
    ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
    ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
];

var dataJson = JSON.stringify(data1);

// class values are here:
// http://getbootstrap.com/css/#type-alignment
var columns1 = [
            {title: "Name"},
            {title: "Position"},
            {title: "Office"},
            {title: "Extn."},
            {title: "Start date"},
            {title: "Salary", class:"text-right"}
        ];
        
End JavaScript


Function Main()
  updateTable()
End Function

Function DataTable1_onclick(event)
  If typeof(event.target._DT_CellIndex) <> "object" Then return
  Dim row, col
  row = event.target._DT_CellIndex.row
  col = event.target._DT_CellIndex.column
  MsgBox "Click on " & row & ", " & col & ". Value is '" & data1[row][col] & "'."
End Function

Function updateTable()
  DataTable1.settings.columns = columns1
  DataTable1.settings.data = data1
  DataTable1.build()
End Function

Function Button11_onclick()
  data1[0][0] += "+"  'Just to make a change to the table
  updateTable()
End Function

Function Button21_onclick()
  var table = $("#DataTable1").DataTable()
  table.clear()

  DataTable1.settings.data = JSON.parse(dataJson)
  DataTable1.settings.data[0][0] = "George"
  SetTimeout(loadTable, 50)
End Function

Function loadTable()
  var table = $("#DataTable1").DataTable()
  table.rows.add(DataTable1.settings.data).draw()
End Function

Function Button3_onclick()
   Dim table 
   table = $("#DataTable1").DataTable() 
   $(table.rows().nodes()).removeClass("highlight")
   $(table.cells().nodes()).removeClass("highlight")
   $(table.column(2).nodes()).addClass("highlight")
End Function

Function Button4_onclick()
  Dim table 
   table = $("#DataTable1").DataTable() 
   $(table.rows().nodes()).removeClass("highlight")
   $(table.cells().nodes()).removeClass("highlight")
   $(table.row(2).nodes()).addClass("highlight")
End Function

Function Fliptoggle1_onchange()
  DataTable1.settings.ordering = Fliptoggle1.value
  updateTable()
End Function

Function Fliptoggle4_onchange()
  DataTable1.settings.paging = Fliptoggle4.value
  updateTable()
End Function

Function Fliptoggle5_onchange()
  DataTable1.settings.searching = Fliptoggle5.value
  updateTable()
End Function

Form12:

JavaScript
// an array of arrays. One array for each row.
 var data2 = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"],
    ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
    ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
];

var dataJson2 = JSON.stringify(data1);

// class values are here:
// http://getbootstrap.com/css/#type-alignment
var columns2 = [
            {title: "Name"},
            {title: "Position"},
            {title: "Office"},
            {title: "Extn."},
            {title: "Start date"},
            {title: "Salary", class:"text-right"}
        ];
        
End JavaScript


Function Main()
  updateTable2()
End Function

Function DataTable11_onclick(event)
  If typeof(event.target._DT_CellIndex) <> "object" Then return
  Dim row, col
  row = event.target._DT_CellIndex.row
  col = event.target._DT_CellIndex.column
  MsgBox "Click on " & row & ", " & col & ". Value is '" & data2[row][col] & "'."
End Function

Function updateTable2()
  DataTable11.settings.columns = columns2
  DataTable11.settings.data = data2
  DataTable11.build()
End Function

Function Button1_onclick()
  data2[0][0] += "+"  'Just to make a change to the table
  updateTable2()
End Function

Function Button2_onclick()
  var table = $("#DataTable11").DataTable()
  table.clear()

  DataTable2.settings.data = JSON.parse(dataJson2)
  DataTable2.settings.data[0][0] = "Andy"
  SetTimeout(loadTable2, 50)
End Function

Function loadTable2()
  var table = $("#DataTable11").DataTable()
  table.rows.add(DataTable11.settings.data).draw()
End Function

Function Button31_onclick()
   Dim table 
   table = $("#DataTable11").DataTable() 
   $(table.rows().nodes()).removeClass("highlight")
   $(table.cells().nodes()).removeClass("highlight")
   $(table.column(2).nodes()).addClass("highlight")
End Function

Function Button41_onclick()
  Dim table 
   table = $("#DataTable11").DataTable() 
   $(table.rows().nodes()).removeClass("highlight")
   $(table.cells().nodes()).removeClass("highlight")
   $(table.row(2).nodes()).addClass("highlight")
End Function

Function Fliptoggle11_onchange()
  DataTable11.settings.ordering = Fliptoggle11.value
  updateTable2()
End Function

Function Fliptoggle41_onchange()
  DataTable11.settings.paging = Fliptoggle41.value
  updateTable2()
End Function

Function Fliptoggle51_onchange()
  DataTable11.settings.searching = Fliptoggle51.value
  updateTable2()
End Function

Tip : If you’re pasting code, html or config files, surround the code with triple back ticks (```), before the first line and after the last one. It will be formatted properly. (We fixed it for you this time)

Thanks for the tip, I’ll surely do it next time

I’ve worked with multiple Datatables on separate forms (even on the same form) and it’s always worked well for me. It doesn’t seem to be an issue with Datatables themselves.

You say one of the Datatables does not work: can you be more specific as to what is not working?

Also, have you checked for errors in the Chrome Debugger console?

Then I’ll check for errors.
Aniway the problem is that if I, for example, phisically delete one form, the one remained works properly (datatable is filled correctly with coloumns and data) and viceversa. So both forms work properly when single.
I’m creating a project in which I’d like to use several forms with several datatable. I builded up one form and manipulate the datatable as I’d like. Then I inserted another form with datatable and the old one stopped to work properly. After nights spent to understand why, I tried to create the simple project as shown in my first message using the code of example datatable in section 3 and obtain the same result.

When I say “stopped to work properly” I mean that the form is shown but the datatable is empty and looks like in the design editor.

Can you make a simple project with 2 datatables that shows the problem?

I’d be willing to have a give it a try and say if I see anything.

Really thanks a lot for your kindness, I really appreciate becaus is getting me crazy.

So I create the simplest project to show the issue.
Two forms with a datatable in both, and one button to switch from one to another.
Form2 work properly (datatable is correctly filled with coloumns and data) Form1 doesn’t work (datatable remain empy and looks like in the design editor)
Follows the code of each form or I’ve to post the entire project?
Thanks a lot
Alex

Form1

JavaScript

 var data2 = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"],
    ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
    ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
];

var columns2 = [
            {title: "Name"},
            {title: "Position"},
            {title: "Office"},
            {title: "Extn."},
            {title: "Start date"},
            {title: "Salary", class:"text-right"}
        ];
        
End JavaScript

Function Main()
  updateTable2()
End Function

Function updateTable2()
  DataTable11.settings.columns = columns2
  DataTable11.settings.data = data2
  DataTable11.build()
End Function

Function Btn_GoToForm2_onclick()
  ChangeForm(Form2)
End Function

Form2

JavaScript

 var data1 = [
    ["Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500"],
    ["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000"],
    ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"],
    ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
    ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
];

var columns1 = [
            {title: "Name"},
            {title: "Position"},
            {title: "Office"},
            {title: "Extn."},
            {title: "Start date"},
            {title: "Salary", class:"text-right"}
        ];
        
End JavaScript

Function Main()
  updateTable()
End Function

Function updateTable()
  DataTable1.settings.columns = columns1
  DataTable1.settings.data = data1
  DataTable1.build()
End Function

Function Btn_GoToForm1_onclick()
  ChangeForm(Form1)
End Function

You have to use the back tick `, not the regular one '.

1 Like

Please zip the project and post it - that way I’m sure to be using the same thing.

Hi dear,
meanwhile I did some other tests.
Attached I posted two identic projects, datatest1 e datatest2.
The only difference between them is that datatest1 starts with main form and doesn’t work properly (datatable1 is empty and datatable2 works fine), while datatest2 starts with Form1 (in which there is datatable1) and everything works fine (both datatable works properly, filled correctly with coloums and data)
Really I’m getting mad about it.

DataTable Test1.appstudio.zip (23.0 KB)
DataTable Test2.appstudio.zip (23.0 KB)
.

I loaded DataTable Test 1 and started it. I clicked on Goto Form1.

“DataTable1” displayed with 2 lines.

Does this mean it worked properly for me?

Also, what version of AppStudio are you using?

No, datatable1 should have the data and the coloums as data1 and coloumns1 as the code above (so 6 coloums and 5 rows) and datatable2 should have data2 and coloumns2
I’m using the latest version, I installed it two weeka ago

I think I see what might be going on here.

You have two Function Main() statements - one in Form1, the other in Form2. However. you can only have one Function Main in your app.

When it runs your code, the second Function Main() which gets executed replaces the first one.

You will need to give them unique names, or combine them into one function.

oh very very very thanks a lot, it works!!!
I didn’t know that can exist only one function Main in the app, I thought that was one per form.
So I combined updateTable() and updateTable2() in a single function Main and everything goes fine.

Thanks a lot again, I really appreciated your interest
Best regards
Rotondi Alex