getElementById error [resolved]

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
waqas_punjabian
Forum Commoner
Posts: 67
Joined: Wed Aug 10, 2005 9:53 am

getElementById error [resolved]

Post by waqas_punjabian »

Hi all,

I am trying to embed a player in a website and I want to change the video by clicking on the images below the player.
Following code is working fine in Firefox but I am getting an error in IE 7: "getElementById(..) is null or not an object."

Can somebody tell me what I am missing here:

Code: Select all

 
<script type="text/javascript" language="javascript">
function MoveNextMovie(filePath, layerName){
    
    document.getElementById(layerName).innerHTML='<EMBED TYPE="application/x-mplayer2"  src="'+filePath+'" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280">';
}
 
</script>
<table width="325" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td width="325" valign="top" align="left"><OBJECT id="MediaPlayer" width=325 height=280 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><PARAM NAME="FileName"  value="http://www.spongetech.com/images/Complete.wmv"><param name="Showcontrols" value="True"><param name="autoStart" value="True"><PARAM name="wmode" value="opaque"><PARAM name="ShowDisplay" VALUE="false"><div id="videowrapper"><EMBED TYPE="application/x-mplayer2"  src="http://www.spongetech.com/images/Complete.wmv" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280"></div></EMBED></OBJECT></td></tr>
        <tr>
            <td valign="top" align="left">
            <table width="325" border="0">
                <tbody>
                    <tr>
   <td>
<img src="images/demo.gif" alt="Demovideos" width="73" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a><br />
<img src="images/bal.gif" alt="Balancing Act Videos" width="110" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_CarSponge.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a> 
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/pud.gif" alt="" width="87" height="15" border="0" /></a>
</td>
                        <td>&nbsp;</td>
                        <td><a onClick="javascript&#058; window.open('http://s245656731.onlinehome.us/video.php?video=buyscot', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
                        </a></td>
                        <td><a onClick="javascript&#058; window.open('http://s245656731.onlinehome.us/video.php?video=district', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
                        </a></td></tr>
                </tbody>
 
            </table>
            </td>
        </tr>
        <tr>
            <td valign="top" align="left">&nbsp;</td>
        </tr>
    </tbody>
</table>
 
regards,

Waqas
Last edited by waqas_punjabian on Tue Nov 18, 2008 5:30 am, edited 1 time in total.
mmj
Forum Contributor
Posts: 118
Joined: Fri Oct 31, 2008 4:00 pm

Re: getElementById error

Post by mmj »

You are closing the embed tag after the div tag.

That is why validating helps out with stuff like this.
waqas_punjabian
Forum Commoner
Posts: 67
Joined: Wed Aug 10, 2005 9:53 am

Re: getElementById error

Post by waqas_punjabian »

