Scala JS: Call a Javascript function on an element

Question

I have the following problem. I would like to use https://github.com/aehlke/tag-it/ in my project. However I am not sure how I am supposed to implement the following example given on the github page:

<script type="text/javascript">
$(document).ready(function() {
 $("#myTags").tagit();
});
</script>

<ul id="myTags">
 <!-- Existing list items will be pre-added to the tags -->
 <li>Tag1</li>
 <li>Tag2</li>
</ul>

So far I am able to manipulate the object:

val document = js.Dynamic.global.document
document.getElementById("myTags").innerHTML = "Test"

This works! Test is being rendered.

When I call tagit() instead I am being told that tagit is not a function.

val document = js.Dynamic.global.document
document.getElementById("myTags").tagit()

When I do the "same" call with the chrome java script console everything works fine:

$("#myTags").tagit();

Can someone explain what I am doing wrong? Thank you in advance!

EDIT

It is not a problem of tag-it or jquery not being loaded. Again chrome console works. It is also not a loading issue. Even by clicking a button after everything is loaded for a 100% it doesn't work.

EDIT

Added my partial build defintion so everybody can see that the dependencies are correct:

.jsSettings(
      jsDependencies ++= Seq(
        "org.webjars" % "bootswatch-yeti" % "3.3.5" / "js/bootstrap.js" minified "js/bootstrap.min.js" dependsOn "jquery.js",
        "org.webjars" % "jquery-ui" % "1.11.4" / "jquery-ui.js" minified "jquery-ui.min.js" dependsOn "jquery.js",
        "org.webjars" % "tag-it" % "2.0" / "js/tag-it.js" dependsOn "jquery.js" dependsOn "jquery-ui.js"
      ),
      libraryDependencies ++= Seq(
        "io.github.widok" %%% "widok" % "0.2.2" exclude ("org.webjars", "bootstrap"),
        "be.doeraene" %%% "scalajs-jquery" % "0.8.0",
        "com.lihaoyi" %%% "scalatags" % "0.4.6",
        "org.webjars" % "bootswatch-yeti" % "3.3.5",
        "org.webjars" % "font-awesome" % "4.4.0",
        "org.webjars" % "jquery-ui-themes" % "1.11.4"
      ),
      persistLauncher := true
    )

two problem, one) you may not add tag-it js to your website two) tag-it added before jquery. — Omidam81
– Omidam81, Commented Oct 7, 2015 at 10:49
@Omidam81 both not the case. I even installed a button to test to be sure everything is loaded. It doesn't work. Chrome console works, button doesn't. — Julian Pieles
– Julian Pieles, Commented Oct 7, 2015 at 10:53
your code is correct, but i think the problem is come form order that you add script(with src) tags. — Omidam81
– Omidam81, Commented Oct 7, 2015 at 11:04
@Omidam81 no that can't happen with scala js. I updated my question. As you can see I am already telling the compiler that tag-it depends on jquery and jquery-ui. Once this is done everything is handled for you. There can't be a mistake there. — Julian Pieles
– Julian Pieles, Commented Oct 7, 2015 at 11:08

sjrd · Accepted Answer · 2015-10-07 14:01:15Z

6

Your problem, initially, is that

// Scala.js code
document.getElementById("myTags").tagit()

is not "the same" as

// JavaScript code
$("#myTags").tagit();

Instead, it is the same as, guess what?

// JavaScript code
document.getElementById("myTags").tagit();

which is not valid because tagit() is not a method of HTMLElement returned by getElementById. tagit() is a (pimped) method of JQuery objects returned by the $ function.

You can obtain the $ function in a dynamically typed way using:

// Scala.js code
val $ = js.Dynamic.global.$

and then you can write the same as the jQuery invocation by writing this:

// Scala.js code
$("#myTags").tagit()

The solution found is essentially similar, because the jQuery object is equivalent as $. But then the returned element is a JQuery object, which statically does not have a tagit() method, which is why you needed to cast it to js.Dynamic.

Another way would be to type the tagit() method pimp using this:

// Scala.js code
@js.native
trait JQueryTagIt extends js.Object {
  def tagit(): Unit = js.native
}

implicit def tagItExtensions(jq: JQuery): JQueryTagIt =
  jq.asInstanceOf[JQueryTagIt]

With that, you can more simply do:

// Scala.js code
jQuery("#myTags").tagit()

and it will be statically typechecked.

answered Oct 7, 2015 at 14:01

sjrd

22.2k2 gold badges65 silver badges95 bronze badges

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

2 Comments

Julian Pieles Over a year ago

Thank you very much! Great explanation. One thing I still do not understand is how I should pass options. e.g. tagit({tagLimit: 1}).

sjrd Over a year ago

With the dynamically typed version, use js.Dynamic.literal(tagLimit = 1). For the statically typed version, see this question: stackoverflow.com/questions/26638171/…

Omidam81 · Accepted Answer · 2015-10-07 11:01:13Z

0

$(document).ready(function(){
  $("#myTags").tagit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://bitar.tk/tag-it.min.js"></script>

<ul id="myTags">
 <!-- Existing list items will be pre-added to the tags -->
 <li>Tag1</li>
 <li>Tag2</li>
</ul>

answered Oct 7, 2015 at 11:01

Omidam81

1,91712 silver badges21 bronze badges

1 Comment

Julian Pieles Over a year ago

Thank you very much. Have you seen that I am using Scala JS? I am building a SPA (Single Page Application). One defines the scala dependencies using a sbt build defintion. I updated my awnser so that everybody can see my deps.

Community · Accepted Answer · 2017-05-23 12:16:22Z

0

I found a solution which works. It uses jQuery bindings for Scala JS. By building your own static bindings is the correct way I guess.

jQuery("#myTags").asInstanceOf[js.Dynamic].tagit()

UPDATE

Please see the following post (https://stackoverflow.com/a/32994303/1029251) since this approach is simply wrong considering what scala.js stands for. My solution is not typesafe!

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Oct 7, 2015 at 11:47

Julian Pieles

4,0562 gold badges27 silver badges33 bronze badges

2 Comments

Justin du Coeur Over a year ago

This approach always works, but it's not recommended if you can avoid it, because it takes you out of strongly-typed land, and strong typing is kind of the point of Scala.js. So this sort of thing is usually treated as a last resort.

Julian Pieles Over a year ago

@JustinduCoeur I agree 100%. I posted this before sjrd awnsered. I will edit the post.

Collectives™ on Stack Overflow

Scala JS: Call a Javascript function on an element

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related