使用jQuery在div中加載PHP頁面

Question

我有這個腳本：

<script type='text/javascript' src='js/jquery-1.4.4.mi.js'></script>
<script type='text/javascript'>
 $('.filterMonth').change(function(){ 
alert('ijijiji');
$.ajax({ 
url: 'ajax/filterMandays.php', 
//type: 'GET', 
success: function(data){ 
  //data is returned back 
  $('#mandayTable').html(data); 
} 
}); 

}); 
</script>

和這個HTML：

<select name ="filterMonth">
        <?php
        $array_month = array("January","February","March","April","May","June","July","August","September","October","November","December");

        foreach($array_month as $key => $month)
        {
            $value_month = $key+1;
        echo "<option value = '$value_month'>$month</option>";
        }

        ?>
        </select>
        -
        <select name = "filterYear" onChange = "filter(filterMonth.value, filterYear.value)">
        <?php
        $curYear = date('Y');
        for($i = 1990; $i<=$curYear+10; $i++)
        {
        if($i == $curYear)
        {
        echo "<option value = '$i' selected = 'selected'>$i</option>";
        }
        else
        {
        echo "<option value = '$i'>$i</option>";
        }
        }
        ?>
        </select>
        </td>
        </tr>
        </br>
        </br>
        <tr>
        <div id="mandayTable"></div>

和這個PHP頁面：

<?php
include("all.php");


        $q = "SELECT md.mandays_id,md.employeenum,md.month,md.year,md.required_man_days,d.firstname,d.lastname 
        FROM tbl_mandays md,tbl_employee_details d 
        WHERE md.active = '1' 
        AND md.employeenum = d.employeenum 
        AND md.month = '10';";



        $res = $db->Execute($q);

        echo "<table border = 1>";

        echo "<tr><th>Employee Number</th><th>First Name</th><th>Last Name</th><th>Month-Year</th><th>Required Man Days</th><th>Edit/Delete</th></tr>";

        while($rows = $res->FetchRow()) 
        //for($i=0;$i<5;$i++)
        {
                        //iterating through // check if employee 
                        // // if(isset($row[])) {           }
                        $mandays_id = $rows[0];

                        $empnum = $rows[1];

                        $month_year = $rows[2] ."-" .$rows[3];

                        $required_man_days = $rows[4];

                        $firstname = $rows['month'];

                        $lastname = $rows[6];




                        //echo approvers here are not taken
                        //<a href=\"view_team.php?id=".$empnum."\" -> for someone to view the people beneath them (like org tree)
                        echo "<tr><td>".$empnum  . "</td><td>".$firstname ."</td><td>".$lastname ."</td><td>" . $month_year ."</td><td>" .$required_man_days  . "</td><td width = \"200\" align = \"center\"><a href = 'edit_mandays.php?mandays_id=$mandays_id');'>Edit/Delete</a></td></tr>";
        }



        echo "</table>";


        ?>

一旦更改了“ filterMonth”，腳本基本上應該將html中的php頁面加載到html中。 但這不起作用。

似乎是什么問題？ :(

Answer 1

jQuery中的選擇器是$('.filterMonth')但您的選擇框沒有filterMonth類。 您需要將其更改為$('select[name=filterMonth]') 。

為了使jQuery選擇器包含您的選擇，您需要確保它在Select元素位於DOM中之后運行（即：降低HTML），或者在文檔加載完成后運行JavaScript，例如：

<script type='text/javascript' src='js/jquery-1.4.4.mi.js'></script>
<script type='text/javascript'>
  jQuery(function() {
    // do your DOM selections here, this function only runs once the document is loaded
  });
</script>