By jessehensold on

Does anyone have any idea how to apply jQuery 'Selectable' or 'Hide' to rows in a view table?

I am trying the path of using the view theme information and using one of the templates: Here's what I've got so far:

<style type="text/css">
	#feedback { font-size: 1.4em; }
	.selectable .ui-selecting { background: #FECA40; }
	.selectable .ui-selected { background: #F39814; color: white; }
	</style>
	<script type="text/javascript">
	$(function() {
		$("#selectable").selectable();
	});
	</script>
<table class="<?php print $class; ?>">
  <?php if (!empty($title)) : ?>
    <caption><?php print $title; ?></caption>
  <?php endif; ?>
  <thead>
    <tr>
      <?php foreach ($header as $field => $label): ?>
        <th class="views-field views-field-<?php print $fields[$field]; ?>">
          <?php print $label; ?>
        </th>
      <?php endforeach; ?>
    </tr>
  </thead>
   <div class="demo">

    <tbody>
    <?php foreach ($rows as $count => $row): ?>
      <tr class="selectable">
        <?php foreach ($row as $field => $content): ?>
          <td class="views-field views-field-<?php print $fields[$field]; ?>">
		  <div class="selectable>
            <?php print $content; ?>
			</div>
          </td>
        <?php endforeach; ?>
      </tr>
    <?php endforeach; ?>
  </tbody>
 </div>
</table>

This, however, does not work. Nothing is selectable.

Anyone ever done this?

⋅ Categories: Drupal 6.x

Comments

jerseycheese’s picture

jerseycheese
Location Virginia Beach, VA
commented

Do you have jQuery UI being called? .selectable() is a jQueryUI function that comes separate form the regular old jQuery that comes core w/ Drupal.

http://drupal.org/project/jquery_ui

In any event, your jQuery selector is wrong: should be $(".selectable").selectable(); not $("#selectable").selectable();
The only elements that are marked as "selectable" are using a class rather than an id attribute, so that would be .selectable

.hide() however, is regular jQuery.

You should be able to do that in your example like so:

$(function() {
$(".selectable").hide();
});

And that will hide and elements with class="selectable". Probably not what you're trying to do but I think you get the point.