I have changed it as you told, now I have closed the Embed tag first then the div. But the error is still there :(

Code: Select all

<script type="text/javascript" language="javascript">
function MoveNextMovie(filePath, layerName){
    
    document.getElementById(layerName).innerHTML='<EMBED TYPE="application/x-mplayer2"  src="'+filePath+'" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280">';
}
 
</script>
<table width="325" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td width="325" valign="top" align="left"><OBJECT id="MediaPlayer" width=325 height=280 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><PARAM NAME="FileName"  value="http://www.spongetech.com/images/Complete.wmv"><param name="Showcontrols" value="True"><param name="autoStart" value="True"><PARAM name="wmode" value="opaque"><PARAM name="ShowDisplay" VALUE="false"><div id="videowrapper"><EMBED TYPE="application/x-mplayer2"  src="http://www.spongetech.com/images/Complete.wmv" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280"></EMBED></div></OBJECT></td></tr>
        <tr>
            <td valign="top" align="left">
            <table width="325" border="0">
                <tbody>
                    <tr>
   <td>
<img src="images/demo.gif" alt="Demovideos" width="73" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a><br />
<img src="images/bal.gif" alt="Balancing Act Videos" width="110" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_CarSponge.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a> 
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/pud.gif" alt="" width="87" height="15" border="0" /></a>
</td>
                        <td>&nbsp;</td>
                        <td><a onClick="javascript&#058; window.open('http://s245656731.onlinehome.us/video.php?video=buyscot', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
                        </a></td>
                        <td><a onClick="javascript&#058; window.open('http://s245656731.onlinehome.us/video.php?video=district', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
                        </a></td></tr>
                </tbody>
 
            </table>
            </td>
        </tr>
        <tr>
            <td valign="top" align="left">&nbsp;</td>
        </tr>
    </tbody>
</table>
 
mmj
Forum Contributor
Posts: 118
Joined: Fri Oct 31, 2008 4:00 pm

Re: getElementById error

Post by mmj »

I really don't see anything else wrong.

Try posting a validated version of this markup.

On some self closing elements you are using the "short tag" and on others you aren't.
Last edited by mmj on Sun Nov 16, 2008 4:28 am, edited 1 time in total.
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Re: getElementById error

Post by infolock »

Well, it's mainly cuz IE is a pain...

The issue is doing a document.getElementById(someid).innerHTML on one line... IE doesn't exactly play nicely with javascript all the time :-\

try doing it this way:

Code: Select all

 
function MoveNextMovie(filePath, layerName){
  var tmp = document.getElementById(layerName);
  tmp.innerHTML = '<EMBED TYPE="application/x-mplayer2"  src="'+filePath+'" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280" />';
}
 

should fix your problem.
waqas_punjabian
Forum Commoner
Posts: 67
Joined: Wed Aug 10, 2005 9:53 am

Re: getElementById error

Post by waqas_punjabian »

"infolock", Thanks for your advise but unfortunately I am still unable to solve the problem. with the help of your code the error has been changed to "null is null or not an object".

i am just getting mad on this problem :banghead:
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Re: getElementById error

Post by infolock »

see, this is what I was afraid of. I'm going to take a huge guess here as I can't find the answer on google, but I am going to say that creating an embed tag the way you are is incorrect.

What I did find on google though, was that you can use javascript to dynamically create and destroy embeded objects on a page.

That, or why not try applying an ID to the original embeded down at the bottom, and then doing a getElementById.src = layerName on that id, instead of dumping the contents of the div and recreating a brand new embded tag? maybe that will work? dunno, would be interesting to see though...

So, try this. delete the div container you have, keeping the original embeded tag you have (so your embed tag doesn't have a div around it anymore). give the embed tag the same id that the div had.

in your javascript code, change it from innerhtml to src, but only set the value to the src param that's passed to the function.
mmj
Forum Contributor
Posts: 118
Joined: Fri Oct 31, 2008 4:00 pm

Re: getElementById error

Post by mmj »

I've spent hours debugging 10 lines of html just to discover some reallly obscure IE bug like getelementbyid returns elements with the matching name also (I've seen much worse but this comes to mind atm).
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Re: getElementById error

Post by infolock »

mmj: yep, this is an issue with IE, but there are multiple workarounds for it.

however, in this issue there is only one videowrapper id, and none with the name of videowrapper, so not really a viable reason.
waqas_punjabian
Forum Commoner
Posts: 67
Joined: Wed Aug 10, 2005 9:53 am

Re: getElementById error

Post by waqas_punjabian »

I've tried to remove the DIV and using it's id in Embed but still in vane. Getting the same error.
infolock wrote:see, this is what I was afraid of. I'm going to take a huge guess here as I can't find the answer on google, but I am going to say that creating an embed tag the way you are is incorrect.

What I did find on google though, was that you can use javascript to dynamically create and destroy embeded objects on a page.

That, or why not try applying an ID to the original embeded down at the bottom, and then doing a getElementById.src = layerName on that id, instead of dumping the contents of the div and recreating a brand new embded tag? maybe that will work? dunno, would be interesting to see though...

So, try this. delete the div container you have, keeping the original embeded tag you have (so your embed tag doesn't have a div around it anymore). give the embed tag the same id that the div had.

in your javascript code, change it from innerhtml to src, but only set the value to the src param that's passed to the function.
waqas_punjabian
Forum Commoner
Posts: 67
Joined: Wed Aug 10, 2005 9:53 am

Re: getElementById error

Post by waqas_punjabian »

WOW, hurrayyyyyyy Greattttt, I've found the solution myself .hahahaaaaaaa :lol: :lol: :lol:
After 3 days of hard work I've found it.
But I am really thankful to all of you people, specially "infolock"
Actually, I have generated the whole Object tag dynamically, instead of replacing just the Embed tag and it's working fine now.

here's the working code:

Code: Select all

<script type="text/javascript" language="javascript">
function MoveNextMovie(filePath, layerName){
 
        document.getElementById(layerName).innerHTML='<OBJECT id="MediaPlayer" width=325 height=280 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><PARAM NAME="FileName"  value="'+filePath+'"><param name="Showcontrols" value="True"><param name="autoStart" value="True"><PARAM name="wmode" value="opaque"><PARAM name="ShowDisplay" VALUE="false"><EMBED TYPE="application/x-mplayer2"  src="'+filePath+'" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280"></EMBED></OBJECT>';
 
}
</script>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td width="390" valign="top" align="left"><span id="videowrapper"><OBJECT id="MediaPlayer" width=325 height=280 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"><PARAM NAME="FileName"  value="http://www.spongetech.com/images/Complete.wmv"><param name="Showcontrols" value="True"><param name="autoStart" value="True"><PARAM name="wmode" value="opaque"><PARAM name="ShowDisplay" VALUE="false"><EMBED TYPE="application/x-mplayer2"  src="http://www.spongetech.com/images/Complete.wmv" NAME="MediaPlayer" id="MediaPlayer" WIDTH="325" HEIGHT="280"></EMBED></OBJECT></span></td></tr>
        <tr>
            <td valign="top" align="left">
            <table width="390" border="0">
                <tbody>
                    <tr>
   <td>
<img src="images/demo.gif" alt="Demovideos" width="73" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/Complete.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/images/PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a><br />
<img src="images/bal.gif" alt="Balancing Act Videos" width="110" height="15" border="0" />
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_CarSponge.wmv", "videowrapper")'><img src="images/car_s.gif" alt="" width="72" height="15" border="0" /></a> 
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_PetSponge.wmv", "videowrapper")'><img src="images/pet.gif" alt="" width="72" height="15" border="0" /></a>
<a href="#" onclick='MoveNextMovie("http://www.spongetech.com/videos/BalancingAct_PuddlePals.wmv", "videowrapper")'><img src="images/pud.gif" alt="" width="87" height="15" border="0" /></a>
</td>
                        <td>&nbsp;</td>
                        <td><a onClick="javascript&#058; window.open('http://s245656731.onlinehome.us/video.php?video=buyscot', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
                        </a></td>
                        <td><a onClick="javascript&#058; window.open('http://s245656731.onlinehome.us/video.php?video=district', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=550'); return false" href="http://s245656731.onlinehome.us/#"><br />
                        </a></td></tr>
                </tbody>
 
            </table>
            </td>
        </tr>
        <tr>
            <td valign="top" align="left">&nbsp;</td>
        </tr>
    </tbody>
</table>
 
mmj
Forum Contributor
Posts: 118
Joined: Fri Oct 31, 2008 4:00 pm

Re: getElementById error

Post by mmj »

infolock wrote:mmj: yep, this is an issue with IE, but there are multiple workarounds for it.

however, in this issue there is only one videowrapper id, and none with the name of videowrapper, so not really a viable reason.
I wasn't saying that it was a possibility, just mentioning the fact.
Post Reply