1. дома
  2. Вопрос и ответ
  3. Javascript не работает на сервере

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

2014-01-23 4 views
1

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

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

Это вероятно, ошибка newb, но мне действительно нужна какая-то чрезвычайная помощь в этом ... Спасибо заранее ...

EDIT Ум вам .css и .js файлы находятся в своих собственных папках в моем проекте, поэтому он заявляет Стили/style.css и скрипты/script.js

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

источник

2014-01-23 Brian W

+2

Бросил его в [jsBin] (http://jsbin.com/AKUgopit/1/edit?html,css,js,output), и, похоже, он работает. Если вы смотрите в инструментах разработчика браузеров на вкладке сети, загружается ли Script.js? – Tom

+0

Действительно. Какие ошибки вы видите при проверке журнала консоли вашего браузера? Кроме того: эта проблема не имеет ничего общего с SQL Server. –

+0

Пробовал очищать кеш, если у вас есть версия файла dud js? – yochannah

ответ

0

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

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

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

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

источник

2014-01-23 22:18:55

+0

AHHH !!! OMG это сработало ... ничего себе .. Я серьезно собирался пробить свой комп. Спасибо огромное! Я предполагаю, что это была какая-то новая ошибка. Определенно помните, что в следующий раз проблема совместимости поражает меня в лицо. –

+0

Ну, это только IE-специфический. Кстати, для разработки веб-сайтов вы можете также взглянуть на разные браузеры (по крайней мере, протестировать свои сайты в них). –

0

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

Если это работает (вы можете получить js, введя URL-адрес), измените URL-адреса в своем HTML, чтобы иметь ПОЛНЫЙ URL PATH, включая имя домена. Это поможет вам на правильном пути.

источник

2014-01-23 21:21:39 Hogan

+0

У меня есть файлы в каталогах, и когда я ввожу URL-адрес для js-файла, я получаю «окно не определено», «Ошибка выполнения Microsoft JScript» ... Что это значит? –

Смежные вопросы

 Смежные вопросы