CODEWITHSUNDEEP
javascriptjquery
verlager
verlager

Reputation: 876

read <td> and then load popup when clicked

I want to make a table row completely clickable by embedding a hidden <td> containing a link like so:

<tr class="simplehighlight junk" >
  <td>07/09/2011</td>
  <td>Jennifer Woods Memorial GP</td>
  <td>A52</td>
  <td>Harris, Fred</td>
  <td>1900</td>
  <td>Nikolayev, Igor</td>
  <td>2395</td>
  <td class="text-center">0-1</td>
  <td style='display:none;visibility:hidden;\'> games/game1242.php </td>
</tr>

I was using colorbox to target the table cell like so:

<!--colorbox-->
<script src="./js/jquery.colorbox-min.js"></script>
<script>
  $('tr.junk').colorbox(
    {
      iframe:true,
      transition:'elastic',
      speed:'100',
      width:1030,
      height:550,
      href: function(){
        return $(this).find('td').eq(8).text();
      }
    }
  );
</script>

But I am want to use jquery:

<!--Another Pop-up for games table-->
<script src="./js/jquery.popupWindow-min.js" ></script> 
<script>
  $('.diagram-popup').popupWindow({centerBrowser:1, height:560, width:1024});
</script>

How can I add the class diagram-popup to the 8th table data cell and have the row, when clicked, read the contents of that cell?

Upvotes: 0

Views: 2875

Answers (2)

nzifnab
nzifnab

Reputation: 16110

You'll want to add a class to your clickable row, I would probably change the tr in question to read something like this:

<tr class="simplehighlight junk diagram-popup" data-href="games/game1242.php" >

And I would completely drop your hidden <td>, it's unecessary.

And the jquery:

<script src="./js/jquery.popupWindow-min.js" ></script> 
<script type='text/javascript'>
  $(function(){
    $('.diagram-popup').click(function(e){
      $(this).popupWindow({
        windowURL: $(this).data('href'),
        centerBrowser: 1,
        height: 560,
        width: 1024
      });
    });
  });
</script>

I'm sorta not a fan of having windows pop out when I click stuff…I don't think it presents a good user experience. But to each their own.

Here's a jsfiddle as proof of concept: http://jsfiddle.net/UujmJ/1/

Upvotes: 1

Anthony
Anthony

Reputation: 744

<td class='diagram-popup' style='display:none;visibility:hidden;\'> games/game1242.php </td>

$(document).ready(function(){
   $('.diagram-popup').click(function(){
      $(this).html(); //contents of cell
   });
});

Is that what you're looking for?

Update: Ah, I see...you're wanting to click any cell in the row and then go get the contents.. Maybe this will help...

<td style='display:none;visibility:hidden;\'> games/game1242.php </td>

$(document).ready(function(){
   $('table tr td').click(function(){
      var cell = $(this).parent().find('td:last');
      cell.addClass('diagram-popup'); //Not clear on if this is what you're wanting, you can always just print out the diagram-popup class server side 
      cell.html(); //contents of cell
   });
});

I haven't tested that, but it should work.

Upvotes: 1

Related Questions