PlayScalaJS with bootstrap not working

217 Views Asked by Mikaël Mayer At 07 April 2025 at 22:39

I recently came across the fact that the imports of bootstrap were not accessible in my code. Namely, the plugin alert for jQuery was not available within my code (jQuery.fn.alert was undefined). I had in the header:

<script src="@routes.Assets.at("lib/jquery/jquery.min.js")" 
  type="text/javascript"></script>

<script src="@routes.Assets.at("lib/bootstrap/js/bootstrap.min.js")" 
  type="text/javascript"></script>

and in the body:

<body>
    @playscalajs.html.scripts("client")
</body>

In the client script, when it called $("...").alert(), I receive the error: alert is not a function, although I verified bootstrap did define it.

How to make bootstrap and playscalajs work nicely together?

Original Q&A

There are 1 best solutions below

Mikaël Mayer On 23 September 2015 at 14:01 BEST ANSWER

The problem came from @playscalajs.html.scripts("client") which is unfold to these:

<script src="/assets/client-jsdeps.js" type="text/javascript"></script>
<script src="/assets/client-fastopt.js" type="text/javascript"></script>
<script src="/assets/client-launcher.js" type="text/javascript"></script>

jQuery is imported again in client-jsdeps.js since it is a scala-js dependency. Since I could not interleave bootstrap imports before the client-launcher.js script and after the client-jsdeps.js scripts, I delayed the execution of the main object using the following code:

// New object calling the previous Main object
@JSExport
object MainDelayed extends js.JSApp { 
  @JSExport def main(): Unit = $(document).ready(Main.main _)
}

// The original object
object Main { 
  def main() = { ... }
}

PlayScalaJS with bootstrap not working

There are 1 best solutions below

Related Questions in SCALA

Related Questions in PLAYFRAMEWORK

Related Questions in SCALA.JS

Related Questions in PLAYSCALAJS

Trending Questions

Popular # Hahtags

Popular Questions