Javascript not working in Production - javascript

I've deployed my app in production and precompiled the assets pipeline, so my application.js contains everything.
while it was all working fine in development (where files were split) it's not working any more in production, and tooltips and everything don't work any more.
the only problem I'm seeing in chrome console is:
Uncaught TypeError: Cannot read property 'msie' of undefined
it mentions the line containing the error:
jquery.js:9789
although the application.js (precompiled) at line 9789 is blank, and in my source I don't include explicitly any source file called jquery.js, as the jquery is included inside the application.js.
I found that jquery_bbq may be the problem, in I run: grep -r msie * I have only two occurrences:
config/recipes/templates/nginx_configuration.erb
vendor/assets/javascripts/jquery_ba-bbq.min.js
I'm not sure how to troubleshoot this, any ideas ?
thanks in advance

Something you're including is trying to read the msie property of jQuery.browser. But jQuery doesn't have the jQuery.browser symbol any more (it was deprecated in v1.3 and removed in v1.9).
I can't account for the line number other than to mention that jQuery 1.10.2, un-minified, has exactly that many lines. As for the filename, I assume your HTML or something in your application.js or another script you're loading is loading jquery.js. Chrome's Network tab in the dev tools should tell you what's loading jquery.js.
So the solution is to find out what plug-in or similar you're using that's trying to use jQuery.browser.msie (or $.browser.msie) and deal with the fact it's no longer compatible with jQuery. You've already basically done that and found jquery_ba-bbq.min.js
The other thing is to find and deal with whatever's including jquery.js, if you have jQuery baked into your application.js (presumably an older version, if this was working before you combined things).

Related

Double slash in assets URLs - 404 error in WordPress

site: https://opalschool.org/
I'm seeing a lot of 403 errors on a site of mine, and I see JavaScript errors in Google Developer Tools console that always show a double forward slash in different plugin URLs:
Failed to load resource: the server responded with a status of 403 ()
https://opalschool.org/wp-content/plugins/wp-smush-pro//assets/shared-ui/wdev-ui.css?ver=1.0 Failed to load resource: the server responded with a status of 403 ()
load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=6c00de4……:9 JQMIGRATE: Migrate is installed, version 1.4.1
When I am viewing the admin page for Smush Pro I get the above errors, and the editing buttons are not available... this makes sense since the double slash is keeping some assets from loading. I've tested and removing the double slash before the assets/ folder reveals the files are there.
I see the same thing happen for some other plugins too (learndash), and I just installed WP Smush Pro on this site today. So I know the issue has been happening for a bit.
I have tried the following with no success:
changing the .htaccess file
re-saving permalinks
turning off redirect related plugins
searching the database for " //assets/" in links to try to change any that may have been written incorrectly but were lingering
I have a staging site copy of the live site that is a recent copy in the last few days, and it does not show the errors. I have tried comparing plugins on both sites and not found any causes. I may get further with this comparison, but haven't had that much time on it yet.
JQMIGRATE: Migrate is installed, version 1.4.1 -
WordPress uses the jQuery migrate script to ensure backwards compatibility for any plugins or themes you might be using which use functionality removed from newer versions of jQuery.
First try to deactivate all you plugins
Then activate one plugin and check it whether it is showing error or not
Repeat this for all you plugins then you will able to find which plugin is creating this problem.
The removing plugins troubleshooting method didn't provide results.
I believe now it may have been due to running the Hummingbird plugin from WPMUDEV. WPMUDEV has indicated it could be due to their plugin, and they said they'd roll out a fix with the next version if it is.
WPMUDEV pointed to a spot in the code to remove the "/" that seemed to be causing the issue in the Smush Pro plugin's path to the assets folder. That fixed the issues with the Smush admin area not showing it's settings toggles. The only other plugin affected seems to be LearnDash, but so far I haven't figured out where to edit out a slash to fix the assets path and remove the error from the console.

Script error with loading jQuery in IWebBrowser2

The following error shows up when I load a page that uses jQuery in my iWebView.
I checked if the JS files have any errors, but they all seem fine.
Any clues anyone?
Vasa, the latest 1.x version is 1.11.1:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
You may want to try pointing to that to see if the upgrade has fixed your script error. Also, using the non-minified version for development may give you more detail to line and character.

jQuery UI accordion working in MVC 4 debug mode but not in the release

