Drab select help required

Phoenix Forum Questions / Help
, ,
#1

Hi,

I am using Drab and trying to delete a DOM element. For it I am trying to select the element first and then delete it.

I am using IEx to try it out with the following results:

pry(5)> Drab.Query.select(socket, :html, from: "#detail")
iex(1)> [debug] INCOMING "execjs" on "__drab:same_path:/invoices/new" to Drab.Channel
  Transport:  Phoenix.Transports.WebSocket
  Parameters: %{"error" => ["SFMyNTY.g3QAAAACZAAEZGF0YWgCZ2QADW5vbm9kZUBub2hvc3QAAAHMAAAAAAByAANkAA1ub25vZGVAbm9ob3N0AAAAg9th2AABT4-F02QABnNpZ25lZG4GAEdxQgRjAQ.Fd18OxEfqP-f8ikCZbQC-p-qNDdBLH4REGJc03ZzcUQ", "$ is not defined"]}
** (MatchError) no match of right hand side value: {:error, "$ is not defined"}
    (drab) lib/drab/query.ex:554: Drab.Query.do_query/5
    (stdlib) erl_eval.erl:670: :erl_eval.do_apply/6
    (iex) lib/iex/evaluator.ex:250: IEx.Evaluator.handle_eval/5
    (iex) lib/iex/evaluator.ex:230: IEx.Evaluator.do_eval/3
    (iex) lib/iex/evaluator.ex:208: IEx.Evaluator.eval/3
    (iex) lib/iex/evaluator.ex:94: IEx.Evaluator.loop/1
    (iex) lib/iex/evaluator.ex:24: IEx.Evaluator.init/4
    (iex) lib/iex/pry.ex:64: IEx.Pry.pry/2
    (multipartform) lib/multipartform_web/commanders/invoice_commander.ex:12: MultipartformWeb.InvoiceCommander.delete_item_invoice_list/2
    (drab) lib/drab.ex:323: anonymous fn/7 in Drab.handle_event/6
pry(5)>

I don’t understand why I am getting the error “$ is not defined”.

Any advice is welcome.

Thanks

1 Like
#2

looks like jquery is missing - Drab.Query requires jquery - so make sure you install/add that to the page/your js…

https://tg.pl/drab/query

3 Likes
#3

Thankfully the jQuery requirement is slowly being removed, it’s only required for like 2 functions or so now… :slight_smile:

2 Likes
#4

Hi,

I added the jQuery library and now I am able to query the DOM. So this works:

Drab.Query.select(socket, :html, from: "#detail")

I am still trying to create de proper syntax for selecting the closest tr in a table. So I am using the id of the hole detail section as a reference but still not selecting the hole tr element.

The idea is to have a delete line button to delete the entire record. I tried this and did not work:

Drab.Query.select(socket, :html, from: "#detail.tr")

Thanks your help.

#5

This selector means “the node of id of ‘detail’ with the class of ‘tr’”. Probably it is not what you wanted to archive. I think you want to do something like #detail tr or #detail > tr.

This is the excellent article about CSS selectors:

3 Likes
#6

Can I select the complete tr element to delete it or just the tr properties and attributes?

Thanks

#7

You may delete any DOM node, see https://hexdocs.pm/drab/Drab.Query.html#delete/2

I think you want to do something like

delete socket, "tr"
2 Likes