TechQA.

Javascript not working on server

4.4k views Asked by At

I really hope this isn't a duplicate question as it seems to be a big question, but I've searched for a long while now to no avail... I have made an HTML5 tabbed interface that's calling a .js file for functionality. The project works AMAZING on my local computer but when I moved it to the server we're using there is no more functionality. The server is sql server 2008, I've developed the project in Visual Studio 2010. Minded the project is still on-going but all I want is for those tabs to work like on my local computer. Here's some code...

Home.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabbed Interface</title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
  <div id="tabContainer">
    <div class="tabs">
      <ul>
        <li id="tabHeader_1">Home</li>
        <li id="tabHeader_2">New Case</li>
        <li id="tabHeader_3">Search</li>
        <li id="tabHeader_4">Reports</li>
        <li id="tabHeader_5">Administration</li>
      </ul>
    </div>
    <div class="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Home</h2>
        <p>Some Content</p>
      </div>
      <div class="tabpage" id="tabpage_2">
        <div id="wrapper2">
            <div id="newCaseTabContainer">
                <div class="newCaseTabs">
                    <ul>
                        <li id="tabHeader_6">Customer Information</li>
                        <li id="tabHeader_7">Incident Information</li>
                        <li id="tabHeader_8">Operator Information</li>
                        <li id="tabHeader_9">Incident Analysis</li>
                        <li id="tabHeader_10">Audit Log</li>
                    </ul>
                </div>
                <div class="newCaseTabContent">
                    <div class="tabpage" id="tabpage_6">
                        <h2>Customer</h2>
                    </div>
                    <div class="tabpage" id="tabpage_7">
                        <h2>Incident</h2>
                    </div>
                    <div class="tabpage" id="tabpage_8">
                        <h2>Operator</h2>
                    </div>
                    <div class="tabpage" id="tabpage_9">
                        <h2>Analysis</h2>
                    </div>
                    <div class="tabpage" id="tabpage_10">
                        <h2>Audit</h2>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Search</h2>
        <p>CONTENT GALORE!!</p>
      </div>
      <div class="tabpage" id="tabpage_4">
        <h2>Reports</h2>
        <p>WOOO</p>
      </div>
      <div class="tabpage" id="tabpage_5">
        <h2>Administration</h2>
        <p>YEAH!!!!!!</p>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="Scripts/Script.js"></script>
</body>
</html>

Script.js

window.onload = function () {

    // get tab containers
    var container = document.getElementById("tabContainer");
    var check = document.getElementById("newCaseTabContainer");

    // set current tab
    // also set the new case tab when new case tab is selected
    var navitem = container.querySelector(".tabs ul li");
    var checkitem = check.querySelector(".newCaseTabs ul li");

    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current", ident);
    var checkident = checkitem.id.split("_")[1];
    checkitem.parentNode.setAttribute("data-current", checkident);

    //set current tabs with class of activetabheader
    navitem.setAttribute("class", "tabActiveHeader");
    checkitem.setAttribute("class", "tabActiveHeader");

    //get new case tab element to display tab control within
    var displayNewCaseTabs = document.getElementById("tabHeader_2");

    //hide other tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
        pages[i].style.display = "none";
    }
    var newCasePages = check.querySelectorAll(".tabpage");
    for (var i = 1; i < newCasePages.length; i++) {
        newCasePages[i].style.display = "none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick = displayPage;
    }
    var newCaseTabs = check.querySelectorAll(".newCaseTabs ul li");
    for (var i = 0; i < newCaseTabs.length; i++) {
        newCaseTabs[i].onclick = displayPage;
    }
}

// on click of one of tabs
function displayPage() {

    var current = this.parentNode.getAttribute("data-current");

    //remove class of activetabheader and hide old contents
    document.getElementById("tabHeader_" + current).removeAttribute("class");
    document.getElementById("tabpage_" + current).style.display = "none";

    var ident = this.id.split("_")[1];

    //add class of activetabheader to new active tab and show contents
    this.setAttribute("class", "tabActiveHeader");
    document.getElementById("tabpage_" + ident).style.display = "block";
    this.parentNode.setAttribute("data-current", ident);
}

