AJAX – chybi jquery? – $ is not defined

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
Mira8
Člen | 36
+
0
-

Ahoj,
pracuji na video webu.Proklik na detail videa je pres ajax.

Problem: pokud video chci otevrit v novem tabu/okne – neprehraje se a console hlasi: localhost/:75 Uncaught ReferenceError: $ is not defined

Po beznem rozkliknuti je to OK.

Kde muze byt chyba?

V layoutu includuju scripty:

{block scripts}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="//vjs.zencdn.net/4.12/video.js"></script>
     <script src="{$basePath}/js/main.js"></script>
{/block}

V presenteru:

public function handleShow($val)
   {
       $this->setView('show');
       $this->template->video = $this->videos->getVideoById($val);
       $this->redrawControl('contentVideos');
   }

V sablonce show.latte:

{block content}
    <script>
        $(document).ready(function() {
            videojs("home_video", { "controls": true, "autoplay": true, "preload": "auto" }).ready(function(){
                var myPlayer = this;
                var aspectRatio = 5/12;

                function resizeVideoJS(){
                    var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
                    myPlayer.width(width).height( width * aspectRatio );
                }

                resizeVideoJS();
                window.onresize = resizeVideoJS;
            });
        });
    </script>

    <div class="content slide">
        <ul class="responsive">
            <li class="header-section">
                <p class="placefiller">
                    <div style="max-width: 1000px; margin: 0 auto;">
                        <video id="home_video" width="840" class="video-js vjs-default-skin vjs-big-play-centered" poster="{= $video->url_before . $video->img_url}" >
                            <source src="{= $video->url_before . $video->video_url}" type='video/mp4'/>
                        </video>
                        <div id="videoTitle">{= $video->title}</div><div id="videoProvider">{= $video->provider}</div>
                    </div>
                </p>
            </li>
        </ul>
    </div>
{/block}

v layoutu includuju content takto:

{snippet contentVideos}
     {include content}
{/snippet}

Diky moc za jakoukoliv radu! :)

iguana007
Člen | 970
+
0
-

Ten Javascript v bloku content voláš dříve než se ti načte jQuery …
Blok scripts v layotu neplň těma JS knihovnama ty dej nad ten blok a v té šabloně show.latte jej naplň tím JS co máš v bloku content.
Problem solved :)

iguana007
Člen | 970
+
0
-

iguana007 napsal(a):

Ten Javascript v bloku content voláš dříve než se ti načte jQuery …
Blok scripts v layotu neplň těma JS knihovnama ty dej nad ten blok a v té šabloně show.latte jej naplň tím JS co máš v bloku content.
Problem solved :)

{block content}
    <div class="content slide">
        <ul class="responsive">
            <li class="header-section">
                <p class="placefiller">
                    <div style="max-width: 1000px; margin: 0 auto;">
                        <video id="home_video" width="840" class="video-js vjs-default-skin vjs-big-play-centered" poster="{= $video->url_before . $video->img_url}" >
                            <source src="{= $video->url_before . $video->video_url}" type='video/mp4'/>
                        </video>
                        <div id="videoTitle">{= $video->title}</div><div id="videoProvider">{= $video->provider}</div>
                    </div>
                </p>
            </li>
        </ul>
    </div>
{/block}
{block scripts}
    <script>
        $(document).ready(function() {
            videojs("home_video", { "controls": true, "autoplay": true, "preload": "auto" }).ready(function(){
                var myPlayer = this;
                var aspectRatio = 5/12;

                function resizeVideoJS(){
                    var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
                    myPlayer.width(width).height( width * aspectRatio );
                }

                resizeVideoJS();
                window.onresize = resizeVideoJS;
            });
        });
    </script>
{/block}
Mira8
Člen | 36
+
0
-

stale nepomohlo :/

potapnik
Člen | 127
+
0
-

Mrkni do dokumentace, v ty sablone dej pred <script> {include parent} nebo tak neco, jinak se ti nepromitne sekce scripts definovana v layoutu do ty konkretni sablony.

chemix
Nette Core | 1310
+
0
-

@Mira8 @potapnik obavam se ze i toto nepomuze, jelikoz jestli jsem to spravne pochopil tak on to video nacita prave ajaxem. Tzn ze sice by mohl prekreslit i sekci se skripty, ale nezda se mi to jako ciste reseni a zdali by to vubec fungovalo. (nezkousel jsem)

Co potrebujes, je nacist si javascript na strance vsechen dopredu a poresit pak inicializaci noveho videa po tom co se nacte skrze ajax. Nejspise pouzivas nette.ajax.js takze si budes muset dopsat nejake rozsireni, inspiroval bych se treba https://github.com/…llTo.ajax.js (mozna to jde nejak jinak, nemam s nette.ajax.js tolik zkusenosti a vse si pisu trosku jinak sam)

a pak si jen posilat html kod s videem, zadny js kod.