使用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> 

和這個網站：

<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中的div中的php頁面。但它不起作用。

什麼似乎是問題？ :(

Answer 1

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

爲了讓jQuery選擇包含你的選擇，你需要以確保它運行後選擇元素在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>