HTML website stops working as expected after migrating servers

Question

I'm a web developer for years and I understand a lot about websites and development. But this issue is far from my understanding, I had never encountered it before as it looks mystical for me.

I have HTML website on main server and domain, it's working fine there, all files are loaded and design looks as it should. Now, I have moved the same website, all the same files to a new server and domain, and the website just broke without touching anything. It's working, but design doesn't look like it should, Javascript is throwing errors in console, design structure is lost. All files needed are loaded, I can see in the Network tab of Chrome Developer Tools but website design structure is lost and JS scripts are not working. Now this is the fun part. If I transfer the same website from new server to the main server, the website looks good once again. I'm stretching my head all day and can't find any issue. I've also tried to run the same website locally on WAMP or even just from desktop as it's only HTML, and the website is broke as it's in the new server.

Main website URL: [removed as issue is fixed] New server's website URL: [removed as issue is fixed]

Any ideas? Anyone had encountered this before?

EDIT:

Issue is found and fixed. It was encoding issue. Encoding of the files were changed while transferring files from one server to another.

Answer 1

There are three errors on the "new" site. Two are parse errors from bootstrap.min.js and prettyphoto.js. These files are different between the old and the new site. It looks like it might just be an issue with newline characters, possibly an encoding problem while transferring the files.

The third error is from main.js because $.affix is not a function. The affix plugin is added by bootstrap, which probably isn't working because of the parse error.

I'm guessing if you re-copy bootstrap.min.js and prettyphoto.js from the old to the new site, it will resolve the issue.

Looking a bit further at bootstrap.min.js and prettyphoto.js, there are some nonsense characters in both files. That lends evidence to the idea that it's an encoding issue, probably introduced while copying the files from one place to another.

prettyphoto.js

be/"),movie_id=mov��\��\��Z��Y��\��\��\&")>0&&(movie_id=

bootstrap.min.js

).each(function(){YaYaКV�bhYa Ya� Yaunction(){var d=a

@Herohtar pointed out that the encoding on the two versions of the files is different: windows-1257 on the old site and GBK on the new site. It's possible that the files were edited (e.g. in an IDE or text editor) and saved, and the default encoding in the editor was different than the original, and didn't re-encode (or parse the original encoding) correctly.