Javascript and JQuery are awesome
So I was having some issues with the embed.ly jquery preview plugin.
Basically embed.ly was working like a charm, but it was also messing with some parts of a form I was working with for a rails application. These were dropdown boxes, check boxes and radio buttons, that were being deselected when embedding an object in my create a post form.
Frankly I didn't want to spend to much time debugging the plugin, as the reasons I chose it in the first place was because it's fast and just works. So here is the little hack I used.
First of all I removed all the objects in my form that could be deselected by javascript: i.e. dropdown boxes, checkboxes and radio buttons.
I created instead hidden fields in my forms. Like this:
<%= f.hidden_field :settings, :value => "public" %>
The :value field is specified so that I have a default value, just like I would in a form field.
Then I created a ul field list:
<li class="privacy active">public</li>
<li class="privacy">private</li>
<li class="privacy">anonymous</li>
Then the followed piece of javascript followed to replace the check boxes / radio buttons / dropdown box:
$('li.privacy').click(function () {
$("li.active").removeClass("active");
$(this).addClass("active");
$('#post_settings').val($(this).text());
You can also style the ul / li fields with css:
cursor: hand; cursor: pointer;
text-shadow: 1px 1px 6px #fff;
Of course you have to keep in mind that you might want to support also browser that do not support javascript.
