如何在单击链接后刷新div的内容

时间:2013-06-25 13:17:54

标签: php jquery ajax hyperlink html-table

我有一个包含下拉框的表单,当值更改时,表单使用jQuery和ajax生成表。该表包含基于下拉框值和链接的数据。

我的初始脚本是下拉框所在的位置以及添加表的位置:

<?php require_once('/connections/db.php');
mysql_select_db($database_db, $db);
$query_weeks = "SELECT WeekNo, WeekName FROM tbl_weeks ORDER BY WeekNo ASC";
$weeks = mysql_query($query_weeks, $db) or die(mysql_error());
$row_weeks = mysql_fetch_assoc($weeks);
$totalRows_weeks = mysql_num_rows($weeks);
 ?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>


</head>

<body>


        <form name="form1" method="post" action="">
        <select id="weekselect" name="week">
          <?php
        do {  
        ?>
          <option value="<?php echo $row_weeks['WeekNo']?>"><?php echo $row_weeks['WeekName']?></option>
          <?php
        } while ($row_weeks = mysql_fetch_assoc($weeks));
          $rows = mysql_num_rows($weeks);
          if($rows > 0) {
              mysql_data_seek($weeks, 0);
              $row_weeks = mysql_fetch_assoc($weeks);
          }
        ?>
        </select>
        </form>


<div id="mydata"></div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){



    // listen to change in monthselect
    $('#weekselect').change(function(){

        var week= $('#weekselect option:selected').val();

        //pass val to php
        $.post('test2.php',{week: week}, function(data) {
            //do something with the data
            $('div#mydata').html(data);
        });         
    });


});
</script>
</body>

</html>

该脚本从mysql db生成下拉列表并为其创建一个监听器,当select更改时,select的值将使用jquery传递给test2.php。返回的数据被添加到div #mydata

产生表的Test2如下

<?php


if (!isset($_SESSION)) {session_start();}
include('session.php');
require_once('Connections/dbc.php');
$open_week=$_SESSION['MM_OpenWeek'];
$week_selected=$_POST['week'];
$season=$_SESSION['MM_Season'];
?>


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<?php
echo '<p>Week selected: '.$week_selected .'<p>';
echo '<p>Open Week: '.$open_week .'<p>';
if ($week_selected>=$open_week) {
    echo '<p>Week Open<p>';
} else {
    echo '<p>Week Closed<p>';
}

//create recordset of fixtures for the week selected
$sql="SELECT * FROM q_games_stats WHERE WeekNo =".$week_selected . " and Season=". $season ." and at='Home' ORDER BY WeekNo ASC";
$rec_games=mysqli_query($dbc,$sql);
//create table using the recordset
?>

<div id="data_table">

        <table class="table" align="center">
        <th class="th" width="80px">Match Date</th>
        <th class="th" width="150px">Home Team</th>
        <th class="th" width="40px">Score</th>
        <th class="th" width="150px">Away Team</th>
        <th class="th" width="150px">Link</th>

<?php
    while ($row=mysqli_fetch_array($rec_games)) 
    {
?>
        <tr class="tr">
        <td class="td"><?php echo $row['MatchDate']?></td>
        <td class="td"><?php echo $row['TeamName']?></td>
        <td class="td"><?php echo $row['Score']?></td>
        <td class="td"><?php echo $row['OppName']?></td>
        <td class="td"><a href="#" target="_top">Link</a></td>
        </tr>
<?php
    }
?>



</table>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){



    // listen to change in monthselect
    $('#data_table a').click(function(){
            alert("link clicked");

    });


});
</script>
</body>
</html>

这会生成包含链接的表。表中的链接有一个事件监听器,当我点击它时会产生一个警报。

我想要做的不是在单击链接时生成警报而是要重现表,原因是当用户单击链接时它将运行一个脚本,该脚本将更改基础数据。表格,因此需要刷新表格。

我是否可以这样做,或者有更好的方法来做我想做的事情?

0 个答案:

没有答案