jQWidgets Forums

jQuery UI Widgets › Forums › Navigation › Tabs › jqxTabs in IE8 – object Error

Tagged: , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 12 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    jqxTabs in IE8 – object Error Posts
  • March 13, 2013 at 2:09 pm jqxTabs in IE8 – object Error #16978

    cwnOnTheHill
    Member

    Hey guys, thanks in advance for your assistance.

    Currently, what I am speaking of works fine in IE9+

    The problem I am having is with IE8 browsers.

    When my page loads, I get a “message from webpage” with the error stating “[object Error]”

    What I have is a basic jqxTabs page with 10 tabs, each tab containing a jwPlayer video. After I click Ok the object Error, the first tab loads successfully, video and all. I can play the video with no issues. However, all of the other tabs content is blank. As I said before, there are no problems in IE9+, all tabs function properly.

    Here is some code to take a look at…

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Project 365 - U.S. Marshals Service - National Center for Judicial Security</title>
    <link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="tabs.css" type="text/css" />
    <link rel="stylesheet" href="/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <script type="text/javascript" src="/scripts/gettheme.js"></script>
    <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxtabs.js"></script>
    <script src="/jwplayer/jwplayer.js"></script>
    <script>jwplayer.key="qFdX9nhIazmXy+Icm2TgxiYbyFLTa8uh/TfcBw=="</script>
    <script type="text/javascript">
    	$(document).ready(function () {
    		var theme = 'redmond-ui';
    		$('#jqxTabs').jqxTabs({ width: '99%', height: 720, position: 'top', theme: 'darkblue' });
    	});
    </script>
    </head>
    <body class='default'>
    	<div id='jqxWidget'>
    		<div id='jqxTabs' class='jqx-rc-all'>
    		<ul>
    			<li style="margin-left: 30px;">Starts With You</li>
    			<li>Introduction</li>
    			<li>Communications</li>
    			<li>Security</li>
    			<li>Detail</li>
    			<li>False Liens</li>
    			<li>Travel</li>
    			<li>Internet</li>
    			<li>Commuting</li>
    			<li>Packages</li>
    			<li>Residential</li>
    		</ul>
    		<div class="content-container">
    		<br><b><center>Security Starts With You</center></b>
    			<div id='vid2' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid2').setup({
    				file: '/vid/Project 365 Security Tips-11.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>
    		</div>
    		<div class="content-container">
    		<br><b><center>Introduction</center></b>
    			<div id='vid1' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid1').setup({
    				file: '/vid/Project 365 Security Tips-1.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>Inappropriate Communications</center></b>
    			<div id='vid3' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid3').setup({
    				file: '/vid/Project 365 Security Tips-4.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>Courtroom Security</center></b>
    			<div id='vid4' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid4').setup({
    				file: '/vid/Project 365 Security Tips-5.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>Security Detail</center></b>
    			<div id='vid5' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid5').setup({
    				file: '/vid/Project 365 Security Tips-3.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>False Liens</center></b>
    			<div id='vid6' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid6').setup({
    				file: '/vid/Project 365 Security Tips-2.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>Travel Safety</center></b>
    			<div id='vid7' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid7').setup({
    				file: '/vid/Project 365 Security Tips-6.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>Internet Security</center></b>
    			<div id='vid8' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid8').setup({
    				file: '/vid/Project 365 Security Tips-7.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>Commuting</center></b>
    			<div id='vid9' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid9').setup({
    				file: '/vid/Project 365 Security Tips-8.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>Suspicious Packages</center></b>
    			<div id='vid10' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid10').setup({
    				file: '/vid/Project 365 Security Tips-9.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    		<div class="content-container">
    		<br><b><center>Residential Security</center></b>
    			<div id='vid11' class="content-container">
    				<script type='text/javascript'>
    				jwplayer('vid11').setup({
    				file: '/vid/Project 365 Security Tips-10.m4v',
    				width: '480',
    				height: '270'
    				});
    				</script>
    			</div>		
    		</div>
    		
    	</div>
    </div>
    </body>
    </html>
    March 13, 2013 at 2:14 pm jqxTabs in IE8 – object Error #16979

    cwnOnTheHill
    Member

    NOTE: After posting the topic, I noticed the theme related issues, and have fixed those, it resolved some odd things visually but did not resolve the problem I am writing about.

    March 13, 2013 at 2:30 pm jqxTabs in IE8 – object Error #16984

    Dimitar
    Participant

    Hello cwnOnTheHill,

    After removing the video scripts, the page runs without any issues. Thus, the error comes from the player scripts. Here is a version without them:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Project 365 - U.S. Marshals Service - National Center for Judicial Security
        </title>
        <link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="tabs.css" type="text/css" />
        <link rel="stylesheet" href="/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
        <script type="text/javascript" src="/scripts/gettheme.js"></script>
        <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="/jqwidgets/jqxtabs.js"></script>
        <script src="/jwplayer/jwplayer.js"></script>
        <!--<script>        jwplayer.key = "qFdX9nhIazmXy+Icm2TgxiYbyFLTa8uh/TfcBw=="</script>-->
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'redmond-ui';
                $('#jqxTabs').jqxTabs({ width: '99%', height: 720, position: 'top', theme: 'darkblue' });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id='jqxTabs' class='jqx-rc-all'>
                <ul>
                    <li style="margin-left: 30px;">Starts With You</li>
                    <li>Introduction</li>
                    <li>Communications</li>
                    <li>Security</li>
                    <li>Detail</li>
                    <li>False Liens</li>
                    <li>Travel</li>
                    <li>Internet</li>
                    <li>Commuting</li>
                    <li>Packages</li>
                    <li>Residential</li>
                </ul>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Security Starts With You</center>
                    </b>
                    <div id='vid2' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Introduction</center>
                    </b>
                    <div id='vid1' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Inappropriate Communications</center>
                    </b>
                    <div id='vid3' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Courtroom Security</center>
                    </b>
                    <div id='vid4' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Security Detail</center>
                    </b>
                    <div id='vid5' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            False Liens</center>
                    </b>
                    <div id='vid6' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Travel Safety</center>
                    </b>
                    <div id='vid7' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Internet Security</center>
                    </b>
                    <div id='vid8' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Commuting</center>
                    </b>
                    <div id='vid9' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Suspicious Packages</center>
                    </b>
                    <div id='vid10' class="content-container">
                    </div>
                </div>
                <div class="content-container">
                    <br>
                    <b>
                        <center>
                            Residential Security</center>
                    </b>
                    <div id='vid11' class="content-container">
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Please note that if the player is HTML 5-based, it is not supported by Internet Explorer 8 and earlier.

    Another possible workaround to the issue is to have your videos visible at initialization. To do this, you may use the initTabContent callback function. For an example of its use, please check out the Integration with other widgets jqxTabs demo.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    March 13, 2013 at 2:36 pm jqxTabs in IE8 – object Error #16987

    cwnOnTheHill
    Member

    Thanks for trying that, I should’ve already done that myself, I guess I just thought that if it played from the first tab, why would it not show on the others… Oh well, on to the next… Do you see any issues that would stem from running JavaScript inside a jqxTab?

    March 14, 2013 at 12:45 pm jqxTabs in IE8 – object Error #17083

    Dimitar
    Participant

    Hi cwnOnTheHill,

    To avoid issues with JavaScript inside a jqxTabs, please use the initTabContent callback function, as demonstrated in the Integration with other widgets demo.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.