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.

Posted on

Insert alphabetically with jQuery

I was working on a single page for a work job that involved saving and loading data without reloading the page. To do this I had to insert values into drop down lists (two fo them, one for loading and one for deleting). Initially I was just going to add a group at the bottom, but it seemed like a cheap way to go, so I created a script to add the items in the existing lists where they belong. All these list were alphabetical, so it was really simple. The code below is a derivative of my original drop down menu modification code that places items in an ordered list, except it:

  • ‘+name+’

  • ‘+name+’

Snipplr: http://snipplr.com/view/49762/insert-alphabetically-with-jquery/

The code works in four parts, first we get the new item, in this case it’s the contents of a text field, and we make sure it’s not blank. Then we go through the list in question, in this case it’s at il.thelist and go through each item one my one. Then we get the value of the list item and compare it to the value of the item were adding. It’s no problem to compare string, it works the same was as comparing numbers, the only think to note is that capitals and lower case letter have different “values” so to speak so to get try alphabetization you must capitalize (or lowercase, it shouldn’t matter) both the string when comparing. Finally you insert the item before the first hit, and set variable so that it won’t continue to add it after every item from that point on. You also need to have one final check against that variable, so if it was never added to the list (as it in there is nothing that would come after it, given how it’s being checked) then it can go to the end of the list (because at this point it’s the only place left that it could possibly belong in).

I’ve set up a jQuery insert alphabetically example if your interested, I can also answer any questions you have, just leave a comment.

Posted on

Super Simple Content filtering with jQuery

Earlier today or yesterday (it kinda all meshes together) I was tasked with creating a filter for a rather large table output. I considered using ajax but since all the records were being loaded by default re-loading partial results seemed like a waste so I went with a jQuery solution, after some refining I got this.

Snipplr: http://snipplr.com/view/49255/simple-jquery-content-filter-with-bonus-alternating-row-reset/

Simple and concise, it creates a new jQuery function “Contains” (not the capitalization) that searches inside an element without cases sensitivity. then it hides or shows the element accordingly. The resign for the show is so that when deleting characters from your search, bordaning it, results that were filtered appear again. This works great for lists like the one in the easy jquery filter example here.

If you want to use it with a table all you have to do it change the selector a bit, select all td elements instead and then select the parent of $(this) to remove or show the entire row, it’ll end of looking something like this.

Snipplr: http://snipplr.com/view/49255/simple-jquery-content-filter-with-bonus-alternating-row-reset/

Got that tabe set up with alternating row colors? Just one more simple modification, use some if statements to toggle what you want the class to be back and fourth and and apply the style accordingly. Looking something like this.

Snipplr: http://snipplr.com/view/49255/simple-jquery-content-filter-with-bonus-alternating-row-reset/

Each further iteration of the script is slower, and I noticed some lagg with the last one on my old laptop (not in any way enough to be a problem), mind you it was running all development apps and browser when I was working on it, so it was under abnormally heavy load (and, you know, a 3+ year old baseline machine). Any moder machine under normal conditions can breeze through this in a 2500+ entry table with alternating rows without a notice. It can always be expanded to include fancy animations (jQuery “blind” would work well here) and anything else you may want, but this makes a good working system if your not interested in the fancy stuff.