I want to show a jQuery dialog with details of one row in the table (that only shows part of information). This is an example of what I want to do.
The problem: When the image of 'View more details' of a row is clicked, the JS function receives the id of the row clicked. I can't assign to JS variable 'data' as I did in the HTML part of the code. How can I solve this? Is a good way to do it?
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
height: 400,
width: 600,
buttons: [{
text: "Close",
click: function() {
$(this).dialog("close");
}
}]
});
$(".details").click(function(){
$("#dialog").empty();
var i = $(this).attr('id');
var data = <?=$cars[i]['price']?>;
$("#dialog").append("<p>Car:"+data+"</p>");
$("#dialog").dialog("open");
});
});
</script>
<table>
<?php for($i = 0; $i < count($cars); $i++) { ?>
<tr>
<td><?=$cars[$i]['model']?></td>
<td><?=$cars[$i]['colour']?></td>
<td>
<img class="details" id="<?=$i?>" style="cursor: pointer;" src="http://localhost/ci/public/images/details.png" width="40" height="40" alt="Details"/>
</td>
</tr>
<?php } ?>
</table>