AJAX – chybi jquery? – $ is not defined
- Mira8
- Člen | 36
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
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}
- chemix
- Nette Core | 1310
@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.