使用数据库选择的内容显示警报

Question

我对JavaScript来说是非常新的，和它相关的东西。

我有一组动态行和对应于这些行的列。在一列中，我有一个按钮。当我单击它时，它将select查询的结果显示在另一个基于Posted Competence_ID的页面中。

该查询工作良好，单击该按钮可获得正确的结果。但是，我现在想做的是，当单击按钮并保持在同一页面上时，在中显示该消息一个警报，而不是打开一个新的选项卡。

下面是显示我使用的表的相关HTML代码：

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>";

以下是检索数据的代码：

    function fetchlevels($Competence_id){
    $this->query="SELECT * FROM levels WHERE comp_id=".$_REQUEST['levels'];
    $tulos=$this->suoritaKysely();
    return $tulos;
}

下面是我想在信息中显示的页面：

$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();">';



?>

任何帮助都是非常感谢的。

Answer 1

以下是jsfiddle http://jsfiddle.net/ncubica/Umxjb/中的Ajax模拟

<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

只是一个基于给定信息的例子！

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>";

         ?>