JQuery “Any Row” Picker

Question

I'm looking for a generic "Row Picker" for JQuery.

We've all seen the cool "Picker" tools like date pickers, color pickers, time pickers, etc, where you click in a text box and a little calendar or color palate or clock or something comes up. You select something (like a date) and the text box is then populated with a value.

I really need an all-purpose "row picker" where you can populate something (a table, divs, etc) with some rows of data (say a list of timezones). This would be linked to a text field and would pop up when the user clicks in the field.

They would click a row (say a timezone), and the timezone id would be passed back to the field.

Anyone know of anything that does this?

Thanks!

Answer 1

I don't know about totally generic though you can certainly achieve a row selector fairly easily in jQuery.

<script type="text/javascript"> $(function() {
        $('table#data_table tr').click(function() {
              alert($(this).find('td.id').html());
          }); }); 
</script>


<table border="0" id="data_table">
<tr>
<td class="id">45</td><td>GMT</td>
</tr>
<tr>
<td class="id">47</td><td>CST</td>
</tr>
</table>

This adds a click to each row, finds the tagged id within the row which would then allow you to do something with it. Obviously you would need to target this to your data table and filter based on the contents. JQuery can then be used to populate the result of the click into the target field. You can then come up with some convention where all your data tables work the same which would allow you to generalise this into a generic picker for your application.

Answer 2

In this scenario it is better to use event delegation. So put the event handler onto the table itself, this avoids having to bind a handler for each row which is quite expensive if you have a good few rows. You can then use the event.target to query which element was responsible for the event and go from there.

More info here

E.g

$('#someTable').click(function(e) {
  var target = $(e.target);

});

Answer 3

This isn't exactly what you asked for, but it may be what you're looking for: The Any+Time(TM) Datepicker/Timepicker AJAX Widget with Time Zone Support can display a list of timezones right in a time picker, making it easy for the user to select the appropriate timezone. It is also easy to customize, and allows faster selection than most other time pickers that use drop downs or sliders. I hope this helps!

Answer 4

I know I'm a year late, and that I'm probably missing something here, but what's wrong with the select element with the size attribute?

<select name="test" size="5">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

This will show all 5 options, and allow the user to select one. It also has absolutely no Javascript dependency if just used in a standard form, but also can handle typical Javascript events well, and also seems to produce the exact appearance that you wanted - not to mention that, as always, you can use CSS to style it as you like.

When standard HTML will work, I say: Use standard HTML.