Scala.js webloaded js libraries not present?

Question

I setup a project using scala.js.

At the web part (playframework) I added a static library bxslider. With scala.js I add a complete new slider (div, ul and li). Without scala.js all works fine, with scala.js the inserted code is not going to be a slider. I tried to pass a script part with bxSlider() to the correct id. No effect. I get the error bxSlider() is no function.

It seemed to me, that their is no access to bxSlider. Where is the error?

object WidgetSingleArticleSlider {

  def articleEntry(x: SharedArticle, addToCartText: String) = {
    li(
      `class`:="wgsp-item",
      a(
        href:="#",
        figure(
          img(src:=x.articleDescription.pictureSeq.headOption.getOrElse(Pictures.emptyPath))
        )
      ),
      p(
        `class`:="wgsp-title",
        a(
          href:="#",
          x.articleDescription.title
        )
      ),
      p(
        `class`:="wgsp-price",
        (if(x.price.articlePrice(1).specialSubTotal.isDefined)
          x.price.articlePrice(1).specialSubTotal.get.formatted("%,.2f ")
        else x.price.articlePrice(1).subTotal.formatted("%,.2f ")) + x.price.articlePrice(1).currency
      ),
      div(
        `class`:="row no-gutter",
        div(
          `class`:="col-xs-12 text-center",
          a(
            `class`:="btn btn-third-col",
            href:="#",
            addToCartText
          ),
          div(`class`:="gap-30")
        )
      )
    )
  }

  def toHtml(title: String, articleSeq: Seq[SharedArticle], addToCartText: String) = {
    div(
      `class`:="widget wg-specials store-alt box-with-pager mobile-collapse",
      h3(
        `class`:="wg-title mobile-collapse-header store-alt",
        title
      ),
      div(
        `class`:="wg-body mobile-collapse-body",
        ul(
          id := "tium",
          `class`:="vertical-bx-1",
          articleSeq.map(e => articleEntry(e,addToCartText))
        )
      )
    )
  }

}

In main.scala.html this is added at the end:

<script src="@routes.Assets.versioned("js/jquery-1.11.0.min.js")"></script>
        <script src="@routes.Assets.versioned("js/jquery-ui-1.10.4.custom.min.js")"></script>
        @*<script src="@routes.Assets.versioned("plugins/jquery.bxslider.min.js")"></script>*@
        <script src="@routes.WebJarAssets.at(webJarAssets.locate("js/jquery.bxslider.js"))"></script>
        <script src="@routes.Assets.versioned("js/bootstrap.min.js")"></script>
        <script src="@routes.Assets.versioned("js/jquery-accessibleMegaMenu.js")"></script>
        <script src="@routes.Assets.versioned("js/jquery.validationEngine.js")"></script>
        <script src="@routes.Assets.versioned("js/jquery.validationEngine-en.js")"></script>
        <script src="@routes.Assets.versioned("js/fastclick.js")"></script> <!-- Eliminating the 300ms click delay on mobile browsers -->
        <script src="@routes.Assets.versioned("js/plugins.js")"></script>
        <script src="@routes.Assets.versioned("js/scripts.js")"></script>
        @scalajs.html.scripts("client", routes.Assets.versioned(_).toString, name => getClass.getResource(s"/public/$name") != null)

After this their is a request (which works) to scala.js which add the code above to the html structur at main.scala.html.

Now the adding sequence of my scala.js

val child = place.appendChild(Waiting.spinner.render)
    Ajax.get(url(s"list/article/random?size=$size"),withCredentials = true).map{ xhr =>
      place.removeChild(child)
      val articleSeq = upickle.default.read[Seq[SharedArticle]](xhr.responseText)
      val box = WidgetSingleArticleSlider.toHtml( title, articleSeq, addToCartText )
      place.appendChild( box.render )
    }

The problem is, that this added code is not transformed to a bxSlider. Also I try to restart it again as a bxSlider added as a script at WidgetSingleArticleSlider with:

$('.vertical-bx-1').bxSlider({
      minSlides: 3,
      slideMargin:0,
      nextText: '<i class="arrow_carrot-right"></i>',
      prevText: '<i class="arrow_carrot-left"></i>',
      pager: false,
   }));

The result is still only html. Asking for the loaded plugin results in undefined.

This is the code which was added after call:

<div class="widget wg-specials store-alt box-with-pager mobile-collapse"><h3
        class="wg-title mobile-collapse-header store-alt">specials</h3>
    <div class="wg-body mobile-collapse-body">
        <ul id="tium" class="vertical-bx-1">
            <li class="wgsp-item"><a href="#">
                <figure><img src="/thumbnail/width/200/nothing"></figure>
            </a>
                <p class="wgsp-title"><a href="#">Wiesenkerbel Saatgut</a></p>
                <p class="wgsp-price">2.34 EUR</p>
                <div class="row no-gutter">
                    <div class="col-xs-12 text-center"><a class="btn btn-third-col" href="#">addToCart</a>
                        <div class="gap-30"></div>
                    </div>
                </div>
            </li>
            <li class="wgsp-item"><a href="#">
                <figure><img src="/thumbnail/width/200/nothing"></figure>
            </a>
                <p class="wgsp-title"><a href="#">Vogelmiere Saatgut</a></p>
                <p class="wgsp-price">2.34 EUR</p>
                <div class="row no-gutter">
                    <div class="col-xs-12 text-center"><a class="btn btn-third-col" href="#">addToCart</a>
                        <div class="gap-30"></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script>

        jQuery('#tium').bxSlider();

        if (window.jQuery === undefined) window.$ = window.jQuery = jQuery;

        $(document).ready(function () {

            $('.vertical-bx-1').bxSlider().reloadSlider();

            $('#tium').bxSlider().reloadSlider();

            $('.vertical-bx').bxSlider({

                minSlides: 3,

                slideMargin: 0,

                nextText: '<i class="arrow_carrot-right"></i>',

                prevText: '<i class="arrow_carrot-left"></i>',

                pager: false

            });

        });

    </script>
</div>

Answer 1

Solution found. No problem with scala.js it was jquery. https://github.com/stevenwanderski/bxslider-4/issues/605

var j = jQuery.noConflict();

I added this line to my code and all worked fine.