Posted on

Couple of jQuery selectors

Haven’t had much interesting stuff to do this week so I figured I’d post some jquery selectors I’ve been using for other projects. The first one I found online some time ago and don’t remember who originally made it, the second is one of my own creation.

Case Insensitive Contains

Snipplr: http://snipplr.com/view/54884/case-insensitive-contains-jquery-selector/

This one was not created by me, but I can’t remember who originally created it. It does the same thing as the built in :contains() selector with one important difference, it’s case insensitive. Since I usually type in all lower case (bad habit I know) I like to use it for filters. It’s also a nice one to use on name filters, that way if the person using the filter doesn’t use the proper case it will still pull of the name, for example if they type in “Delsoto”, but the proper capitalization is “DelSoto” the default :contains() won’t find it, but this modified :Contains() will. Very convient.

Is

Snipplr: http://snipplr.com/view/54885/jquery-is-selector/

This is a simple one I created to be a more accurate varient of the :contains() selector. This will select everything where the contents is exactly what you tell it. It was originally created for a game platform drop-down selector where contains was pulling to many results, for example there are 4 sony system, all with very similar names; Playstation, Playstation 2, Playstation 3, and Playstation Portable. If you use :contains() for “Playstation” you’ll pull all four system. This new :is() selector fixes this and is much faster than looping through a list and comparing them one-by-one.

If you have any questions about these, or happen to know who made that nifty case insensitive one, post and let me know. Use it in a cool project, do the same.

Posted on

Saving multiple inline jQuery sortable lists

Using multiple inline nested sortable jquery lists is a great way to build drop down menu systems. Unfortunately the sortable function fails to handle inline lists well. To overcome this I generated a small function to get a string I can use later (after sending it via ajax) to get the new locations of the items. The list will come in the same order they are on the page, and will attached both the items ID and it’s parents ID (if it has one).

Some things to know about how the list system was set up, first, every item that was going to be saved has an ID tag attached to it that contained it’s ID in the database. The subitems were stored in the same table, but with a “parentid” field that, if on the top level says 0, otherwise it had the id of it’s direct parent. The output script in the end loops through based on id of item and id in parent id (it’s a simple system, any questions can be posted and I can go over it in more detail).

Snipplr: http://snipplr.com/view/50855/saving-nested-jquery-sortable-lists/

First, yes, those functions are nested inside each other (since nothing else is going to use the subitems function). Also, the output is just a long string, theres nothing saying it can’t be a array except I guess, but sending JSON to PHP to un JSON it to work on it is more steps then just sending the string and working on it. The string will start with a comma (unless you find a good use for it, the production code this was ripped fro, uses it for the entire menus ID) and it can easily be exploded on the comma to break down items, then on the / to get id/parentid (see what I did there). It all looks rather messy and disorganized but it works very well in the end.

The code snippet above has a bunch of implementation specific code in it (I just ripped it from the test production code) but since this sort of thing isn’t very beginner friendly I don’t see that as being a problem, if you do have question you can post them and I’ll try my best to help, it’s simpler than it may seem.

Posted on

valums AJAX file upload single item fix

Valums ajax upload script is a very nice, clean, and simple to integrate script for uploading files synchronously with ajax (and if it’s not supported in your browser iframes). It’s simply the best implementation I’ve seen, except for one minor glitch.

If you tell it to not allow multiple synchronous file uploads (instead allowing one at a time) it still allows you to drag and drop more than one file at a time, until now. Earlier today at work I programmed in a fix (along with some other modifications to the naming and saving and layout system) that will throw up a message when you try and drop more than 1 file at a time.

The solution is below, note that it starta at line 574

Snipplr: http://snipplr.com/view/50846/valums-ajax-file-upload-single-item-fix/

The key is to replace the line “self._uploadFileList(e.dataTransfer.files);” (originally at line 577) with that simple for and if statement that checks if they have multiple uploads disabled, and if they do and there trying to upload multi files, throws an error message. Pretty simple but I figured I’d post it so nobody else has to fig through the code to find it.