JQuery/Javascript works on & off

Question

I am using JQuery 1.3.2-min in a project to handle JavaScript animations, ajax, etc. I have stored the file on the same server as the site instead of using Google. When I run the site locally on my development machine, everything works fine in FF, IE, Opera, and Safari (all the latest versions - I work from home and I only have 1 machine for personal use and development use) except for some CSS differences between them and when I go to the live site on my machine it works fine also. I have cleared my caches and hard refreshed the page, and it still works.

This is where it gets interesting however. When I send the site to my boss to test in various OS/Browser configurations, one page doesn't work correctly, some of it works, some doesn't. Also, the client (who uses IE 8) has also confirmed that it is not completely working - in fact he has told me that the page will work fine for a hour, and then just "turn off" for a while. I have never heard of this sort of thing before, and google isn't turning too much up. I have a hunch it may partly be with JQuery's .data(), but I'm not sure.

The page is basically nested unordered lists, and three basic actions happen on the list. The top most unordered list is set to visible (all list via css are set to display: none to keep them hidden on a fresh page request); all list items divs are given a hover action of full opacity on mouseon, and faded back to 50% opacity on mouseoff; and then whenver a paragraph is clicked, the top most unordered list in that list item is displayed.

Here is my Javascript file for the page:

$(function() {
    // Set first level ul visible
    $('div#pageListing ul:first').css('display', 'block');

    // Disable all the hyperlinks in the list
    $('div#pageListing li a').click(function() {
     var obj;
     obj = $(this).parent(0).parent('div:first');
     highlight(obj); 
     return false;
    });

    // List Item mouse hovering
    $('#pageListing li').hover(
      // Mouse On
      function() {
       if ($(this).children('div').attr('id') !== 'activePage') {
        $(this).children('div').css('opacity', 1).css('filter',
          'alpha(opacity=100)');
       }
      }, // Mouse off
      function() {
       if ($(this).children('div').attr('id') !== 'activePage') {
        $(this).children('div').css('opacity', 0.4).css('filter',
          'alpha(opacity=40)');
       }
      });

    // Active list item highlighting
    $('#pageListing li div').click(function() {
      highlight($(this));
     });

    // Sub-list expanding/collapsing
    $('#pageListing p.subpageslink').click(function() {
     // Get next list
      var subTree = $(this).parent('div').next('ul');

      // If list is currently active, close it, else open it.
      if (subTree.data('active') != true) {
       subTree.data('active', true);
       subTree.show(400);
      } else {
       subTree.data('active', false);
       subTree.hide(400);
      }
     });

    // Double clicking of list item - edit a page
    $('#pageListing li div').dblclick(function() {
     var classes = $(this).attr('class');
     var classArray = classes.split(' ');
     var pageID = classArray[1];
     editPage(pageID);
    });

    // Handle button clicking
    $('button#addPage').click(function() {
     addPage();
    });

    $('button#editPage').click(function() {
     var div = $('div#activePage');
     var classes = div.attr('class');
     var classArray = classes.split(' ');
     var pageID = classArray[1];
     editPage(pageID);
    });

    $('button#delPage').click(function() {
     var div = $('div#activePage')
     var classes = div.attr('class');
     var classArray = classes.split(' ');
     var pageID = classArray[1];
     delPage(pageID);
    });
});

// Highlighting of page when clicked
function highlight(obj) {
    // Get previous hightlighted element
    // and un-highlight
    var oldElement = $('div#activePage');
    oldElement.css('background', 'white');
    oldElement.css('opacity', 0.4).css('filter', 'alpha(opacity=40)');
    oldElement.removeAttr('id');

    // highlight current selection
    obj.attr('id', 'activePage');
    obj.css('opacity', 1).css('filter', 'alpha(opacity=100)');
    obj.css('background', '#9dc0f4');

    // add appropiate action buttons
    $('button.pageButton').css('display', 'inline');
}

function addPage() {
    window.location = "index.php?rt=cms/editPage";
}

function delPage(page) {

    var confirm = window.confirm("Are you sure? Any sub-pages WILL BE deleted also.");

    if (confirm) {
     var url = './components/cms/controller/forms/deletePage.php';
     $.ajax( {
      url : url,
      type : 'GET',
      data : 'id=' + page,
      success : function(result) {
       if (!result) {
        document.location = "index.php?rt=cms";
       } else {
        window.alert('There was a problem deleting the page');
       } 
      }
     });
    }
}

function editPage(page) {
    var url = "index.php?rt=cms/editPage/" + page;
    window.location = url;
}

Answer 1

Is it possible that you are linking to (some of) the script files using a src that points to a file on your local disk/HDD? If so, that would explain why it works only on your machine, as then only your machine has access to the script file.

Answer 2

Thank you one and all for your suggestions. The end problem was miscommunication. I work from home, and upload my projects to a SVN server, which the boss then uses to update the live server. Somehow, the correct files were not getting updated - a communication error on my part. Another possible reason was that the page, while being declared XHTML 1.0 Strict, had something like 50 validation errors (mosting incorrectly nested UL), and I cleaned that up to 5 errors. So thank you all, but again a sad example of the importance of team work communication.