Jwplayer don’t work when using Ajax script

JavaScript
1

Hope someone can help me.

I’m building up a small and simple CMS. In the CMS there is a movie and a photo page where a thumb of the photo or movie is loaded in the right side of the page and in the left side the photo or movie is showed.

The left side where the movie or photo is showed is loaded using an Ajax script. The Issue is that the movies don’t show up. I’m using jwplayer to show movies. It’s loaded dynamic by an auto generated link:

<a href=\\"javascript:ajaxpage('movie-view.php?var1=" .$mov1. "&var2=" . $displayMovieLowPath ."', 'rightcolumn');\\">Watch movie 1</a>

The Ajax code looks like this (I have not written this myself!):

<script type="text/javascript">
/***********************************************
* http://dynamicdrive.com/dynamicindex17/ajaxcontent.htm
***********************************************/
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText;
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>

I think somehow the script don’t send all info to the movie-view.php page that is loads using the Ajax.

If I don’t load the page using the Ajax script like this:

<a href=\\"movie-view.php?var1=" .$mov1. "&var2=" . $displayMovieLowPath ."\\" target=new>Watch movie 1</a>

The page open and load and the jwplayer works just fine.

I think there needs to be add some codes to the Ajax script around this spot:

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText;
}

But I have no idea of what to add or how the codes should look like.

If it’s a help/hint I had the same issue with photos where I use Shadowbox.js (http://www.shadowbox-js.com/) to show my photos. The Shadowbox did not show up when clicking a thumb on the page loaded using the Ajax script, then I add the this piece of code to the script: Shadowbox.setup(); so it ended look like this:

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText;
Shadowbox.setup();
}

Hope someone can help me getting the jwplayer work.

THANKS

2

Here comes a Little bonus info. It is the latest version 6.7 im using.

The codes for calling the movie looks like:

<div id="myElement">Loading the player 6...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<? echo($_GET["var2"].$f4vfilenameext) ?>",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
</script>

Hope someone can help

3

@GertK ;
I use jwplayer in my project and it’s work fine.

Everything is in the documentation, are you sure you are following the instructions properly?

4

Hi, I think i do - thatss why I dont understand whay it does not Work. Do you have any suggestions?

5

Hey there,

Could you post a link to a page where we can see this in action.
Although not coded very elegantly, the AJAX itself looks ok, so it would really help to see a demo of this not working.

6

Hi,

Got your PM.
On the page you are having the error on, when you click on a link to get a video, the console is reporting:

ReferenceError: getRenderingMode is not defined - movies.php line 182

That is a good place to start looking.

7

Thanks, what program or how does you use to see that?

8

You go to the page where you are getting the error open the console in your broswer’s dev tools (how do I do that?) and click on the link that is producing the error.