PlayScalaJS with bootstrap not working

Question

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?

score 3 · Accepted Answer · edited Sep 26 '15 at 05:38

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

1 Answers1