Javascript acts different locally and on a server

Question

So i am developing a website with many html pages and now i have a problem with JavaScript that really puzzles me. The thing is my website locally works just fine, but when i host it on a server some JavasScript code stops to work(sometimes it works) and the interesting thing about it that when inspecting it i don't get any console JS errors and what more interesting is that JS that doesn't work is in the same .js file with other js codes that work.Also, locally everything works 100%. Well the problem was that my mobile media query dropwdown menu JS stopped wroked when i hosted it on the server - originally the code looked like this:

$(function(){
    $(document).mousedown(function(){
        $('.dropdown .active').removeClass('active').children('ul').hide();
    });
    $('.dropdown').on('mousedown','.subMenu', function(e){
        e.stopPropagation();
        var elem = $(this);
        if(elem.is('.active')) {
            elem.children('ul').slideUp(150);
            elem.removeClass('active');
        } else {
           $('.dropdown .active').removeClass('active').children('ul').hide();
            elem.addClass('active').children('ul').slideDown(150);
        }
    });
    $('.subMenu').on('mousedown','ul', function(e){
        e.stopPropagation();

    });       
});

$("#footer").load("footer.html");
$("#header").load("header.html");

As you can see i am using separate footer and header html files and uploading them to my pages using JS. <div id="header"></div> This worked perfectly locally, but when i hosted it to server my mobile dropdown sometimes works and sometimes doesn't... It looked that i managed to make the javascript work with a better success rate by editing it to this:

$(document).ready(function() {
$(function(){
    $(document).mousedown(function(){
        $('.dropdown .active').removeClass('active').children('ul').hide();
    });
    $('.dropdown').on('mousedown','.subMenu', function(e){
        e.stopPropagation();
        var elem = $(this);
        if(elem.is('.active')) {
            elem.children('ul').slideUp(150);
            elem.removeClass('active');
        } else {
           $('.dropdown .active').removeClass('active').children('ul').hide();
            elem.addClass('active').children('ul').slideDown(150);
        }
    });
    $('.subMenu').on('mousedown','ul', function(e){
        e.stopPropagation();

    });       
});
});
$("#footer").load("footer.html");
$("#header").load("header.html");

And one more important thing - every html file(execpt index.html) has an internal javascript code that gives a certain ID element a class which highlights the page's name(button) on which the user is on. It looks like this.:

      <script>  
  $("#header").load("../pages/header.html", function() {
        document.getElementById('A_57').className = 'about';
        document.getElementById('A_577').className = 'about';
    }); 
      $("#footer").load("../pages/footer.html", function() {    
    }); 

      </script>

In this case It targets two ID's because one ID is in a UL that only apears in mobile view and the other UL only apears in all the other media queries, but that's not important.

The important thing is to come up with a solution where all 3 javascript codes work together in harmony on a server. Also would be nice to hear while locally everything works fine while on a server it appears that Javascript code lunching numeration differs ...

UPDATE : I can confirm that when i reload a page that i was on it 100% of the time results of a dropdown menu stopping to work. Also from browser inspect>network>html i can see that 1xheader.html and 1xfooter.html turns from 200(when dropdown menu works) to 304(dropdown menu stops working).

Any errors in the browser's console? Can you see requests for the HTML files in your browser's network tab? — jedifans, Aug 20 '16 at 21:10
No errors, but the HTML requests in my browser gave me a clue on what's going on. The first time i go to a page a get 2 requests for header.html and 2 requests for footer.html (everything is working) - all with 200 code(OK). But when i reload the page i get the same amount of request 2x header and 2x footer, BUT 1x header and 1xfooter has 304 code now(Not Modified) and this time The dropdown menu doesn't work. Jedifans thanks to you we are on to something! — Dr. House, Aug 20 '16 at 21:58
I'm not sure if this is a thing, but is JavaScript enabled in your server? Is `.js` in your mime types? — Drew Kennedy, Aug 20 '16 at 22:11
When you reload, try using Ctrl-F5 (Windows) or Cmd-Shift-R (Mac) to force a full no-cache reload. — Christian Ternus, Aug 21 '16 at 02:59

score 0 · Answer 1 · edited May 23 '17 at 12:19

0

Per this question, I bet you're seeing weird caching behavior in jQuery's .load() function. Try adding

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

to your script before you make any load calls.

edited May 23 '17 at 12:19

Community

1
1

answered Aug 21 '16 at 03:06

Christian Ternus

8,406
24
39

score 0 · Accepted Answer · answered Sep 18 '16 at 20:50

0

The problem was with .htaccess file it was redirecting to my another test webpage that had identical appearance.

answered Sep 18 '16 at 20:50

Dr. House

483
7
23

Javascript acts different locally and on a server

2 Answers2