Better radio buttons with JQuery

Posted by oshua in HTML, JQuery on 04. Dec, 2009 | 2 Comments

Radio buttons are pretty dull, they look as if they were coming from the beginning of the Internet. With JQuery they can look prettier and be easier to use, without disturbing those browsers that do not have javascript enabled and specially without having to change anything on the server side.

Sending form vars as a serialized PHP object with JQuery

Posted by oshua in HTML, JQuery, PHP on 30. Sep, 2009 | 1 Comment

Sometimes you want to pass only part of a form through ajax to get some results without updating the whole page. JQuery has some great functions to convert the content of a form into a serialized string or object (either serialize or serializeArray). However they both take the content of a full form as input [...]

Select boxes with html inside each option

Posted by oshua in HTML, JQuery on 23. Sep, 2009 | 3 Comments

I needed to add HTML inside the options of a normal html select box, preserving the behaviour of this custom select box as close as possible to the normal one. I needed also that this custom select box could degrade into a normal select box if required to. View demo

Dynamic browser-like tabs with JQuery

Posted by oshua in JQuery on 02. Sep, 2009 | No Comments

Using jquery it is pretty easy to create some tabbed content. You can take advantage of some straightforward functions like
$(‘myfirstcontent’).show();
$(‘myfirstcontent’).hide();
$(‘myfirstcontent’).toggle();
It is also pretty easy to load some remote URL using ajax:
$(‘myfirstcontent’).load(‘myurl’);
However, it is not so simple to create tabs dynamically that load content in which you can actually do some more actions than simply viewing [...]

Jquery getJSON function

Posted by oshua in JQuery on 17. Aug, 2009 | No Comments

Let’s suppose you want to fill multiple select boxes dynamically, but the number is larger than 2 selectboxes and there is a chain of “onchange” events on each one. You will probably be using json to fill the data with an ajaxcall to an API or a script with database calls. Using ajax, you might [...]


PHVsPjxsaT48c3Ryb25nPndvb19hbHRfc3R5bGVzaGVldDwvc3Ryb25nPiAtIGRlZmF1bHQuY3NzPC9saT48bGk+PHN0cm9uZz53b29fYXV0b19pbWc8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2N1c3RvbV9jc3M8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fZmF2aWNvbjwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2V4Y2x1ZGVfY2F0czwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2V4Y2x1ZGVfcGFnZXM8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19mZWF0dXJlZF9wb3N0czwvc3Ryb25nPiAtIDU8L2xpPjxsaT48c3Ryb25nPndvb19mZWVkYnVybmVyX3VybDwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2dvb2dsZV9hbmFseXRpY3M8L3N0cm9uZz4gLSA8c2NyaXB0IHR5cGU9XCJ0ZXh0L2phdmFzY3JpcHRcIj4NCnZhciBnYUpzSG9zdCA9ICgoXCJodHRwczpcIiA9PSBkb2N1bWVudC5sb2NhdGlvbi5wcm90b2NvbCkgPyBcImh0dHBzOi8vc3NsLlwiIDogXCJodHRwOi8vd3d3LlwiKTsNCmRvY3VtZW50LndyaXRlKHVuZXNjYXBlKFwiJTNDc2NyaXB0IHNyYz1cJ1wiICsgZ2FKc0hvc3QgKyBcImdvb2dsZS1hbmFseXRpY3MuY29tL2dhLmpzXCcgdHlwZT1cJ3RleHQvamF2YXNjcmlwdFwnJTNFJTNDL3NjcmlwdCUzRVwiKSk7DQo8L3NjcmlwdD4NCjxzY3JpcHQgdHlwZT1cInRleHQvamF2YXNjcmlwdFwiPg0KdHJ5IHsNCnZhciBwYWdlVHJhY2tlciA9IF9nYXQuX2dldFRyYWNrZXIoXCJVQS03ODU2MDY0LTEwXCIpOw0KcGFnZVRyYWNrZXIuX3RyYWNrUGFnZXZpZXcoKTsNCn0gY2F0Y2goZXJyKSB7fTwvc2NyaXB0PjwvbGk+PGxpPjxzdHJvbmc+d29vX2xvZ288L3N0cm9uZz4gLSBodHRwOi8vd3d3Lm9zaHVhbW9yZW5vLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzctbG9nby5wbmc8L2xpPjxsaT48c3Ryb25nPndvb19tYW51YWw8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vc3VwcG9ydC90aGVtZS1kb2N1bWVudGF0aW9uL21ldGEtbW9ycGhvc2lzLzwvbGk+PGxpPjxzdHJvbmc+d29vX3Jlc2l6ZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19zaG9ydG5hbWU8L3N0cm9uZz4gLSB3b288L2xpPjxsaT48c3Ryb25nPndvb190aGVtZW5hbWU8L3N0cm9uZz4gLSBNZXRhLU1vcnBob3NpczwvbGk+PGxpPjxzdHJvbmc+d29vX3VwbG9hZHM8L3N0cm9uZz4gLSBhOjU6e2k6MDtzOjYwOiJodHRwOi8vd3d3Lm9zaHVhbW9yZW5vLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzctbG9nby5wbmciO2k6MTtzOjYwOiJodHRwOi8vd3d3Lm9zaHVhbW9yZW5vLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzYtbG9nby5wbmciO2k6MjtzOjYwOiJodHRwOi8vd3d3Lm9zaHVhbW9yZW5vLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzUtbG9nby5wbmciO2k6MztzOjYwOiJodHRwOi8vd3d3Lm9zaHVhbW9yZW5vLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzQtbG9nby5wbmciO2k6NDtzOjYwOiJodHRwOi8vd3d3Lm9zaHVhbW9yZW5vLmNvbS93cC1jb250ZW50L3dvb191cGxvYWRzLzMtbG9nby5wbmciO308L2xpPjwvdWw+