aspx site behaves different on the webserver...but why?

Question

I designed a simple site with some css and jquery. All the css is in the header using and the javascript files are in a folder called Scripts and referenced in my site like below. Everything is beautiful locally, but on the server some objects such as a couple of my divs are out of their original positions, and my dropdown menus that use jquery don't work properly but they do work somewhat (like they slide down or fade).

I have made identical folder structure in root on the web server. I am using .NET 3.5 and the server does support it.

Do you guys think it can be a path issue for my scripts? What could cause the css to move divs out of position? Does css or jquery behave differently on different servers?

  <script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.min-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="Scripts/jquery.easing.1.2.js" type="text/javascript"></script>

    <script src="Scripts/jquery.color.js" type="text/javascript"></script>

    <script src="Scripts/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>

Thanks a bunch

Answer 1

Hi,

Please try adding up ~ sign before paths, example:

<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>

Hope that helps,

Answer 2

ScriptManager is your friend

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/jquery-1.4.2.min.js" />
        <asp:ScriptReference Path="~/Scripts/jquery.easing.1.2.js" />
        <asp:ScriptReference Path="~/Scripts/jquery.color.js" />
        <asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.4.custom.min.js" />
    </Scripts>
</asp:ScriptManager>

Answer 3

From the sound of it, it may not be a script issue at all it may be a css issue. It would cause things to appear differently on your page, yet have some of your JavaScript code work. Have you checked to make sure your including your style sheets correctly??

Answer 4

First thing I'd do is fire up a HTTP debugger and see what scripts or stylesheets are missing.

Second thing I'd do is fire up firebug and see what script and stylesheet errors I'm getting.

Answer 5

@Wyatt Barnett's suggestion is where I would start. Clear your cache, look in Firebug's Net console and watch for any pages coming in 404.

If that fails, concentrate on finding the differences between the source code / support files on your production and development servers. Get a diff tool (I'm on a Mac and I use FileMerge, but there are heaps of very good, free diff tools available for every platform). Save the page source of your production and development pages (ignore what the server is supposed to be building, look at what the browser is actually getting instead). Pay close attention to any CSS differences there might be, or any extraneous elements that may be getting injected into the document in your production environment.

Lastly, change your development pages so that they point directly at your JS files on your production environment. If you accidentally changed one of these files, or if they got saved at different versions, it would account for the problems you're seeing.

If the page source code is identical and the JS files are identical and there are no issues with loading the files, my next guess is gremlins. They get into everything.