Show alert with the content of a Database selection - php

Question

I am very new to JavaScript what is related to it.
I have a set of dynamic rows and corresponding columns to those rows. In one column I have a button. When I click on it, it displays the results of a select query in another page based on the Posted Competence_ID.
The query works fine and I get correct results when I click on the button. However, what I would like to do now, is to display that message in an alert when the button is clicked and stay on the same page rather than opening a new tab..
Here is the relevant HTML code that shows the table I use:
echo "<table border='1' id='mycompstable' class='sortablee' cellpadding='0' cellspacing='0'>";
echo "<tr><th>ID</th><th>Competence Group</th><th>Competence Class</th><th>Competence Description</th><th>Own Evaluation</th><th>Manager's evaluation from last year</th><th>Target levels</th><th>Gap</th><th>Action</th><th class='unsortable'>Action ready target </th></tr>";
foreach($descs as $compi){
echo "<tr>";
echo "<td>".$compi['Competence_ID']."</td>";
echo "<td><p style='text-align: center;'>".$compi['Competence_Group']."</p></td>";
if(isset($compi['Competence_class'])){echo "<td>".$compi['Competence_class']."</td>";}else echo "<td><p style='text-align: center;'>-</p></td>";
echo "<td>".$compi['Competence_Description']."</td>";
echo "<td class='evaluation'>";
echo "<select class='ownlevelselect' id='ownlevelselect-.".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";
if (isset($compi['ownlevel']) && $compi['ownlevel']!= '' && !empty($compi['ownlevel']) && $compi['ownlevel']!= 0) {
echo "<option selected value='".$compi['ownlevel']."' selected='selected'>".$compi['ownlevel']."</option>";
}
echo "<option value='' >--</option>";
echo "<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option>";
echo "</select>";
echo $compi['ownlevel'];
echo '<a test="'.$compi['Competence_ID'].'" onClick="showLevels('.$compi['Competence_ID'].');" target="_blank" href="'.INDEX.'?categ='.$_GET['categ'].'&action='.$_GET['action'].'&subaction=viewlevels'.'&levels='.$compi['Competence_ID'].'">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("Click to view the description of each level?").'"/></a>';
echo "</td>";
Here is the code to retrieve the data:
function fetchlevels($Competence_id){
$this->query="SELECT * FROM levels WHERE comp_id=".$_REQUEST['levels'];
$tulos=$this->suoritaKysely();
return $tulos;
}
And here is the page that I want to show in the message:
$levels=$this->levels;
$comp=$this->compdesc;
echo "Levels explanation for the competence:".$comp['Competence_Description']."<br>";
echo "Level 1 = ".$levels[0]['lvl1'];
echo "<br>"."level 2 = ".$levels[0]['lvl2'];
echo "<br>"."level 3 = ".$levels[0]['lvl3'];
echo "<br>"."level 4 = ".$levels[0]['lvl4'];
echo "<br>"."level 5 = ".$levels[0]['lvl5'];
echo "<br><br>";
echo '<input type="button" value="close" window onclick="window.close();">';
?>
Any kind of help would be very much appreciated

Answer 1

Here is a Ajax simulation in jsfiddle
http://jsfiddle.net/ncubica/Umxjb/
HTML
<i style='display:none' id="loadingPopup">Loading</i>
<table>
<tr>
<td data-id="td1"> row 1</td>
</tr>
<tr>
<td data-id="td2"> row 2</td>
</tr>
<tr>
<td data-id="td3"> row 3</td>
</tr>
</table>
javascript
$("table").on("click", function(event){
var $target = $(event.target);
if($target.is("td")){
var id = $target.attr("data-id");
makeAjax(id);
}
});
//simulating ajax
function makeAjax(id){
//you will have to use ajax an retrieve you json format
//i will simulate ajax only
$("#loadingPopup").show();
var _json = { id : id, value : "some value", description : "some description"};
setTimeout(function(){response(_json)}, 1000);
}
function response(_json){
$("#loadingPopup").hide();
alert(_json.id + " - " + _json.value);
}
CSS
table{font-family:arial; font-size:12px; width:100%}
table tr td{border-bottom:1px solid #CCC; padding:10px;}

Answer 2

Just an example based on the given info!
echo '<a onClick="showLevels('.$compi['Competence_ID'].');">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("Click to view the description of each level?").'"/></a>';
Javascript/jQuery/Ajax
function showLevels(comp_id)
{
$.ajax({
type: "GET",
url: "process_file.php?comp_id="+comp_id,
success: function (result) {
alert(result);
}
});
}
process_file.php
<?php
//Your database Config.
$comp_id=$_REQUEST['comp_id'];
$this->query="SELECT * FROM levels WHERE comp_id=".$comp_id;
$tulos=$this->suoritaKysely();
//Proper Output Actions
$levels=$this->levels;
$comp=$this->compdesc;
echo "Levels explanation for the competence:".$comp['Competence_Description']."<br>";
echo "Level 1 = ".$levels[0]['lvl1'];
echo "<br>"."level 2 = ".$levels[0]['lvl2'];
echo "<br>"."level 3 = ".$levels[0]['lvl3'];
echo "<br>"."level 4 = ".$levels[0]['lvl4'];
echo "<br>"."level 5 = ".$levels[0]['lvl5'];
echo "<br><br>";
?>