1

I spent a lot of time setting up a local testing server today, and after trying to install a bunch of stuff manually I finally decided to just use WampServer, which seems great.

After testing out my site I was very happy to see all the PHP executing flawlessly, but I noticed that some of the javascript didn't seem to be working, and some of the images won't load.

All of the paths are relative - image paths in the css look like this: url(img/btn_bg.png). Some of them show up, some don't, even though they are all in the same place locally, and I can access them via the web browser if I type the path/filename manually. They all show up on the remote site. I checked to make sure that the paths weren't dependent on the remote site (not absolute paths).

I'm not really sure how to test what is going on with the JavaScript. I've got firebug, but I don't know how to use the debugging features. I did try stub testing via alerts, with no success. Since all the JS code is in the same file, it's working correctly on the remote server, and SOME of it is working correctly locally, I'm not sure what could be going on with it? Again, the paths are all relative.

Since this project is proprietary, I'm not allowed to disclose much of the code, but here's a few examples:

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

The above code will work for switching between the various divs, for the most part, but this particular section isn't functioning all the way:

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(); never gets called on the localhost. It works fine remotely. The code is identical between the two. There are other sections elsewhere that aren't functioning, but right now that's the only one that concerns me.

Any ideas? Since javascript executes client-side, I can't imagine why it's not working when it's not on the remote server.

Igor Zinov'yev
  • 3,676
  • 1
  • 33
  • 49
Kendra
  • 116
  • 2
  • 13
  • Is there a `` tag that points to a location where perhaps a different version of the javascript resides? How about debugging to see whether the functions get executed, either by a tool like Firebug or simply placing `alert('In function: ')` at the top of the functions that you suspect to be misbehaving? – CodeCaster Sep 15 '11 at 09:24
  • My suggestion would be that you learn Firebug. It isn't difficult and sometimes, just *opening* it will reveal the problem (often, helpful Javascript error messages are printed on the console). Probably, some other file isn't loading properly and that's screwing up your code in a subtle way. – Michael Lorton Sep 15 '11 at 09:26
  • What is: `.replace(/\bhide\b/, 'show');` Which className value before and what you want after. Example please. – Andrew D. Sep 15 '11 at 09:32
  • Also, please refactor that code if you mean to maintain it. For example, there is a huge amount of repeating `document.getElementById` method calls, you can cache them in a variable and avoid repetitions. – Igor Zinov'yev Sep 15 '11 at 09:41
  • @CodeCaster - I tried stub testing (putting the alerts() in), and that's how I found out the code wasn't running in those sections. – Kendra Sep 15 '11 at 20:07
  • @malvolio I'm very good at finding the simple issues via opening firebug = ) That's what I've been using it for - it's the features on the script, dom, and net tabs that I don't understand. I've rarely used javascript before in projects, so haven't looked there much. – Kendra Sep 15 '11 at 20:10
  • @andrew - I'm not sure what you're asking for an example of? echo "
    "; include('basics.php'); echo "
    "; That's the code that the classes are being replaced in. It switches them from being visible to hiding.     – Kendra Sep 15 '11 at 20:11
  • @Igor Zinov'yev - I'm not sure what you mean. Can you provide a coding example of what you would suggest please? – Kendra Sep 15 '11 at 20:13
  • @Kendra: From your question: _All of the paths are relative - image paths in the css look like this: url(img/btn_bg.png)_. __Relative__ to what: page or server? If relative to server, then path must be `url(/img/btn_bg.png)`. If relative to page, then `img` folder must be placed in same level as page. – Andrew D. Sep 16 '11 at 05:25
  • @Kendra Take for instance the code that changes the class name of an element, it starts something like that: `document.getElementById('recs_header').className = ...`. You can make a variable for each element ID you query that way so you can reuse them like so: `var recs_header = document.getElementById('recs_header');`, and then: `recs_header.className = recs_header.className.replace('hide', 'show');` – Igor Zinov'yev Sep 16 '11 at 08:15
  • Oh nice! Thanks Igor. I'll go through and change those before the project is submitted to the client = ) – Kendra Sep 16 '11 at 18:06
  • @igor I think I already mentioned I don't have much experience with javascript, so excuse me if this is a newbie question...if I make the variable recs_header = document.getElementById('recs_header'); outside of a function, will the functions still be able to access it, or do I need to put that in each function where that variable would be called? – Kendra Sep 16 '11 at 18:12
  • @Kendra If you make a `var recs_header` (note the `var` keyword) variable inside a function, it will be visible anywhere inside that function and all functions defined inside it. If you're interested, I suggest you check out this question thread: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work – Igor Zinov'yev Sep 19 '11 at 09:02

1 Answers1

1

Use firebug, fire up "Net" and look for 404 errors. Firebug displays the path if you hold the mouse over file name, so you should be able to deduct where the errors come from.

Also, check Firebug tab "console" for errors too. This should give you enough clues to solve the problems.

johndodo
  • 17,247
  • 15
  • 96
  • 113
  • Thanks - this enabled me to find the issue with the images. I'm still not sure what the problem with the javascript is, but today when I tried it was working... If it happens again I'll try your suggestion = ) – Kendra Sep 15 '11 at 20:15
  • Glad it helped! Feel free to accept the answer if you think it solved your problem. ;) – johndodo Sep 16 '11 at 09:26