I work on an ASP.NET MVC 4 application.
I updated jQuery, jQuery UI and all other nuget packages in my project. Built it and ran it to see that no problems occured. Everything worked so I continiued development for several days.
After a while I published the project to a test-server I have to see how it looked on Ipad, Iphone etc. And then I realized that the jQuery-UI accordion stopped working.
It renders, but does not respond on click. This goes for all browsers. I found this strange since the only difference is that the MVC bundeling i applied in release mode and as far as I understand it either minifies the jQuery file or chooses the minified version (the latter probably beeing what is does here since it is added when updating using nuget).
The jQuery version is: 2.0.3
The jQuery-ui version is: 1.10.3
In Chrome console the error reads:
Uncaught TypeError: Cannot read property 'safari' of undefined
OK, so i realize this might be the result of one of my jQuery assemblies references $.browser that apparently was removed in jQuery 1.9.
However the fact that it works in debug mode (using the non-minified versions) leads me to think that it might not be that. I could almost think that it is a problem with the minified versions, but that should not be possible either.
Anyone knows why this happens and know how to fix it?
Update
As requested I attach most of the code. The strange thing is that this works in debug mode, but not in release. I cannot see why there would be any significant changes that should cause this problem:
_Layout.cshtml
Bundleconfig.cs
The view (which calls a partial view)
The partial view
The jquery code
The javascript error in Chrome
Bigger view of the error in chrome
Just to add. After posting this I removed the duplicate loading of modernizr (the telerik custom one was added without me noticing). The problem still persists.
Update 2
I turned off the optimizations in bundleconfig.
BundleTable.EnableOptimizations = false;
This allowed me to see what was throwing an error in jquery-ui, and it seems indeed to be the $.browser that was removed. It seems that it actually loads two old versions of jquery (current + 1.6.4 and 1.7.1) together with the new one and two versions of jquery-ui (current + 1.8.16) the last one throwing an error. None of these files are loaded in my solution or in the file folder.
This seems to be a publish problem, but disguised by the bundling and minification... I'll try to fix this and see if it works.
OK, so this was not at all a problem with the code itself, and I learned something new that might be of help to others.
Setting
BundleTable.EnableOptimizations = false;
Was what helped me solve this.
Obviously the Asp.Net MVC 4 bundling bundles every script that is found in the folder where it is released, not what is in the solution folder in Visual Studio. I did not think of this at all... But in retrospect it kind of makes sense.
Combined with the fact that VS default publishing settings does not remove files that does not equal the files that you publish means that when removing i.e. an old version of Jquery and adding a new one, the old one still remains on the server.
Add the default bundling using {version} for jquery selection and you have one unreadable jquery file throwing error. Not until you disable bundling and minification it becomes obvious that I in this circumstance loaded 3 versions of Jquery:
Before
After
The solution? Easy, just have to expand a setting called "File publish options" in the publish wizard and check "Remove additional files...":
Thanks for the suggestions. It helped me look the right places, but I was not able to imagine this beeing the problem.
I think you have forgot to add '"~/Content/themes/base/jquery-ui.all.css"'
Note: although you have called all modules separately sometimes calling single file makes difference. As we might miss some dependent file in choosing separate modules.
In BundleConfig.cs you need to add/modify like..
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery-ui.all.css"
));
if in your locals the file of jQueryUI exist that will do the trick for the same(that might be possible problem that makes it working on Local Testing).
Your _layout.cs will be like..
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css")
#RenderSection("scripts", required: false)
as you are not rendering jqueryUI that we need to call and render saperately after jQuery.
And your Section script should be called like this,
#section Scripts{
#*#Scripts.Render("~/bundles/jqueryUI")*#
<script type="text/javascript">
$(document).ready(function () {
$("#accordian").accordian();
});
}
This is what I will suggest and should work, with MVC things are really small to identify exact problem, So I have provided all these lines, thank you,
Do post back if problem persist.

Where does load-scripts.php load jquery.js file from?

