a few things i came across the past few days. and yes, the formatting/colors are horrible. and im so exhaused i just dont care. i think that means something...
using selector to do a lot of work for you:<input class='my-form-element' key='A'>....</input>
<input class='my-form-element' key='B'>....</input>
<input class='my-form-element' key='A'>....</input>
check_val = 'B';
$("input.my-form-element[key]key!='"+check_val+"']").attr("disabled",true);
- finds all inputs
- with the class my-form-element
- that have the attribute "key"
- where the "key" does not equal some value, in this case "check_val" (a passed in variable)
- and disables them
result:
<input class='my-form-element' key='A' disabled>....</input>
<input class='my-form-element' key='B'>....</input>
<input class='my-form-element' key='A' disabled>....</input>
all this from the selector. no if or looping necessary! you can also check if the value does equal some value in the [key='val'] part. you can also add additional manipulations on after the .attr() like adding/removing classes, updating content, etc. e.g. ...attr("disabled",true).addClass("disabled)... etc.
working with select menus where you need to access the option # from the item selected:
<select class="my-favorite-options">
<option value="1">
Favorites
</option>
<option value="red">
Food
</option>
<option value="trucks and toys" special="1">
Toys
</option>
</select>
the_select = $("select.my-favorite-options");
the_select_text = $("select.my-favorite-options :selected").text();
the_select_value = $("select.my-favorite-options :selected").text();
the_option_id = the_select.attr('selectedIndex');
selecting "Toys" from the options, the returned values are:
the_select_text =
"Toys"the_select_value =
"trucks and toys"the_option_id = 2
now extend the first example one step further. you can get access to the attributes of the options this way:
- find only options with a "special" attribute
the_special_select = $("select.my-favorite-options").children("[special]");
- add .val() onto that returns: "trucks and toys"
- add .val() onto that returns: "Toys"
- add .attr("special") onto that returns: "1"
adding selector modifiers to previous values:
the_select = $("select.my-favorite-options");
you could also do things like:
the_select.children("[special]")
- returns all options that have a "special" attribute
the_select.children("[special='1']")
- returns all options that have a "special" attribute with value 1
(just learned, use the .filter() selector to really add to previous selections.)
RUBY/HAML and working with options_for_select():
using the above jquery can be really powerful when combined with page elements, especially form elements. ive been working on custom select dropdowns that are hidden but are then manipulated by a custom UI. but in order to do it effectively you need to access some of the data in the options. but for that you need to get those attributes INTO the select so that when it's created (and then hidden) what you result in has the same attributes. I found a way of doing that using options_for_select().
= my_form.select :form_id, options_for_select( Collection.all.map { |c| [ c.name , { :value => c.name, :id => c.id, ... etc.} ] } ), {}, {:class => "my-class", :attr1 => "value" ... etc.}
the bold stuff is where it's at and the red bit is where the power is. pass in attributes which you may want to use later. pass in as many as you'd like and have fun.