Javascript not working on server

Question

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??

Threw it in [jsBin](http://jsbin.com/AKUgopit/1/edit?html,css,js,output) and it appears to work. If you look in your browsers developer tools on the network tab, does Script.js load? — Tom, Jan 23 '14 at 21:13
Indeed. What errors do you see when you check your brower's console log? Also: this problem has nothing whatever to do with SQL Server. — Matt Gibson, Jan 23 '14 at 21:18
Tried emptying the cache in case you have a dud js file version? — StackExchange What The Heck, Jan 23 '14 at 21:19
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. — Hogan, Jan 23 '14 at 21:20
It doesn't have anything in that tab.. also in the script tab its not really showing any javascript just the html, but then again I'm not too familiar with the dev tool... — Brian W, Jan 23 '14 at 21:22
@Hogan it gives me a runtime error when I try and access the .js file through the URL... what the heck does that mean?? — Brian W, Jan 23 '14 at 21:24
What does your console say? I prefer Firebug but stock consoles do pretty well at outlining errors. It's probably something simple, like a path issue. Double check your paths are correct relative to where the script is loading from. **BTW** Please use something like this http://jsfiddle.net/ZeDTx/ to keep your question nice and neat and give people something solid to work off of. — Casey Dwayne, Jan 23 '14 at 21:30
@MattGibson OK!! so my console log said that the javascript is running in compatibility mode then I switched the view where it said that and worked!! BUT, it doesn't save that change cause its the developer tool I'm assuming?? Cause when I close it out and go back to it using the URL it stays the same... does it have something to do with that do you think?? — Brian W, Jan 23 '14 at 21:32
@Tom this is an intranet application so unfortunately I wouldn't be able to provide you with a link, or at least I'm not experienced enough to do that... I've been using a direct URL to access the server and the project it's under like with all of our intranet stuff. I'll put a domain name through our DNS later but as for now it's just development. — Brian W, Jan 23 '14 at 21:46

score 0 · Answer 1 · answered Jan 23 '14 at 21:21

0

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.

answered Jan 23 '14 at 21:21

Hogan

69,564
10
76
117

I have the files within the directories, and when I type in the URL for the js file I get "window is undefined", "Microsoft JScript runtime error"... What does that mean? – Brian W Jan 23 '14 at 21:40

score 0 · Accepted Answer · answered Jan 23 '14 at 22:18

0

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.)

answered Jan 23 '14 at 22:18

Cedric Reichenbach

8,970
6
54
89

AHHH!!! OMG this worked... wow.. I was seriously about to punch my compy. Thanks so much man!! I guess it was a kinda-sorta newb mistake then. Definitely remember that for the next time a compatibility issue hits me in the face. – Brian W Jan 23 '14 at 22:23
Well, that's just IE-specific. Btw, for website development, you might want to look at different Browsers as well (at least test your websites in them). – Cedric Reichenbach Jan 24 '14 at 08:39

Javascript not working on server

2 Answers2