Nitrogen get content of table

Question

So, I have a nitrogen page, index.erl, which contains codes like this:

body() ->
  [#table{
     id = mytable,
     rows=[
           #tablerow{
              cells=[#tableheader{text="column a"},
                     #tableheader{text="column b"},
                     #tableheader{text="column c"},
                     #tableheader{text="column d"}]
             },
           #custom_row{ %% just a wrapper around #tablerow
              column_a = "a",
              column_b = "b",
              column_c = "c",
              column_d = "d"
             }
           %% ... more #custom_rows omitted
          ]
     },
   #button{text="submit", postback=store_table}
  ].

event(store_table) ->
  TableData = something_like_querySelector(mytable),
  insert_into_database(TableData).

How do I get the content of mytable, does nitrogen has something like querySelector?

Answer 1

There isn't something as nice and clean as querySelector, but it is possible to retrieve the contents of an arbitrary DOM element though use of Nitrogen's #api{} action.

Using your code above, we could do the following:

body() ->
  wf:wire(#api{name=send_table_contents, tag=some_tag}),
  [#table{
     id = mytable,
     rows=[
           #tablerow{
              cells=[#tableheader{text="column a"},
                     #tableheader{text="column b"},
                     #tableheader{text="column c"},
                     #tableheader{text="column d"}]
             },
           #custom_row{ %% just a wrapper around #tablerow
              column_a = "a",
              column_b = "b",
              column_c = "c",
              column_d = "d"
             }
           %% ... more #custom_rows omitted
          ]
     },
   #button{text="submit", click="page.send_table_contents(objs('mytable').html())"}
  ].

api_event(send_table_contents, some_tag, [TableHTML]) ->
  insert_into_database(TableHTML).

It's not as clean as being able to request the contents like you can with wf:q, but it does get the job done.

The quick explanation here is that the #api{} action creates a new function on the page called page.api_name_attribute (so if you look above, you'll see the name attribute was send_table_contents and the javascript function called in #button.click was also send_table_contents. The contents are then captured in an api_event(NameOfAPI, Tag, ListOfArgs) postback function.

That said, I've added this feature to the to-do list because it seems like a useful thing.