I have moved this to a new section so that all future updates can be tracked together. The new section is here. You will need to visit the new section to download the files. This post will remain, but if you link to this page, please update your link to the new seciton. Thanks.
I have been using jQuery a lot more now with my new job and the lack of a good syntax mode with autocomplete for Coda was getting on my nerves. I Googled around for one and came up short. The closest I found was a document that you placed inside the standard Javascript syntax mode. I wasn’t crazy about this as I didn’t know what would happen when Coda updated. And the instructions provided didn’t seem to work anymore.
So I decided to scratch my own itch and create one. I tried to create a custom syntax mode for jQuery only (and just pull in the existing Javascript stuff), but due to the way that syntax modes work in Coda I had to include everything from the Javascript mode. This allows us to still have access to the regular Javascript functions along with all of our jQuery goodness. I have also included some clips to compliment the syntax mode. I want to stress that this is only a first pass at this and I am already working on an updated version that will handle more functions and keywords.
Here’s the file: Coda jQuery Syntax Mode
So here’s what you have to do. Download the .zip file above and place the jQuery.mode folder in your ~/Library/Application Support/Coda/Modes folder. Open up Coda and bring up the Clips palette (⌃⌘C). Right-click the palette and select ‘Import Group…’ Find the jQuery.clips file and import it. Now go to your Preferences in Coda and open up the Editor tab. In the Custom Syntax Modes, click the + and type js for File Extension and select jQuery for the Syntax Mode.
Now open up a .js file in Coda and start typing, marvel as jQuery functions appear as suggestions for what you are typing.
If you want to use the jQuery mode for inline Javascripting (and who wouldn’t) there is — sadly — a small hack that you have to perform. Find Coda in your Applications folder and right-click it. Select Show Package Contents and navigate to Contents > Resources > Modes. Find the mode that you use when you are doing inline Javascripting (likely PHP-HTML.mode or HTML.mode) and open the Contents > Resources > SyntaxDefinition.xml file. Make a back up of this file before you open it. Do a search ‘Javascript’ and replace it with ‘jQuery’. I wouldn’t recommend a blind find/replace. Instead do the search and replace every instance of Javascript that is associated with a ‘usesymbolsfrom’, ‘useautocompletefrom’, or an import command. Most likely that will be all of them, but better safe than sorry. Save your changes and open Coda (or relaunch it if you had it open during this edit). Now your inline Javascripting will have the same autocomplete goodness as a .js file.
If you are using a custom SEEStyle for Javascript you will notice that your new jQuery mode is not looking so hot. This is easily remedied with a few steps. In Coda, open your Preferences and go to the Colors tab. Export the Javascript theme, open that file in Coda, and replace Javascript with jQuery (blind find/replace is okay on this one). If you did the inline customization, export that file as well, but replace only those instances where it looks something like /Javascript/Keywords (e.g. in the PHP-HTML mode there is one reference that says ‘Inline Javascript’ that is okay to leave as is). Save your new SEEStyles and then import them back into Coda. Things should be looking a lot better now.
I had hoped to make the mode behave like the PHP syntax mode. In that mode, when you select the function from the suggestion list, Coda places some suggestions as to what you need to include inside the parentheses. This is all pre-selected for you, so it clears out when you hit delete or start typing your own values, but these are very handy when you don’t remember if you need to pass in a string or an integer. Sadly, after working with Will Cosgrove from Panic (thanks again Will) I learned that PHP is a special case and you can’t do that in other modes. He did say that Coda 2.0 will have enhanced abilities for syntax modes, so there’s something to look forward to. I am thinking of just adding these hints into the autocomplete anyway, even if they aren’t preselected. If you have an opinion on the matter I would love to hear it.
As I said before, this is not a comprehensive list of every jQuery function known to man. I plan to add more functions and options in future versions, but I would love your feedback. If there is a particular function you don’t see let me know and I’ll get it into the next release. Any other suggestions as to how to improve this are welcome as well.
All the clips that I included in the bundle have tab-triggers. Below is a list of what they are and what they do.
ready+tab:
$(function() {
/*place jQuery actions here*/
});
$+tab:
$(’‘)
this+tab:
$(this)
func+tab:
function() {
}
Posted by Randy on 05/27 at 12:57 PM
Awesome work! I’m already making use of this. Very slick.
With regard to the hints, I think adding these hints into the autocomplete anyway is the way to go for now. I’d rather have them and delete them than not have them at all personally.
Later when Panic allows JS to work like PHP in the autocomplete hints we’ll really be in business.
Thanks for sharing this.
Posted by Shrop on 05/28 at 04:00 AM
Fantastic work! Been wanting this for so long. Works great. Thanks for putting the time into this and then sharing it.
Shrop
Posted by Barbelith on 05/29 at 08:31 AM
Thank you very much, I use jQuery a lot and it is very useful to have autocomplete.
Posted by Oleg on 06/01 at 03:34 AM
Thanks a lot. Really useful. For some reason it did not work for me in HTML mode, though I did the same changes as to HTML-PHP mode, which worked fine. Not sure if you can help me with that. Great work anyway!
Posted by Nils Ellingsen on 06/04 at 06:18 AM
Thanks a bunch! jQuery syntax can be hard to remember 
Posted by John on 07/11 at 03:58 AM
I dont seem to have a coda folder in my Application Support…do I add it?
Thanks!
Posted by K. Garner on 07/13 at 07:45 AM
John, make sure that you are in the right Library folder first. OS X has at least 3 Library folders (more if you have more than 1 user account). You need to be in your user’s Library folder. To get there click on your home folder in the Finder sidebar and then click on that Library folder. If there isn’t a Coda folder in that Library/Application Support then you can add one, but make sure you’re in the right place first.
Posted by John on 07/13 at 08:09 AM
The issue was I never actually placed Coda in the Applications folder and had been running it and kept in the Dock from the Downloads folder - once I added it to applications and restarded Coda voila.
Thanks for the plugin works like a champ!
Posted by Jason Kuhrt on 07/22 at 02:25 PM
Hey Kory, thanks a lot for this contribution. Function argument hinting would be necessary in the long-term but this is better than nothing. Kudo’s to sharing it.
Thanks mate,
Jason
Posted by gregory on 08/31 at 09:19 AM
this is SWEET! thank you so much for writing / building this. i use this every day.
Posted by Andrew on 10/02 at 08:43 AM
Hi Kory, great work, well done! I avidly installed the plugin, and chuckled with glee when it worked, but was dismayed when i tried to use animate, or slideUp, or hide functions : it didnt autocomplete? It seems like you catered for these functions, but mine doesnt autocomplete. Bug, or massive faupah on my part?
Posted by K. Garner on 10/06 at 07:55 AM
Andrew - I’m not sure what’s going on there. I checked it on my system and those functions do come up in the autocomplete for me. I’ll look into it some more, but it’ll be hard to track down without being able to reproduce it. I’m working on an update as well, more functions and other things added to the autocomplete that I hope to get out soon. Maybe that will fix the problem for you.
Posted by Chris Wright on 10/07 at 09:43 AM
Thanks for this - and thanks for fixing the link!
Posted by Brandon on 11/13 at 01:39 PM
This is really awesome… Its the missing link! Coda & Jquery can be friends now! Woo hoo no more frustration.
Posted by Injerto on 12/02 at 06:57 AM
Dear Kory: thank you very much for this plugin, its great. I’d like to ask you, though: have you ever tried textmate jquery bundle? it works in a little more convenient way: when you type $ + tab, write the selector, and then press tab again, it gets you right after the “)”, without having to move your cursor to the end of the line; then you can set an event, such as “click”, and press tab again, and it writes all the “function” thig, similar to writing “func + tab” in your plugin.
Is there a chance for you to implement this kind of behavior in your plugin? or isn’t Coda that customizable at all?
Congratulations and thank you once again!
Posted by K. Garner on 12/02 at 08:43 AM
Injerto, this is pretty much a fundamental difference between how Textmate and Coda work. The editor in Coda (SubEthaEdit) doesn’t support the “tab jumping” behavior of Textmate, so consequently, Coda can’t do it either. There is a lot of speculation that Coda 2.0 will be more flexible for these types of things, but we’ll have to wait and see. I’m really hoping that if they do a beta trial that I can get a copy to test and make the necessary adaptations.
Posted by Injerto on 12/02 at 08:51 AM
That would be great. The world is still waiting for Textmate 2.0, which seems that will never happen. Let´s just hope it won’t be the same with Coda.
Btw, do you know about a fix for the drag-n-drop feature in coda? When you drop a css or js file in Textmate, it writes the right html code to include it, but coda just opens it in a new tab…
Regards
Posted by Ian Atkins on 02/01 at 02:35 PM
Thanks for this, most kind!
Posted by local search marketing news on 03/09 at 02:53 AM
Its very good information. jQuery is very helpful for maintaining coding. Thanks for this useful information.
Posted by local search marketing on 03/09 at 03:01 AM
Yeah it’s very useful. For some explanation it did not work for me in HTML style, while I did the same changes as to HTML-PHP style, which worked well. Not certain if you can help me with that. Any way its very good work. I like it.
Posted by local search engine marketing on 03/09 at 06:02 AM
The matter was I not at all in fact located Cods in the Applications folder and had been running it and reserved in the docks from the Downloads file - once I added it to applications and retard Cods voila.
Posted by android code on 03/15 at 12:33 AM
I’m not abiding what’s traveling on there. I arrested it on my arrangement and those functions do appear up in the auto complete for me. I’ll attending into it some more, but it’ll be harder to clue down after getting able to carbon it. I’m alive on an amend as well, added functions and added things added to the auto complete that I achievement to get out soon. Maybe that will fix the botheration for you.
Posted by Scott Rouse on 04/02 at 10:55 AM
Rock on! Thanks for this…it is very helpful.
Posted by Hayden Chambers on 04/12 at 03:34 AM
Hey Kory, looking forward to the upcoming features. Was an absolute must-have from a dev POV!