Moving select options with jQuery

I wanted to move select options up/down on a click of a button. The following jQuery snippet does exactly that, if you want to put in some moveby variable (delta) execute this stuff within a for loop

#UPDATE My implementation was valid ages & jQueries ago, thanks to imants.horsts for updated solution

$.fn.moveSelectedUp = function() {
var selectedOptions = $(this).selectedOptions();
var prev = $(selectedOptions).first().prev();
$(selectedOptions).insertBefore(prev);
}

$.fn.moveSelectedTop = function() {
var selectedOptions = $(this).selectedOptions();
var first = $(this).children("option").not(":selected").first();
$(selectedOptions).insertBefore(first);
}

$.fn.moveSelectedBottom = function() {
var selectedOptions = $(this).selectedOptions();
var last = $(this).children("option").not(":selected").last();
$(selectedOptions).insertAfter(last);
}


This solution is tested in FF3 & IE6/7, should work elsewhere as well

My Grandmother

My Grandmother (aged 83) today gave me a call. Nothing special, from her mobile phone (she prefers large letters, and better display because she sends SMS`s daily). The interesting thing is the she saw the german army occupying Serbia from her workplace, the time when only few of them had radios and tv sets (with sometimes watchable single demo channel) were a rarity. She called to alert me on a new virus on the Internet?! I wonder about what is left for us to see

indexOf function JavaScript arrays & IE6/7

Here is a hidden gem : Javascript in IE6 & IE7 DOESNT support Array.indexOf function

So if you are getting some "unknown property or method", open the script debugger (a joke for itself :)) and it hangs on a line with call to indexOf dont despare here is the fix (even better joke that is comes from Mozilla :)

add Array.indexOf for IE6 & IE7

JSON embedded HTML in TBODY

This is a short one but really odd.

Scenario:

Have a table with tbody element, have an ajax provider that dynamically generates rows for this tbody, pretty simple.

Ajax request (jquery), expecting JSON result with embedded HTML in an array. If there is comment in HTML, jQuery produces unexpected behaviour (strip some unnecessary tags like tr`s, td`s which is really really ugly). Solution is to remove comments from HTML that you plan to deliver this way.
The optimistic programmer thinks the hidden traps are found, but IE6 produces 'unknown error on line 11' with code

$('#id_of_tbody').html(ajax_response);

After some desperation found out that according to msdn some elements are read-only for IE, among them tbody (nice DYNAMIC Object Model), so .innerHTML is not usable, my guess is that jQuery`s .html() function uses it in background.

The solution is

$('#id_of_tbody').empty().append(ajax_response);


What a nice day to be a programmer :) My mother told me I should be a fisherman, but they have to wake up early (and protest on the streets against high prices of fuel)...

Seagull Vote module

Just a few toughts about coming Vote module for Seagull

- handle various voting capabilityes of Seagull php framework.
- support/accept votes from users || other modules
- every voting can be executed within different context like grouping by module ('cms','publisher',... )
- support for implentation of custom voting strategies
- ip && user based logging of votes
- a basic voting algorithms (OptionSelect and Bayersian avarage ratings)
- blocks for displaying voting results (support for jQuery)
- voting results retrieval trough XMLHttpRequest calls (template based results)

Currently I am almost finished with DAO part and Voting strategies, thinking about JSON like configuration parameters for voting strategies. But back to work :)

jQuery UI tabs and jMap with Seagull

Today I came accross a weird problem while tried to put together a pimped-up profile page with jQuery tabs and a google map inside one of tabs.

jMap is a jQuery plugin for handling Google Maps.

UI is user interface plugin for jQuery which among others handles tabbed controlls.

Problem :
If you embed a jMap map inside a UI tab the map wont be rendered correctly (it isnt centered correctly, some sections of map wont be loaded). When you place the div containing the map out of the tab it loads just fine. Obviously jQuery magic goes wrong somewhere, as the map is functioning correctly, you have controlls and if you move it around it loads some (not all visible) sections so it must be some width/height/padding/margin but I wasnt able to debug what is going on in the background, too much things happen at once.

Solution:
It DOES matter in which order you set up jQuery objects. First you have to set up the map, then set up UI Tabs and it works like a charm.

The code should be something like this (if you wander about {} enclosed stuff which are not JSON notation, its how you can reference php variables in JS with Flexy in Seagull):

{scriptOpen:h}
$(document).ready(function(){
$('#map').jmap('init', {
mapCenter:[{aGeoCodes[longitude]},{aGeoCodes[latitude]}],
mapZoom: 15,
mapShowjMapIcon: false
});
$('#map').jmap("addMarker", {pointLatLng:[{aGeoCodes[longitude]},{aGeoCodes[latitude]}]});
$("#tabbedProfile > ul").tabs();
});
{scriptClose:h}

Hope this helps to someone suffering from same (d)effect to save a bit of debugging.

Seagull CMS first impression

Today I gave a Segaull CMS module (1.3) a try. Was interested about its features, and what benefit it has over Publisher module, which is a bit aged cms solution for SGL, and is it ready for production use without any tweaking.

CMS beats Publisher in almost every aspect (faster, smarter,more configurable), so it could be a solid solution if you dont need multilingual support (although it could be around the corner, but I dont know how far the corner is :). Publisher has multilingual support on the other hand.

CMS supports: types & attributes of content (nice feature), versioning (although I couldnt figure out how can I select the version of the published content, but maybe that is my bad). Give the wiki a try for more details.

Found a small bug in category management (images for TreeView are not referenced correctly) nothing serious, another one in navigation (add a page that is link to content, save and try to edit it, it doesnt fill the edit form correctly) more serious a bit, but there is workaround, fill everything again on edit :).

It has some really nice AJAX interface, so things are kept simple yet usable.

The next step will be to use CMS functionality to store user generated content like CV-s etc, interested in how it could be used along with other modules, but I am sure that it will perform well.

Only few things are there that are making me to stick with Publisher:
- the code comes obfuscated with community version, and sooner or later I will need some customization (though that can be done by extending cms classes),
- multilingual support (most of sites done are not english on my side), lack of it is showstopper atm
- still have some environments with php4 installed, and CMS requires 5.2, but if I make serious threats to root on host he will upgrade for sure, as all such upgrades have to be done sooner or later as php4 is not supported any more, and I am the root...

So Demian and Julien did a great job as CMS module is getting mature CMS solution. Cant wait to see how it develops further.