With new version of Chrome, our shopping cart application stopped working, and we suspect that there's problem with the old JQuery library we are using. However, we are depending on multiple JQuery files as follows:
jquery-ui.js
jquery-corner.js
jquery-corner.js
jquery.js
jquery-printElement.js
jquery-spin.js
jquery-tmpl.js
jquery-waypoint.js
And we are not able to locate the cause of bug. We are using yuicompressor to compress our javascript libraries and application logic into a single file. Is our only choice to search and update all those files independently and hope to avoid conflicts, or does can I find these components in one package somewhere?
When I make changes to CSS and JavaScript files, my users often have to reload a couple of times to get the changes (obviously to clear out the cache).
I was wondering if someone had a really good experience with a plugin to solve this issue.
I am currently using grails 1.3.7 and I use tomcat for my production environment.
Seems to me that this might be the best option for me.
As you say, the cached-resources plugin is a great option.
You need to install it alongside the resources plugin. Assuming the resources plugin is installed and configured correctly, you don't have to do anything with the cached-resources plugin in order to get it to work correctly. Hence the apparent lack of documentation for the cached-resources plugin. Everything you need to know is linked from the resources plugin.
This is not duplicate question because lots of things changed in Aptana Studio 3.1.1 and there is no question regardnig that version.
I would like to have code assist for jQuery in Aptana Studio.
I already installed jQuery bundle. But I still don't get any code assist for my code.
I type for example:
$("div#chat").
After typing dot I should see list of all jQuery functions. But I don't see anything.
What I have to do to fix it?
It works for me as expected using the directions here:
Commands > Install Bundle > jQuery
Right click on a project, select Properties > Project Build Path and select the checkbox for jQuery 1.6.2.
If you don't do the second part, you'll just get snippets. This prevents you from needing to copy it into every project.
Got it fixed.
If you want to have code hinting for jquery you need to download (uncompressed) jQuery library and place it in the same folder as your script.
This is working but it is not satisfying me. I have many folders and I don't want to duplicate jQuery file over all folders.
I have a website with very heavy (long javascript > 100KB + JQuery). So, for making the javascript re-useable, I want to separate the logic in different javascript files.
So, I want to make an aggregated javascript file
Please tell me how (I even want to use the VS2010 intellisense in my main JS file about the functions of the other JS files.)
Javascript Intellisense tends to be extremely unreliable as some updates broke it some updates fixed it, and there are a lot of extensions around it, breaking each other.
Still there is a /// <reference> element for cases like this.
See MSDN article and add line:
/// <reference path="otherscript.js" />
at the top of your script file.
Try to test it with the jQuery vsdoc and your other script files.
Also installing MVC4 installed some dependency or whatever that more-or-less fixed javascript intellisense for me.
I would recommend Resharper: http://www.jetbrains.com/resharper/whatsnew/
You can separate your Javascript files and use SquishIt to concatinate and compress/minify them all into one single file to reduce the file size and the number of requests.
I don´t know of any solution that allows you to work in both the concatinated file as well as each separated file ...and I don´t understand why anyone would want to.
IMO, Visual Studio has a quite poor intellisense for Javascript.
Often, when working with jQuery, the need arises to include multiple plugins. This can quickly become messy work, especially when some plugins require additional components (images and CSS files).
What are some of the "recommended" ways to:
a. Manage the required files/components (.js, .css and images) in a way that is easy to maintain, and;
b. Keep these plugin packages updated to the latest versions
I'm not necessarily looking for a tool to do this (although one that could perform this management would be useful, I suppose), but more of a way of thinking.
Update: These days there is Bower, Component and Browserify which take care of all of the following for us automatically.
I'm surprised no one has covered what I do yet. So here's how I manage scripts and resources.
I have each project I work on setup with SVN. Nearly all of the scripts I include have a SVN mirror (github has svn these days) this means that I can then use SVN externals and fetch whatever branch or version or whatever I want of that project directly into the projects scripts folder. As we are using SVN, it is easy to track, manage and update these scripts.
If a project is not on SVN, then I just add it to a common SVN project I have made, so for instance Project A and Project B, both use jquery-project-not-in-svn, so we stick jquery-project-not-in-svn into our common project's SVN repository, and then use SVN externals on Projects A and B to reference it - as explained before.
Now that covers managing, fetching and updating.
Here is how I cover script inclusions and requests.
As each project now has it's own scripts directory that contains all the scripts it needs (which is managed by SVN externals), we now have to worry about minifying them to reduce load on our server. Each project has a Makefile in it's root, which contains the command update. This command will perform the following:
Perform a SVN update (this will update all SVN externals appropriately)
Once that is done, it will pack and minify all the js files into scripts/all.js and scripts/all.min.js
I can't share the exact Makefile but I can share one which is public that handles packing/merging and minification of CSS and Javascript. Here is the link:
http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile
By doing these things, we have achieved:
Management of external script resources over multiple projects
Updating of appropriate script resources automatically
Packing all used script resources of the project into one file
Minifying that file, such that only one JS request and one CSS request are performed.
So good luckmate, feel free to post a comment if you would like to learn more.
I would recommend not updating them unless you are experiencing a problem with the version you have or you would like to use a new feature available in the updated plugin. As the saying goes, if it ain't broke, don't fix it.
My own personal "recommended" way is to keep all my JavaScript files in one include folder, all CSS files in another, and all images in a third directory. I write shortcut functions for my projects that I can then use like <?php scriptlink( 'jquery.tooltip' ); ?> or <?php stylelink( 'jquery.thickbox' ); ?>. Each shortcut function takes a filename (only) as an argument and outputs the full HTML tag for that resource type, i.e. (in order) <script type="text/javascript" src="/includes/js/jquery.tooltip.js"></script> or <link rel="stylesheet" href="/includes/css/jquery.thickbox.css" />
Most jQuery plugins I've run across that require images allow either specifying a configuration variable in the script itself or in the code used to invoke the plugin. Stylesheets are quite easily included without mucking about with the script.
So far this method has kept me pretty sane, so I think it works rather well. I don't tear my hair out over where I stuck a particular plugin; I just include it with a function. (The system also supports subdirectories of the include directory, so e.g. <?php scriptlink( 'ui/accordion' ); ?> equals <script type="text/javascript" src="/includes/js/ui/accordion.js"></script>.)
YMMV of course, but the only issue I've had at all is with upgrades when plugin authors start distributing a jquery.plugin.pack.js version instead of jquery.plugin.min.js or vice versa, because I actually have to remember to change the filenames I look for.
(Since I've omitted the implementation of those simple functions, perhaps your version will check for different variants of the file name given. If the argument to scriptlink() is jquery.plugin, the function might check the file system to see if jquery.plugin.pack.js exists, and if not look for jquery.plugin.min.js, and if not look for jquery.plugin.js, etc.)
CDNs are great but not for debugging. Sometimes debugging really requires local access
to the scripts and CDNs are useless until in production mode. For this reason I still like
to keep both debug and minified versions around then compare results and benchmark response time until we shift to production.
All of my jQuery plugins are organised into subfolders which include the version number e.g.
/assets/js/plugin.1.4.1/plugin.1.4.1.min.js
/assets/js/plugin.1.4.1/images/image.gif
If I need to update to 1.4.2 I can drop it in a new folder without too many problem, I can even use a specific version of the plugin in different parts of the site if needed. When I site is large and your using a few different plugins it's helpful to quickly see version numbers without digging around source comments in a plugin.js file.
If a plugin requires CSS I will take the base styles out of the plugin CSS and bundle these in with my main stylesheet, requesting additional CSS files is expensive and 9 times out of 10 it will be customised anyway. Likewise with images, if I'm doing any image customisation I will bundle these into my main image sprite, otherwise I'll just link to the images into that plugin.1.4.1 directory.
Yes, you end up with a few more files in your repo but it means:
you can easily upgrade plugins just by updating your paths
you can debug plugin issues easier because you can see how out of date you are
you can roll back to an earlier version if everything breaks
You could utilize the Google CDN (Content Delivery Network) for more popular plug-ins. Google keeps it up-to-date, you can quickly choose/switch between versions, and you also get the benefits of caching from other websites that use CDN.
Example for jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
And, if you want to use a higher version automatically, change the version to 1.4 (automatic 1.4.x updates) or even 1 (automatic 1.x.x updates). Unfortunately not all plug-ins are available, but many of the major ones are.