.NET W kompilatorze online działa, a Visual Studio nie.

0

Witam, dlaczego ten kod:

<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>

    <script src="~/js/site.js"></script>
</head>
<body>

    <div class="container" style="display: flex; align-items: center; justify-content: center; font-size: 12px;">
        <iframe id="videoFrame" width="854" height="420" src="https://www.youtube.com/embed/P-1mEshYLK8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        
    </div>

    <div class="multiple-items">
          <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></div> 
          <div><img src="http://kenwheeler.github.io/slick/img/fonz2.png"></div>
          <div><img src="http://kenwheeler.github.io/slick/img/fonz3.png"></div>
          <div><img src="http://kenwheeler.github.io/slick/img/fonz4.png"></div>
          <div><img src="http://kenwheeler.github.io/slick/img/fonz5.png"></div>
    </div>

    <h2>@Model.AutoPlay</h2>
    <br />
    <h2>@Model.LiczbaRund</h2>

    <script>
        var autoplay = @Html.Raw(Json.Serialize(Model.AutoPlay));
        if (autoplay) {
            var embedLink = "https://www.youtube.com/embed/P-1mEshYLK8";
            var watchLink = generateYouTubeLink(embedLink);
            var newTab = window.open(watchLink, '_blank');
            newTab.focus();
        }
    </script>

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

    <script type="text/javascript">
        $('.multiple-items').slick({
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3
        });
    </script>
</body>
</html>

działa w kompilatorze online: http://jsfiddle.net/s8jk3qb7/ a u mnie w Visualu (testowałem na 2 komputerach) nie. Problem jest taki, że powinien tu działać slide i w kompilatorze online działa bardzo dobrze, a u mnie te obrazki pojawiają się jeden pod drugim i tak nie powinno być... Dzięki

0

A konsola w przeglądarce coś Tobie wypluwa?

0
gswidwa1 napisał(a):

A konsola w przeglądarce coś Tobie wypluwa?

Tak, coś takiego na czerwono:

caught ReferenceError: jQuery is not defined
    at slick.min.js:1:152
    at slick.min.js:1:160
(

Dodałem taką linijkę:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
lub
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

Ale nadal jest ten sam błąd.

0

A patrzyłeś na przykłady dostarczone przez "producenta" ?
screenshot-20230502024138.png
Pobierz paczkę z nuget i przeanalizuj przykłady. Skoro tam działa bez problemu to i u Ciebie musi.
screenshot-20230502024306.png

1

odpowiedź jest prosta.
Chodzi o miejsce wczytywania JQuery.
W twoim wypadku bibloteka nie jest jeszcze załadowana w momencie gdy twój skrypt chce jej użyć
https://stackoverflow.com/questions/8886614/uncaught-referenceerror-jquery-is-not-defined

0

@H311O: staraj się nie łapać pierwszej hipotezy błędu, jaka strzeli do głowy. Z kompilatorem C# to nie miało nic wspólnego

0
Kardash napisał(a):

odpowiedź jest prosta.
Chodzi o miejsce wczytywania JQuery.
W twoim wypadku bibloteka nie jest jeszcze załadowana w momencie gdy twój skrypt chce jej użyć
https://stackoverflow.com/questions/8886614/uncaught-referenceerror-jquery-is-not-defined

Dzięki, działa.

Mam ostatnią sprawę.

Jak wpisuje ten kod w kompilatorze online to wszystko dobrze działa:

<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>

    <script src="~/js/site.js"></script>
</head>
<body>
    <div class="single-item">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
    </div>

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

    <script type="text/javascript">
        $('.single-item').slick();
    </script>
</body>
</html>

A jak odpalam to u siebie w Visualu, to tworzy się taki nieskończony pasek na dole i te liczby są porozrzucane po całej stronie, wiece może dlaczego tak się dzieje?SharedScreenshot.jpg

1 użytkowników online, w tym zalogowanych: 0, gości: 1