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
outlog
April 26, 2018, 11:59pm
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
Thankfully the jQuery requirement is slowly being removed, it’s only required for like 2 functions or so now…
2 Likes
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.
grych
April 27, 2018, 7:33pm
5
joaquinalcerro:
“#detail .tr”
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:
Have you learned the base id, class, and descendant CSS selectors and then called it a day? If so, you’re missing out on a huge amount of flexibility. Commit these advanced CSS selectors to memory!
3 Likes
Can I select the complete tr element to delete it or just the tr properties and attributes?
Thanks
grych
April 27, 2018, 9:27pm
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