Search code examples
jqueryhtml-tablepopupsimplemodal

How can I pass an URL location from a table row to simplemodal script


I have the old script working at http://chesstao.com/about.php in the games table. Unfortunately it uses the href from each td repeated several times for each tr. I would like to click on the table row and have the href passed to the 'test_modal' script. So I think I need to assign a value to var hrefval from the onclick in the tr.

True or false?

Is there a better way to do this w/o breaking dataTables in http://chesstao.com/test.php?

<tr class="gradeA" class="test_modal"  onclick="this.className='test_modal';
window.location.href='games/BG-1001.php';"><td>07/17/1998</td></tr>

<script>$('.test_modal').click(function(e) {var hrefval= $(this).attr("href");
$.modal('<iframe src="' + hrefval + '" height="535" width="1000" style="border:0">',
containerCss:{backgroundColor:"#A6B487", borderColor:"#A6B487", height:550, padding:0,
width:1020}, overlayClose:true}); e.preventDefault();});</script>

Solution

  • There is no need to put inline onclick. It would be better to put this URL in the rel attribute of each tr and take it in the on click handler. Example:

    <tbody>
        <tr rel="games/BG-1001.php" class="test_modal">
           <td></td><td></td><td></td>
        </tr>
       <tr rel="games/BG-1012.php" class="test_modal">
           <td></td><td></td><td></td>
       </tr>
       <tr rel="games/BG-1020.php" class="test_modal">
           <td></td><td></td><td></td>
       </tr>
    </tbody>
    

    with js code:

    $(".test_modal").click( function(e) { var href= $(this).attr("rel"); etc.... } );

    I have not copied everything from your code but I believe that you see what I'm trying to achieve.

    Jovan