CODEWITHSUNDEEP
jqueryhtml-tableanchor
Zade
Zade

Reputation: 692

Bind <td>, but not contained anchor, using jQuery

Update: the links now work, but the arrows are still problematic.

I'm working on http://www.boulderdispensaries.com/

Below the map, if you click on a row, you see the row below it appear. Even if you click a link in a row. Also, if you click a row, then click the row above, the right arrow doesn't turn down. How can I fix it so clicking a link in a row goes to the link, and the arrows function properly?

For the fiddlers: http://jsfiddle.net/yFkNf/

I have also pasted the code below.

jQuery:

$(document).ready(function() {

  var hideText='<img src="arrow-down.gif" width="10" height="10" border="0" alt="v">';
  var showText='<img src="arrow-right.gif" width="10" height="10" border="0" alt=">">';
  var is_visible = false;

  $('tr:odd td').addClass('expand');
    // this is the hack I was using to get the links to work, but then the bind doesn't
//  $('tr:odd td:nth-child(1)').removeClass('expand');
//  $('tr:odd td:nth-child(2)').removeClass('expand');
//  $('tr:odd td:nth-child(4)').removeClass('expand');
  $('tr:odd td:first-child').prepend('<a href="#" class="toggleLink">'+showText+'</a> &nbsp;');

  $('.toggle').hide();

  $('a.toggleLink').click(function() {
      is_visible = !is_visible;
      $(this).html( (!is_visible) ? showText : hideText);
      $(this).parent().parent().next('tr').toggle();
      return false;
  });

  $('.expand').click(function(){
      is_visible = !is_visible;
      $(this).parent().find('a.toggleLink').html( (!is_visible) ? showText : hideText);
      $(this).parent().next('tr').toggle();
      return false;
  });

});

Here's the format of every two rows:

<tr>
  <td><a href="http://www.boulderkindcare.org/">Boulder Kind Care</a></td>
  <td><a href="http://maps.google.com/etc">2031 16th</a></td>
  <td>(720) 235-4232</td>
  <td><a href="mailto:[email protected]"><img src="email_icon.gif" /></a></td>
  <td nowrap="nowrap">&nbsp;</td>
  <td align="center">&nbsp;</td>
  <td align="center">&nbsp;</td>
  <td align="center">&nbsp;</td>
</tr>
<tr class="toggle">
  <td colspan="8">More info coming soon.</td>
</tr>

Upvotes: 0

Views: 730

Answers (2)

Chris Pratt
Chris Pratt

Reputation: 239420

$('td a').click(function(event){
    event.stopPropagation();
});

That will prevent anchor link clicks inside the TD from bubbling up to the TD. You'll probably want to make the selector a little less generalized; you didn't give enough information for me to specifically target it properly.

Arrows

You're using a global variable to store whether or not an item is expanded, but multiple items can be expanded at once. Essentially, you need to store this detail on the toggle link, or find another way from within that context to know the status of row being expanded.

Upvotes: 1

Andrew Shooner
Andrew Shooner

Reputation: 1200

Sorry for the codeless response:

To get the links working correctly, I believe you just need to remove return false from your click handler. I think that line is explicitly telling the links not to work.

Your problem with the arrows is that your state variable is_visible is global (which you should avoid btw), so every row is sharing the same variable. It would be better to store that state in a class on the tr, then check for it onClick. Or maybe better yet have a different handler for the 'is visible' rows based on that class.

Upvotes: 1

Related Questions