views:

41

answers:

0

Bit of a long winded question but here it goes- I query a database and then return the values in a html table. The number of rows and columns in the table depends on the results of the query. I want the user to be able to get more information on each row. To do this the user will click one of a choice of images in the last column of each row (which image depends on the type of information they want). So I have basic html table stuff (simplified version):

<form name ="mainForm" enctype="multipart/form-data" action="getInformation.php" method="POST">
$query_header= "SELECT columns FROM tables where condition";
$result_header = mysql_query($query_header, $db);

$query_body= "SELECT columns FROM tables where condition";
$result_body = mysql_query($query_body, $db);

print <<<END
<table>
    <thead>
        <tr>
END;
        while($myrow = mysql_fetch_row($result_header)){
            echo "<th>$myrow[1]</th>";
        }
print <<<END
            <th>Choose More Info</th>
        </tr>
    </thead>
    <tbody>

END;
    while($myrow = mysql_fetch_row($result_body)){
        echo "<tr>";
        foreach($myrow as $m){
            echo "<td>$m</td>";
        }

    /*** Here is where the user can choose to get more information on the row*/
print <<<END
        <td>
            <input  class="img_button" type="image" height=15 width=15 align="middle" alt="Information regarding x" title="Information regarding x" value=$myrow[0] name="option1" src="../images/info_type1.png">
            <input class="img_button" type="image" height=15 width=15 align="middle" alt="Information regarding y" title="Information regarding y" value=$myrow[0] name="option2" src="../images/info_type2.png">
        </td></tr>
END;
    } //end while

print <<<END1
    </tbody>
</table>
</form>
END1;

Based on the name atribute passed to "getInformation.php" a certain action is performed and based on the elements value particular infomration is returned. This works fine! However, I want to use tablesorter, because a very many rows can be returned. So I change the class of the table to tablesorter etc. Everything still works fine until I acutally sort the table, then nothing works. So I saw the "jquery tablesorter and select all checkbox in table header" question on stackoverflow (an excellent community! ).

//So I added these elements to the form:
<input type="hidden" name="option1_global", value="default">
<input type="hidden" name="option2_global", value="default">

<script type="text/javascript">
$(function(){
    $('.img_button').live('click', function(){ 
                alert($(this).attr('value')); //this works - returns correct value based on which row clicked, even after sorting. Its great
                if($(this).attr('name') =='option1'){
                    $('#option1_global').val($(this).attr('value'));    //I'm sorry I had document.getElementByID.value previously and changed it - hence wrong subject line infirst post
                }elseif($(this).attr('name') =='option2'){
                    $('#option2_global').val($(this).attr('value'));
                }
                document.mainForm.submit();
    }); 
});
</script>

But the value of "optionx_global" passed to "getInformation.php" is always the default value. So I was thinking - is it incorrect to set the value of an element inside the .live() function? I think its clear I'm not an expert, but if I am doing something obviusly wrong I'd really like to know! Thanks a lot for any help!