Drab: remote controlled frontend framework for Phoenix

You may do something like

{:phoenix_html, "2.12.0"}

just guessing but maybe a mix deps.unlock phoenix_html and then mix deps.get is needed?

I am publishing v0.10.1 which contains fix for that issue (and many others)

It is Friday evening, and I am at the airport, publishing the release. What can possibly go wrong? :slight_smile:


Is there a way to remove the debug messages “You may debug Drab functions in IEx by… import Drab.{Modal, Element, Live, Core}.etc”

Especially when running in production. its just cluttering up my logging window.

Hi doogs,
it will be solved in the next release. Please be patient.

Hey, If I wanted to add a Drab button to the main layout of my application how would I do that?

The button would be part of the main layout, not part of a specific controller/template.

Does this mean that I would have to create a Drab Commander for all of my controllers, then include the shared Commander on all of those other controllers?

Is there any easier way than that if I want the button to be accessible application wide?

You’d just make that button a shared commander of its own then you can put it anywhere as long as you include the drab system itself and the page itself is drabbed. To be able to drab something you need to initialize drab after all. :slight_smile:

That is easy to automate though with a few macro’s that you can just use into a controller.

1 Like

actually, now rather than having empty string as default, i use “lies:lies” as default for drab attr and it seems fine

1 Like

Hi, just started using drab for some project. i want to dynamically add drab attribute in template (using sigil ~E), like drab="<%= drab %>", however if drab attr is set to “”, ex: < input drab="" >, drab js will throw error, i currently make workaround by having two template, one with drab and one without. is there better solution than this?

TypeError: list is null add_form:1116:19
split_drab_attribute http://localhost:4000/delivery_order/add_form:1116
set_event_handlers http://localhost:4000/delivery_order/add_form:1165
connect http://localhost:4000/delivery_order/add_form:267
value webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
forEach self-hosted:266
value webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
value webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
value webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
e webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
value webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
value webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
decode webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
value webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
onmessage webpack:///./node_modules/phoenix/priv/static/phoenix.js?:1
Source map error: TypeError: bootstrap.js.map is not a valid URL.
Resource URL: webpack:///./node_modules/bootstrap/dist/js/bootstrap.js?
Source Map URL: bootstrap.js.map
Source map error: TypeError: popper.js.map is not a valid URL.
Resource URL: webpack:///./node_modules/popper.js/dist/esm/popper.js?
Source Map URL: popper.js.map

1 Like

Also, sometime when using Drab, i need integration with javascript library (say ag-grid), i do this primarily by calling Drab.exec_elixir from browser side. Sometime i also need to get returned value (say remote data pagination), i currently do this by asking the commander to exec_js which will set corresponding variable with JSON data, then at exec_elixir callback to consume that data. I don’t think this is quite clean, what do you think?

defhandler drab_search_select(socket, sender) do
          "id" => html_id,
          "query" => query_text,
          "var_name" => js_var_name
        } = sender

        data = search_select(html_id, query_text)

        exec_js(socket, "#{js_var_name} = #{Jason.encode!(data)}")

$('#<%= id %>').selectize({
                      valueField: 'value',
                      labelField: 'display',
                      searchField: 'display',
                      options: [],
                      create: false,
                      load: function(query, callback) {
                          //query is a text
                          if (!query.length) return callback();
                          Drab.exec_elixir('drab_search_select', {id: "<%= id %>", query: query, var_name: "<%= var_name %>"}, () => {
                              callback(<%= var_name %>)
1 Like

I’ve just discovered Drab, and it looks amazing, but I’ve hit a wall with the first thing I want to do with it: make dynamic forms. Specifically, I can’t figure out how to poke and peek at the data in a form. Is this possible with Drab?


Are you talking about what the user is actively typing? Or the data ‘you’ sent to the form?


Either, but I am specifically trying to add and remove nested forms for a has_many schema. Full details on this post: Poking and peeking form data


Never mind, it was there all along in @changeset. I was thrown by IO.inspect not printing the nested structs recursively.

1 Like

After playing around some more, I now want to get the data the user has entered to the form. Is this possible?

See the Drab page: https://tg.pl/drab#simple. Is this what you wanted to do?


Yep the drab page shows how to get information from the DOM, it’s very doable. :slight_smile:


Not quite. That example is setting an assign instead of directly manipulating the DOM. It looks like Drab.Element has what I am after.

1 Like

The Simple example is getting the full contents of the form sent back to the server. Element tends to involve another round-trip, which adds a bit of latency, but if it’s fine for some use cases. You can then set DOM values directly using Element of course, but you asked how to get the data from the DOM. :slight_smile:


Oh, I completely misunderstood that example, then. I’ll go over it again now. Thanks!