Call jquery .each method from scala.js

Question

Is this doc out-dated? http://www.scala-js.org/doc/calling-javascript.html Can't seem to get this right in intellij:

import org.scalajs.dom.html
import org.scalajs.dom
import org.scalajs.dom.raw.HTMLElement
import scala.scalajs.js
import js.JSConverters._

import fr.iscpif.scaladget.d3._
import fr.iscpif.scaladget.mapping._

import scala.scalajs.js
import scala.scalajs.js.annotation.JSExport
import org.scalajs.jquery.jQuery

/**
 * Created by IDEA on 31/10/15.
 */
@JSExport
object LearnD3 {
  @JSExport
  def main(div: html.Div): Unit = {
    jQuery("#list > li").each((x, y) => y)
  }
}

First dom.HTMLElement doesn't seem to exist. There is org.scalajs.dom.raw.HTMLElement, but even if I import that there is a type mismatch:

Can you provide the full example (imports also?) – Onilton Maciel Nov 02 '15 at 17:30 — Onilton Maciel, Nov 02 '15 at 17:30

Onilton Maciel · Accepted Answer · 2015-11-02T19:02:59.440

5

You need to specify the types of the parameters. The following code works:

val x = jQuery("#list > li").each((i: js.Any, y: Element) => y)

You may note that index i is of the type Any and usually you would expect a index to be of the type Int. Because of this kind of problems, jquery-facade was born: a more strongly typed facade for jquery. I highly recommend it. The same code in jquery-facade:

 import org.querki.jquery._

 ... 

 val x = $("#list > li").each((y: Element, i: Int) => y)

Or, if you don't need the i index:

 val x = $("#list > li").each((y: Element) => y)

Or you want y type to be infered:

 val x = $("#list > li").foreach(y => y)

edited Nov 02 '15 at 19:02

answered Nov 02 '15 at 18:33

Onilton Maciel

3,559
1
25
29

Note that this example was one of the reasons why I created jquery-facade, since I use each() a lot. each() works somewhat more intuitively there, and the mapElems() and foreach() extension methods work best with Scala code. (See https://github.com/jducoeur/jquery-facade/blob/master/src/main/scala/org/querki/jquery/JQueryExtensions.scala) – Justin du Coeur Nov 02 '15 at 18:44
I was about to update the answer with Jquery-facade example :) – Onilton Maciel Nov 02 '15 at 18:45
`foreach` seems to work. Not the other two: https://www.evernote.com/l/ATH1SCHGKB9FPYY76pia0A_APqk9zx6oaaoB/image.png – qed Nov 02 '15 at 20:39
So, looking at your code, it seems like wrong import, you are using a different version of Element. Try `dom.Element` instead of `html.Element` – Onilton Maciel Nov 04 '15 at 02:48

score 2 · Answer 2 · answered Nov 02 '15 at 17:33

2

Actually, that was always just intended to be a conceptual example of how to use ThisFunction -- it's never actually been correct for the loosely-typed scala-js-jquery facade. (It's closer to the jquery-facade version, although at the moment that still requires Element rather than HTMLElement, since that is what the JQuery docs say. I should think about whether that ought to be tightened; I'm honestly not sure.)

But basically, that was never intended to be literal code, and I believe it's never worked as such. It's just an illustration of the syntax of ThisFunction.

As for HTMLElement, yes, that's now under raw. You would usually refer to that as dom.html.Element now. In that respect, it is out of date. But regardless, the example should be taken more as a concept than literal code. (And yes, the example might use rewriting; PRs are generally happily accepted.)

answered Nov 02 '15 at 17:33

Justin du Coeur

2,699
1
14
19

I would love to contribute, but I have to understand how the javascript-calling works in scala.js first. :-) – qed Nov 02 '15 at 18:50
It takes a little practice, and function-passing callbacks are the deep end of the pool. But you might want to try comparing the function signatures in jquery-facade with the JavaScript jQuery documentation, to at least get a sense of how *I* approach the translation... – Justin du Coeur Nov 02 '15 at 19:49
Ok. I also noticed that scala.js facades often don't have test files, why is that? – qed Nov 02 '15 at 19:51
Anyways, if you can find some time to write a tutorial for writing facades, that will be highly appreciated and enable more people to contribute. – qed Nov 02 '15 at 19:56
1

The lack of tests is mainly because there's typically no real functionality there: in theory, it's just providing signatures for the JavaScript libraries, which hopefully have the real tests. (Querki acts as the de facto testbed for most of my stuff.) And yeah, the tutorial is on my to-do list, but I don't want to do so until I've upgraded to SJS 0.6.5 myself and internalized how the | operator affects things... – Justin du Coeur Nov 02 '15 at 22:32
Looking forward to that. Have followed you on twitter. – qed Nov 02 '15 at 22:37

Call jquery .each method from scala.js

2 Answers2

Linked