Clickable Html Table Rows That Post To A Php Popup Window

I have an HTML table that has rows generated with PHP and populated with MySQL data. I want the rows to be clickable, where onclick they open a new window with the MySQL data for t

Solution 1:

Thanks @RamRaider for the suggestions but I know nothing of ajax and I'm afraid to use code that I don't fully understand.

I came up with this solution though. I wrapped the table in a form and created a hidden input that is set and submitted onclick for the row.

<form target='_blank' name='getID' method='POST' action='asset_details.php'>
<input type='hidden' name='id'id='id'>
<table>
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    echo"
        <tr onclick=\"selectID('" . $row['id'] . "')\">
            <td>" . $row['id'] . "</td>
            <td>" . $row['ser'] . "</td>
            <td>" . $row['part'] . "</td>
            <td>" . $row['model'] . "</td>
            <td>" . $row['make'] . "</td>
            <td>" . $row['description'] . "</td>
            <td>" . $row['price'] . "</td>
        </tr>
</table>
</form>";

The JS:

functionselectID(id) {
    document.getID.id.value = $(this).closest('tr').attr('id');
    document.getElementsByName('getID')[0].submit();
}

Solution 2:

Typically one would not use an inline function but register the function for all rows using a method such as document.querySelectorAll which can get the id from an attribute on the TR object/element. Your function ( openDetails ) would then post, via ajax, to your backend script which would do whatever processing it had to do before returning a response in whatever format you like.

Some pseudo code to show the flow you would take. How you process the data is then up to you - you could pop up a dialog on screen ( ie: lightbox style ), flash a message somewhere, add a new table row etc Please note, the ajax function was written here just now to show the idea and I can make no guarantees that it will all work 'as is'

html/php
--------
I would include the id in a dataset value like this so that the javascript can get the valuewhen the tr is clicked.
<tr data-id='".$row['id']."'>


javascript
----------
function initialise(){
    /* find all table rows and assign a listener function */var col=document.querySelectorAll('tr');
    for( var n in col ) if( n && col[n] && col[n].nodeType==1 ){
        col[n].addEventListener('click',openDetails,false);
    }
}

function openDetails(event){
    /* get the specific id from the table row using it's dataset-id value */var id=this.dataset.id;
    /* pseudo ajax method */
    ajax.call( this, '/assets_details.php',{ 'callback':opendetails_callback, 'params':{ 'id':id } } );
}

function ajax(url,options){
    var req=new XMLHttpRequest();
    varparams=[];
    for( var n in options.params ) params.push( n+'='+options.params[n] );

    req.onreadystatechange=function(){
        if( req.readyState && req.status==200 ) {
           /* invoke callback function with data returned from asset_details.php */
           options.callback.call( this, req.response );
        }
    }
    req.open( 'POST', url, true );
    req.send( params.join('&') )
}

function opendetails_callback( response ){
    /* You would use the callback to create the new content on screen */
    alert( response );
}

document.addEventListener( 'DOMContentLoaded', initialise, false );

The backend script would listen for POSTed data and respond accordingly.

assets_details.php
------------------
<?php/* include your functions etc */if( $_SERVER['REQUEST_METHOD']=='POST' ){ 

        /* Process your data and send response: example */echo json_encode( $_POST ); 
    }
?>