I try to debug a javascript function called from Generate Thumbnails plugin in Wordpress. The function uses jquery. So the actual call that I want to debug occurs in jquery.
The problem is that default jquery.js inside Wordpress is minimized and therefore obscure. I changed that file with the uncompressed version of jquery.js file in wp-includes\js\jquery.
But when I debug that function with Firebug's debugger, Firebug still shows me the old, minimized version of jquery:
I copied the location of the script file shown in Firebug and opened it in browser: http://localhost/wordpress/wp-admin/load-scripts.php?c=1&load=jquery,utils,jquery-ui-core,jquery-ui-widget&ver=368b0ffbc13bc55b5ae45ad40a5368d9
This time, the true, uncompressed version of jquery.js was opened.
It seems like Firebug opens the old version of jquery. I restarted the Firefox but it wasn't resolved.
What might be the reason of this problem? Is this Firebug related or Wordpress related?
I'd agree with the people who commented on your question - it seems like a browser cache problem.
If it's a test system, one thing I'd suggest is setting the WP_DEBUG constant to true in your wp-config. That'll download the uncompressed versions of the javascript libraries. That has two advantages:
You don't have to copy different javascript files around, and
The file names differ from the standard ones (they have .dev in them, from memory), so you shouldn't hit any caching issues.
I'm assuming there's an uncompressed version of jquery in WordPress. Apologies if there isn't; I haven't checked. But in general I'd recommend this approach.
See Debugging in WordPress in the codex for more information.

Adding additional js files breaks jQuery IntelliSense

I have been using jQuery IntelliSense in VS2008 and it has been great. Recently I added a reference to jQuery UI and since then, the jQuery IntelliSense has went away. I found that once you reference another .js file in your document, the IntelliSense goes away. Any way to avoid this?
If there are errors in any refernced files it will break intellisense for all files references from the same document. The next version of Visual Studio is going to be much more robust in this respect. I apologize directly for this fragility. We made some design decisions early on that we prevented us from making VS9 external references more robust.
In the meantime, use the following workaround. Install SP1 from the link Slace gave you. If you have a reference a file named .js and there is a file named -vsdoc.js in the same location, then JS intellisense will pick up the -vsdoc version. If that script is empty then it won't generate an error. Identify the jquery plugin that is causing intellisense generation to fail and place a -vsdoc version next to it. You won't get intellisense for UI, but you will still get jquery and other plugins that do work.
Anything you put in the vsdoc version will show up in intellisense. You could put spoofed versions of the data structures that you want to display in intellisense if you want to.
It's likely that there's a bug in one of the subsiquiently referenced JavaScript files. Open your JS file and once the "Updaing JavaScript Intellisense" has gone from the status bar of Visual Studio (there is a menu option which will force the JS intellisense to refresh, don't remember where it is, I just created a keyboard shortcut via the Tools -> Options -> Keyboard area) open up your Errors window and under the Warnings you should find the reason why the intellisense has failed to load.
It's generally a bug found when parsing one of the files but I have had stack overflows when I had a lot of files referenced.
Edit: You also should make sure you have this VS patch installed: http://code.msdn.microsoft.com/KB958502 and VS 2008 SP1 (install SP1 first!). Then you just need to have:
/// <reference path="/path/to/jquery-1.3.1.js" />
Ensure that you maintain the -vsdocs on the intellisense file and it will be automatically picked up (as long as it's in the same folder as the file you reference)
The accepted answer helped me fix this issue but didn't resolve the problem. I installed the hotfix: http://code.msdn.microsoft.com/KB958502 but was still receiving an error.
Error:
Error updating JScript IntelliSense: D:\Dev\Test\Scripts\jQuery-1.3.2-vsdoc.js: 'jQuery.support.htmlSerialize' is null or not an object # 1430:4
It appears the addition of the follwing file without the appropriate -vsdoc.js file causes the above issue.
<script src="../../Scripts/jquery-ui-1.7.custom.min.js" type="text/javascript"></script>
I added an empty file "jquery-ui-1.7.custom.min-vsdoc.js" to my scripts folder and the Jscript Intellisense issue went away.
I'd like to present a slightly better solution. A few months ago I tackled this problem and created a very basic vsdoc file for jQuery UI. Here's the link to the blog post (which has the file for download).
I solved this per the advice above with a minor extension: the trick for me was to add a reference on my page to both my jqueryui.com library AND to the blank -vsdoc.js version of the file I created:
<script type="text/javascript" src="../../Scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.7.2.custom.min-vsdoc.js"></script>
Hope this helps!
Great, the tweak is by creating an empty *-vsdoc.js file for each troublesome *.js files.
I found this error caused by anonymous function e.g. like this:
(function($) {
$.anything...;
})(jQuery);
Hope this caused will help somebody creating the http://code.msdn.microsoft.com/KB958502 and JScript IntelliSense Team.

Categories