Fat Folder Design | JavaScript

March 19, 2011July 31, 2014

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).

function update_menu_positions(btnpress){
	$("ul.menubuilder:first > li").each(function(){
		arr += ','+$(this).attr('id')
		if($(this).has('ul')){
			subitems($(this).attr('id'));
		}
	});
	function subitems(pid){
		$("#"+pid+" > ul.menubuilder:first > li").each(function(){
			if($(this).attr('id')!='null'){
				arr += ','+$(this).attr('id')+'/'+pid;
			}
			if($(this).has('ul')){
				subitems($(this).attr('id'));
			}
		});
	}
}

function update_menu_positions(btnpress){

$("ul.menubuilder:first > li").each(function(){

arr += ','+$(this).attr('id')

if($(this).has('ul')){

subitems($(this).attr('id'));

}

});

function subitems(pid){

$("#"+pid+" > ul.menubuilder:first > li").each(function(){

if($(this).attr('id')!='null'){

arr += ','+$(this).attr('id')+'/'+pid;

}

if($(this).has('ul')){

subitems($(this).attr('id'));

}

});

}

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.

March 18, 2011July 31, 2014

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

var key; var cnt=-2; // Not sure why it's always adding 2 but it _always_ is.
for (key in e.dataTransfer.files) {
	cnt++;
}
if(self._options.multiple==false && cnt>1){
	self._options.showMessage('You may only upload 1 file at the site, please deselect '+(cnt-1)+' images and try again.');
}else{
	self._uploadFileList(e.dataTransfer.files);
}

var key; var cnt=-2; // Not sure why it's always adding 2 but it _always_ is.

for (key in e.dataTransfer.files) {

cnt++;

}

if(self._options.multiple==false && cnt>1){

self._options.showMessage('You may only upload 1 file at the site, please deselect '+(cnt-1)+' images and try again.');

}else{

self._uploadFileList(e.dataTransfer.files);

}

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.

February 26, 2011July 31, 2014

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:

function insert(){
		var name = $("input[name='insertvalue']").val();
		if(name!=''){
			var toinsert = true;
			$("ol.thelist > li").each(function(){
				var item = $(this).html();
				if(name.toUpperCase() < item.toUpperCase()){
					if(toinsert){
						$(this).before('

function insert(){

var name = $("input[name='insertvalue']").val();

if(name!=''){

var toinsert = true;

$("ol.thelist > li").each(function(){

var item = $(this).html();

if(name.toUpperCase() < item.toUpperCase()){

if(toinsert){

$(this).before('

‘+name+’

');
						toinsert = false;
					}
				}
			});
			if(toinsert){
				$("ol.thelist").append('

');

toinsert = false;

}

});

if(toinsert){

$("ol.thelist").append('

‘+name+’

');
			}
			$("input[name='insertvalue']").val('')
		}
	}

');

}

$("input[name='insertvalue']").val('')

}

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.