jq::plugin rcGrid

I wrote my first jquery plugin; rcGrid, the RondaChurros Grid. rcGrid is a lightweight, jquery + json + ajax editable grid with support for crud, paging, filtering, sorting –and– easy implementation of custom edit forms.

Look at some samples of rcGrid here


The custom edit forms (just some simple html) gives you an easy to set up custom input form that is bound to your database !

Sample of a user-defined edit form.

rcGrid sample boundform


jq::attaching click handlers to -all- <a>’s

Wow JQuery really is great ! Say you want to attach click events to all the anchors in your page with classname ‘aa’.

Can be achieved with the following few and simple lines

$(function() {
//attach click event to all anchors of class ‘aa’…
$(“.aa”).click(function() {
alert(“you clicked:” + $(this).attr(‘id’));

If you wanted to only attach events to anchors within a (named) div, simply replace the $(“.aa”).click(function() { with $(“#yourdiv.aa”).click(function() {.


*** jq::autogenerate toc

Would be nice if user could automatically generate a clickable TOC.Here some tools.


*** jq::which html-editor to use ?

I spent hours trying to get MarkItUp to work correctly. Especially retrieving content thru jq and hacking the ‘preview’ pane (by using a [div]). Documentation is sparse. With hindsight i should have used TinyMCE. Lightweight, extensive documentation, reliable (WordPress uses it). This is how I lose hours (or gain experience).

*** jq::serializing form results

1) json type (only elvalue, not elname?!):http://www.mail-archive.com/jquery-en@googlegroups.com/msg26636.html

2) string type elavlue+elname: http://docs.jquery.com/Ajax/serialize

Note: In order to work properly serialize requires that form fields have a name attribute. Having only an id will not work. Note the name attribute in this field:

result like:single=Single&multiple=Multiple2&check=check1&check=check2

2 hrs later /<

2 hrs later, no coded just surftrapped !

* ajax file-upload(stay on page) : http://www.webtoolkit.info/ajax-file-upload.html

* round buttons: http://www.webtoolkit.info/css-rounded-buttons-links.html

–same site–

* drag-drop tree: http://interface.eyecon.ro/demos/drag_drop_tree.html

* fish-eye: http://interface.eyecon.ro/demos/fisheye.html, see also: http://icon.cat/wiki/IconDock_En#iconDock_jQuery_Plugin

* resizable textbox: http://interface.eyecon.ro/demos/resize_textarea.html

* custom scrollbar: http://interface.eyecon.ro/demos/scrollbar.html

* d+d sort: http://interface.eyecon.ro/demos/sort_lists.html

* eased popup: http://interface.eyecon.ro/demos/windows.html#

(from http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html)

* 3cols -splitter: http://methvin.com/jquery/splitter/3csplitter.html

* rounded buttons: http://www.malsup.com/jquery/corner/

* text-pager: http://rikrikrik.com/jquery/pager/

* mpg player : http://www.sean-o.com/jquery/jmp3/

* flexigrid! : http://groups.google.com/group/flexigrid/

* inplace editor: http://code.google.com/p/jquery-in-place-editor/

(from http://www.noupe.com/php/20-useful-php-jquery-tutorials.html)

a lot on jquery, ajax and db (some with json)

* treeview: http://demo.lateralcode.com/directory-tree/

* panel, cool+effects: http://www.ndoherty.com/demos/coda-slider/1.1.1/#2

* tgrid: http://www.reconstrukt.com/ingrid/src/example1.html (flexi better?!)

* inplace editor (tiny and effective): http://code.google.com/p/jwysiwyg/

* text collapsor: http://blog.jeremymartin.name/2008/02/jtruncate-in-action.html (use with one line ?!)

* modalbox: http://famspam.com/facebox

(from http://www.ajaxline.com/best-jquery-plugins-june-2009 , see this http://www.open-open.com/ajax/2_jQuery.htm for samples)

* edit-in-place: http://plugins.jquery.com/project/edit_in_place

jquery 102

Today we want to try and implement a draggable tree, splitter, divhider, mouseover dropdown. And all this within 2hours ! And a picture for test.

palma cathedral

palma cathedral