Fork me on GitHub
#clojurescript
<
2019-06-17
>
vinurs15:06:41

hello, how can i convert this js code to cljs

vinurs15:06:28

i’ve tried sth like this, but it’s wrong

tavistock15:06:13

does adding :drawCallback #(js/console.log "hello") do anything

vinurs15:06:41

it shows TypeError: document.getElementById(...).DataTable is not a function

tavistock15:06:10

what does this do:

(js/console.log (.getElementById js/document
                  "alternative-page-datatable"))

kszabo15:06:16

.DataTable is implemented on the jquery wrapped object

kszabo15:06:26

so you have to call jquery, not plain document

tavistock15:06:22

.getElementById is not a replacement for $

tavistock15:06:41

try js/$ instead

tavistock15:06:26

if you have jquery installed

vinurs15:06:35

like this ? (.DataTable (js/$ “alternative-page-datatable”))

tavistock15:06:24

“#alternative-page-datatable” but yea, assuming a couple things about your environment

vinurs15:06:44

(.DataTable (js/$ “#alternative-page-datatable”) (clj->js {:pagingType “full_numbers” :drawCallback #(js/console.log “hello”)}))

vinurs15:06:47

but, it shows TypeError: $(...).DataTable is not a function

tavistock15:06:02

do you have jquery installed

vinurs15:06:57

yes, i’ve include the jquery.js in my html head

tavistock15:06:02

as ran from the console

vinurs15:06:09

Uncaught TypeError: $(...).DataTable is not a function at <anonymous>:1:38

tavistock15:06:36

bc if so you need to include that in the head also

vinurs15:06:53

<script src=“js/vendor/jquery.js”></script> <script src=“js/vendor/jquery.dataTables.min.js”></script> <script src=“js/vendor/dataTables.bootstrap4.js”></script> <script src=“js/vendor/dataTables.responsive.min.js”></script> <script src=“js/vendor/responsive.bootstrap4.min.js”></script> <script src=“js/vendor/dataTables.buttons.min.js”></script> <script src=“js/vendor/buttons.bootstrap4.min.js”></script> <script src=“js/vendor/buttons.html5.min.js”></script> <script src=“js/vendor/buttons.flash.min.js”></script> <script src=“js/vendor/buttons.print.min.js”></script> <script src=“js/vendor/dataTables.keyTable.min.js”></script> <script src=“js/vendor/dataTables.select.min.js”></script>

vinurs15:06:01

i’ve added this in my head

tavistock15:06:06

hmm, what does you html body look like

vinurs15:06:37

how to replay to you insert the code?

tavistock15:06:02

no sure what this means

tavistock16:06:09

can you tell me what this returns for you in the console document.querySelectorAll('*[id]')

vinurs16:06:57

NodeList(32) [link#main-style-container, script#app.min.js, style#--re-frame-10x-key-frames--, style#--re-frame-10x-styles--, body#body, div#app, div#detached-topbar-placeholder, div#vertical-sidebar-placeholder, div#left-side-menu-container.slimscroll-menu, img#side-main-logo, img#side-sm-main-logo, div#detached-sidebar-placeholder, div#vertical-topbar-placeholder, div#horizontal-topbar-placeholder, table#alternative-page-datatable.table.dt-responsive.nowrap, input#light-mode-check.custom-control-input, input#dark-mode-check.custom-control-input, input#vertical-check.custom-control-input, input#horizontal-check.custom-control-input, input#detached-check.custom-control-input, input#fluid-check.custom-control-input, input#boxed-check.custom-control-input, input#default-check.custom-control-input, input#light-check.custom-control-input, input#dark-check.custom-control-input, input#fixed-check.custom-control-input, input#condensed-check.custom-control-input, input#scrollable-check.custom-control-input, button#resetBtn.btn.btn-primary.btn-block, div#--re-frame-10x--, iframe#blockbyte-bs-sidebar.notranslate, div#blockbyte-bs-indicator.blockbyte-bs-fullHeight.blockbyte-bs-visible]

vinurs16:06:54

VM47876:1 Uncaught TypeError: $(...).DataTable is not a function at <anonymous>:1:35

tavistock16:06:18

so it seems like datatables isnt attaching itself to jq correctly

vinurs16:06:07

ok, let me check it first

tavistock16:06:15

what does $.fn.DataTable return

tavistock16:06:11

it needs to return something, thats your problem i believe

vinurs16:06:32

yes, let me check the jquery.js i’ve included first

vinurs16:06:38

ok, the order i included the file wrong, now it’s ok

vinurs16:06:27

thanks very much

vinurs16:06:24

now, i try use cljs to call it

tavistock16:06:36

you need to change your original code to include (js/$ "#alternative-page-datatable") instead of getElementById

tavistock16:06:12

but it ought to work

vinurs16:06:41

(.DataTable (js/$ “#alternative-page-datatable”) (clj->js {:pagingType “full_numbers” :drawCallback #(js/console.log “hello”)}))

vinurs16:06:43

this works

tavistock16:06:44

i can help you translate function () {$('.dataTables_paginate > .pagination').addClass('pagination-rounded');} if you need help

vinurs16:06:08

yes, i need

tavistock16:06:36

take a crack at it and i can give you some feedback

vinurs16:06:41

wait a minute

vinurs16:06:43

(.DataTable (js/$ “#alternative-page-datatable”) (clj->js {:pagingType “full_numbers” :drawCallback (fn [] (.addClass (js/$ “.dataTables_paginate > .pagination”) ‘pagination-rounded’) )}))

tavistock16:06:21

' and " are mean different things in clj unlike js, so 'pagination-rounded' should be "pagination-rounded"

tavistock16:06:02

but yea thats a good translation gj

vinurs16:06:41

wow, works now

cjsauer18:06:56

When using goog-define, how might I access that definition from a different namespace than the one containing said definition? Given (goog-define DEBUG false), simply requiring the containing namespace and using my-defs/DEBUG doesn’t seem to be working…

cjsauer19:06:50

Ah, never mind, user error. Typo in my namespace picard-facepalm