Javascript не работает на сервере

Я действительно надеюсь, что это не повторяющийся вопрос, так как кажется, что это большой вопрос, но я долго искал его безрезультатно... Я создал интерфейс с вкладками HTML5, который вызывает файл.js для функциональности., Проект работает УДИВИТЕЛЬНО на моем локальном компьютере, но когда я переместил его на сервер, который мы используем, больше нет функциональности. Сервер SQL Server 2008, я разработал проект в Visual Studio 2010. Предполагается, что проект все еще продолжается, но все, что я хочу, - это чтобы эти вкладки работали на моем локальном компьютере. Вот код...

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);
}

Style.css, на который ссылается javascript...

* 
{
    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 */
}

Это, вероятно, ошибка новичка, но мне очень нужна крайняя помощь с этим... Заранее спасибо...

РЕДАКТИРУЙТЕ, имейте в виду, что файлы.css и.js находятся в их собственных папках в моем проекте, поэтому в нем указаны Styles/Style.css и Scripts/Script.js.

ВАЖНОЕ ОБНОВЛЕНИЕ!! Итак, я обнаружил, что режим совместимости включен в моем браузере, а затем, когда я его выключаю, приложение работает ОТЛИЧНО!! Точно так же, как это на моей локальной машине. Я не думаю или не знаю, является ли это решением этой проблемы, поскольку она работает только на моей машине, а возможно, и на других, так как любой, кто использует это приложение, должен будет отключить эту настройку по отдельности... Как я могу сделать так, чтобы мои пользователи не должны были это делать? Есть ли какой-нибудь код, который я могу вставить, чтобы сделать так, чтобы каждый мог видеть его так, как он должен?

Источник

2 ответа

Решение

Основываясь на вашем последнем редактировании поста, я предполагаю, что это проблема совместимости IE.

Это заставит IE использовать самый последний режим рендеринга (т.е. лучшую совместимость с HTML5):

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

(Вы должны поместить это в свой HTML-документ head.)

Источник

Вы уверены, что файлы были загружены в подкаталоги... возможно, каталоги не были созданы, а затем загрузка не удалась. Проверьте, введя URL-адрес для файла JS в браузере.

Если это работает (вы можете получить JS, введя URL-адрес в), то измените URL-адреса в HTML-коде, чтобы иметь полный путь PATH, включая имя домена. Это поможет вам на правильном пути.

Источник
Другие вопросы по тегам