The Style.css the javascript is referencing...

* 
{
    margin:0;
    padding:0;
}

body 
{
    width:75%;
    font: .8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

h2
{ 
    margin-bottom:10px;
    margin-left:10px;
}

#wrapper
{
    width:720px;
    margin:40px auto 0;
}

#wrapper2
{
    width:720px;
    margin:40px 40px 0px 20px;
}

#wrapper h2
{
    color:Black;
    text-align:left;
    margin-bottom:20px;
}

#wrapper2 h2
{
    color:Black;
    text-align:left;
    margin: 10px 10px 25px 30px;
}

#wrapper a
{
    display:block;
    font-size:1.2em;
    padding-top:20px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
}

#wrapper2 a
{
    display:block;
    font-size:1.2em;
    padding-top:20px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
}

#tabContainer 
{
    width:75%;
    height:100%;
    position:absolute;
    padding:15px;
    background-color:#2e2e2e;
    -moz-border-radius: 4px;
    border-radius: 4px; 
}

#newCaseTabContainer
{
    width:75%;
    height:80%;
    position:absolute;
    padding:15px;
    border-radius: 2px;
}

.newCaseTabs
{
    height:30px;
}

.newCaseTabs > ul
{
    font-size:1em;
    list-style:none;
}

.newCaseTabs > ul > li
{
    margin-left:15px;
    padding:7px 10px;
    display:block;
    float:left;
    color:#333;
    border: 1px solid Black;
    border-bottom-width: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius:4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; 
    background: #E0E0E0; /* old browsers */
    background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

.newCaseTabs > ul > li:hover
{
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #333;
}

.newCaseTabs > ul > li.tabActiveHeader
{
    background: #FF0000; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #FFF;
}

.tabs
{
    height:30px;
}

.tabs > ul
{
    font-size: 1em;
    list-style:none;
}

.tabs > ul > li
{
    margin:0 2px 0 0;
    margin-left:10px;
    padding:7px 10px;
    display:block;
    float:left;
    color:#333;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid Black;
    border-bottom-width: 0px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius:4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; 
    background: #E0E0E0; /* old browsers */
    background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

.tabs > ul > li:hover
{
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #333;
}

.tabs > ul > li.tabActiveHeader
{
    background: #0000FF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #FFF;
}

.tabscontent 
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px; 
    padding:10px 10px 25px;
    height:90%;
    background: #E8E8E8; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
    margin:0;
    color:#333;
}

.newCaseTabContent
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border: 2px solid;
    border-top-width: 1px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #CCCCCC; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
}

This is probably a newb mistake but I really need some extreme help with this... Thanks in advance...

EDIT Mind you the .css and .js files are in their own folders within my project, which is why it states Styles/Style.css and Scripts/Script.js

IMPORTANT UPDATE!!: Ok so I've found out the compatibility mode is turned on in my browser, then when I turn it off the application works PERFECTLY!! Exactly like it is on my local machine. I don't think, or don't know, if this is the solution to this problem, as it just works on my machine, and possibly not others, as anyone using this application would have to turn off that setting individually... How can I make it so my users don't have to do that? Is there some code I can put in to make it so that everyone can view it like how it's supposed to??

javascript css html tabbed-interface
Original Q&A
2

There are 2 answers

2
Cedric Reichenbach On BEST ANSWER

Based on your most recent post edit, I assume it's an IE compatibility issue.

This will make IE use the most recent rendering mode (i.e. best HTML5 compatibility):

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

(You have to put this into your html document's head.)

1
Hogan On

Are you sure the files were uploaded to the sub-directories... maybe the directories were not created and then the upload failed. Check by typing the url for the js file into the browser.

If that works (you can get the js by typing the URL in) then change the URLs in your HTML to have a FULL URL PATH including the domain name. This will get you on the right track.

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in HTML

Related Questions in TABBED-INTERFACE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions