Некоторые Javascript работают на локальном хосте, некоторые нет - все работает на удаленном сервере?

Сегодня я потратил много времени на настройку локального тестового сервера, и после попытки установить кучу всего вручную я, наконец, решил просто использовать WampServer, и это здорово.

После тестирования моего сайта я был очень рад видеть, что весь PHP работает безупречно, но я заметил, что некоторые из javascript не работают, а некоторые изображения не загружаются.

Все пути относительные — пути к изображениям в css выглядят так: url(img/btn_bg.png). Некоторые из них отображаются, некоторые нет, хотя все они локально находятся в одном месте, и я могу получить к ним доступ через веб-браузер, если вручную наберу путь/имя файла. Все они появляются на удаленном сайте. Я проверил, чтобы пути не зависели от удаленного сайта (не абсолютные пути).

Я не совсем уверен, как проверить, что происходит с JavaScript. У меня есть firebug, но я не знаю, как использовать функции отладки. Я пробовал тестировать заглушки с помощью предупреждений, но безуспешно. Поскольку весь код JS находится в одном файле, он правильно работает на удаленном сервере, а НЕКОТОРЫЕ из них работают правильно локально, я не уверен, что с ним может происходить? Опять же, пути все относительные.

Поскольку этот проект является частным, мне не разрешено раскрывать большую часть кода, но вот несколько примеров:

    function changeDiv()
    {
    var direction = arguments[0];
    var tabs = new Array(
        'basics', 'operations', 'info', 'contractinfo', 'contractsize',
        'intent_tab', 'transportation', 'type', 'mep', 'materials',
        'clinicalresearch', 'consulting', 'collaboration', 'construction',
        'education', 'environmental', 'vendor', 'realestate', 'recs', 'fin');

var vis = new Array();
for ( a = 0; a < tabs.length; ++a )
{
    var temp = tabs[a];
    if (document.getElementById(temp).className.match('show'))
    {
        vis += tabs[a];
    }
}
if (
        vis == 'basics' || vis == 'operations' || vis == 'info' ||
        vis == 'contractinfo' || vis == 'contractsize' || vis == 'intent_tab' ||
        vis == 'transportation' || vis == 'materials' || vis == 'recs' ||
        vis == 'fin' )
{
    switch (vis)
    {
        case 'basics':
        document.getElementById('operations').className =
                        document.getElementById('operations').className.
                            replace(/\bhide\b/, 'show');
        document.getElementById('basics').className =
                        document.getElementById('basics').className.
                            replace(/\bshow\b/, 'hide');
        document.getElementById('back_button').className =
                        document.getElementById('back_button').className.
                            replace(/\bhide\b/, 'show');
        break;

        case 'operations':
        if (direction == 'next')
        {
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('basics').className =
                                document.getElementById('basics').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('back_button').className =
                                document.getElementById('back_button').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'info':
        if (direction == 'next')
        {
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                     replace(/\bhide\b/, 'show');
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                     replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('operations').className =
                                document.getElementById('operations').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'contractinfo':
        if (direction == 'next')
        {
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractinfo').className =
                                document.getElementById('operations').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('info').className =
                                document.getElementById('info').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'contractsize':
        if (direction == 'next')
        {
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('contractinfo').className =
                                document.getElementById('contractinfo').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'intent_tab':
        if (direction == 'next')
        {
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('contractsize').className =
                                document.getElementById('contractsize').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'transportation':
        if (direction == 'next')
        {
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('intent_tab').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'materials':
        if (direction == 'next')
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('transportation').className =
                                document.getElementById('intent_tab').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('materials').className =
                                document.getElementById('materials').className.
                                    replace(/\bshow\b/, 'hide');
        }
        break;

        case 'recs':
        if (direction == 'next')
        {
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
        }

        break;

        case 'fin':
        if (direction == 'back')
        {
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replace(/\bshow\b/, 'hide');
        }

        break;

    }
}
else 
{
    if (vis == 'type')
    {
        if (direction == 'next')
        {
            logic('q_16');
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else
        {
            document.getElementById('transportation').className =
                                document.getElementById('transportation').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bshow\b/, 'hide');
        }
    }
    else if ( vis != 'type')
    {
        if (vis == 'recs' && direction == 'next')
        {
            document.getElementById('fin').className =
                                document.getElementById('fin').className.
                                    replacec(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bhide\b/, 'show');
        }
        else if (vis == 'recs' && direction == 'back')
        {
            document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bshow\b/, 'hide');
        }
        else if (direction == 'next')
        {
            var tab_array = new Array('mep', 'realestate', 'vendor', 'environmental', 'education', 'construction', 'collaboration', 'consulting', 'clinicalresearch');

            var visTab = document.getElementById('vis_tab').value;

            for (x = 0; x < tab_array.length; ++x)
            {
                var temp_tab = tab_array[x];
                document.getElementById(temp_tab).className =
                                        document.getElementById(temp_tab).className.
                                            replace(/\bshow\b/, 'hide');
            }

            switch(visTab)
            {
                case 'mep':
                wholesale();
                break;

                case 'realestate':
                realestate();
                break;

                case 'vendor':
                vendor();
                break;

                case 'environmental':
                environment();
                break;

                case 'education':
                education();
                break;

                case 'construction':
                construction();
                break;

                case 'collaboration':
                collaboration();
                break;

                case 'consulting':
                consulting();
                break;

                case 'clinicalresearch':
                clinicalresearch();
                break;
            }

            document.getElementById('recs').className =
                                document.getElementById('recs').className.
                                    replace(/\bhide\b/, 'show');
            document.getElementById('calc_risk').className =
                                document.getElementById('calc_risk').className.
                                    replace(/\bshow\b/, 'hide');
            document.getElementById('recs_header').className =
                                document.getElementById('recs_header').className.
                                    replace(/\bhide\b/, 'show');

            recsPage();
        }
    }
    else
    {
        document.getElementById('type').className =
                                document.getElementById('type').className.
                                    replace(/\bhide\b/, 'show');
        //materials realestate vendor environmental education construction collaboration consulting clinicalresearch

        var b_vis = new Array('mep', 'realestate', 'vendor', 'environmental', 'education', 'construction', 'collaboration', 'consulting', 'clinicalresearch');

        for (x = 0; x < b_vis.length; ++x)
        {
            var temp_vis = b_vis[x];
            document.getElementById(temp_vis).className =
                                document.getElementById(temp_vis).className.
                                    replace(/\bshow\b/, 'hide');
        }
    }
}
}

Приведенный выше код будет работать для переключения между различными div, по большей части, но этот конкретный раздел не работает полностью:

document.getElementById('recs').className =
    document.getElementById('recs').className.
        replace(/\bhide\b/, 'show');
document.getElementById('calc_risk').className =
    document.getElementById('calc_risk').className.
        replace(/\bshow\b/, 'hide');
document.getElementById('recs_header').className =
    document.getElementById('recs_header').className.
        replace(/\bhide\b/, 'show');

recsPage();

recsPage(); никогда не вызывается на локальном хосте. Удаленно работает нормально. Код идентичен между ними. Есть и другие разделы, которые не работают, но сейчас меня беспокоит только один.

Любые идеи? Поскольку javascript выполняется на стороне клиента, я не могу понять, почему он не работает, если он не на удаленном сервере.


person Kendra    schedule 15.09.2011    source источник
comment
Есть ли тег <base href>, который указывает на место, где, возможно, находится другая версия javascript? Как насчет отладки, чтобы увидеть, выполняются ли функции с помощью такого инструмента, как Firebug, или просто помещая alert('In function: <functionname>') в начало функций, которые, как вы подозреваете, ведут себя неправильно?   -  person CodeCaster    schedule 15.09.2011
comment
Я бы посоветовал вам изучить Firebug. Это несложно, и иногда простое открытие выявляет проблему (часто в консоли печатаются полезные сообщения об ошибках Javascript). Возможно, какой-то другой файл не загружается должным образом, и это немного портит ваш код.   -  person Malvolio    schedule 15.09.2011
comment
Что такое: .replace(/\bhide\b/, 'show'); Какое значение className до и что вы хотите после. Пример пожалуйста.   -  person Andrew D.    schedule 15.09.2011
comment
Кроме того, проведите рефакторинг этого кода, если вы хотите его поддерживать. Например, существует огромное количество повторяющихся вызовов метода document.getElementById, вы можете закешировать их в переменную и избежать повторений.   -  person Igor Zinov'yev    schedule 15.09.2011
comment
@CodeCaster - я попробовал тестирование заглушки (вставив оповещения ()), и именно так я обнаружил, что код не работает в этих разделах.   -  person Kendra    schedule 16.09.2011
comment
@malvolio Я очень хорошо нахожу простые проблемы, открывая firebug =) Вот для чего я его использовал - это функции на вкладках script, dom и net, которые я не понимаю. Раньше я редко использовал javascript в проектах, поэтому особо туда не заглядывал.   -  person Kendra    schedule 16.09.2011
comment
@andrew - я не уверен, что вы просите пример? echo ‹div id='basics' class='show tab'›; включить('basics.php'); эхо ‹/дел›; Это код, в котором заменяются классы. Он переключает их с видимого на скрытый.   -  person Kendra    schedule 16.09.2011
comment
@ Игорь Зиновьев - я не понимаю, что вы имеете в виду. Можете ли вы привести пример кодирования того, что вы бы предложили, пожалуйста?   -  person Kendra    schedule 16.09.2011
comment
@Kendra: Из вашего вопроса: Все пути относительные - пути к изображениям в css выглядят так: url(img/btn_bg.png). Относительно чего: страницы или сервера? Если относительно сервера, то путь должен быть url(/img/btn_bg.png). Если относительно страницы, то папка img должна быть размещена на том же уровне, что и страница.   -  person Andrew D.    schedule 16.09.2011
comment
@Kendra Возьмем, к примеру, код, который изменяет имя класса элемента, он начинается примерно так: document.getElementById('recs_header').className = .... Вы можете создать переменную для каждого идентификатора элемента, который вы запрашиваете таким образом, чтобы вы могли повторно использовать их следующим образом: var recs_header = document.getElementById('recs_header');, а затем: recs_header.className = recs_header.className.replace('hide', 'show');   -  person Igor Zinov'yev    schedule 16.09.2011
comment
О, классно! Спасибо Игорь. Я просмотрю и изменю их до того, как проект будет отправлен клиенту =)   -  person Kendra    schedule 16.09.2011
comment
@igor Кажется, я уже упоминал, что у меня нет большого опыта работы с javascript, поэтому извините, если это вопрос новичка ... если я создам переменную recs_header = document.getElementById('recs_header'); вне функции, будут ли функции по-прежнему иметь к ней доступ, или мне нужно поместить это в каждую функцию, где будет вызываться эта переменная?   -  person Kendra    schedule 16.09.2011
comment
@Kendra Если вы создадите переменную var recs_header (обратите внимание на ключевое слово var) внутри функции, она будет видна в любом месте внутри этой функции и всех функций, определенных внутри нее. Если вам интересно, я предлагаю вам проверить эту ветку вопросов: stackoverflow.com/questions/111102/   -  person Igor Zinov'yev    schedule 19.09.2011


Ответы (1)


Используйте firebug, запустите «Net» и найдите 404 ошибки. Firebug отображает путь, если вы удерживаете указатель мыши на имени файла, поэтому вы сможете определить, откуда берутся ошибки.

Кроме того, проверьте вкладку «Консоль» Firebug на наличие ошибок. Это должно дать вам достаточно подсказок для решения проблем.

person johndodo    schedule 15.09.2011
comment
Спасибо - это позволило мне найти проблему с изображениями. Я до сих пор не уверен, в чем проблема с javascript, но сегодня, когда я попробовал, он работал... Если это произойдет снова, я попробую ваше предложение =) - person Kendra; 16.09.2011
comment
Рад, что это помогло! Не стесняйтесь принимать ответ, если считаете, что он решил вашу проблему. ;) - person johndodo; 16.09.2011