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
– Onilton Maciel

2015-11-02 17:30:22 +00:00
Commented Nov 2, 2015 at 17:30 — Onilton Maciel
– Onilton Maciel, Commented Nov 2, 2015 at 17:30
Sure. Question edited.

qed
– qed

2015-11-02 17:33:38 +00:00
Commented Nov 2, 2015 at 17:33 — qed
– qed, Commented Nov 2, 2015 at 17:33

Onilton Maciel · Accepted Answer · 2015-11-02 19:02:59Z

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 2, 2015 at 19:02

answered Nov 2, 2015 at 18:33

Onilton Maciel

3,7191 gold badge28 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Justin du Coeur Over a year ago

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 github.com/jducoeur/jquery-facade/blob/master/src/main/scala/…)

Onilton Maciel Over a year ago

I was about to update the answer with Jquery-facade example :)

qed Over a year ago

foreach seems to work. Not the other two: evernote.com/l/ATH1SCHGKB9FPYY76pia0A_APqk9zx6oaaoB/image.png

Onilton Maciel Over a year ago

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

Justin du Coeur · Accepted Answer · 2015-11-02 17:33:32Z

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 2, 2015 at 17:33

Justin du Coeur

2,6591 gold badge16 silver badges19 bronze badges

6 Comments

qed Over a year ago

I would love to contribute, but I have to understand how the javascript-calling works in scala.js first. :-)

Justin du Coeur Over a year ago

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...

qed Over a year ago

Ok. I also noticed that scala.js facades often don't have test files, why is that?

qed Over a year ago

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.

Justin du Coeur Over a year ago

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...

|

Collectives™ on Stack Overflow

Call jquery .each method from scala.js

2 Answers 2

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related