2012-08-24 18 views
1

我有一個函數,從onchange在第二個選擇框中調用。 然後將2個值傳遞給getlog.php,該getlog.php從表中的數據庫返回值(使用數據表)。 這一切都很棒。刷新/刷新/設置超時 - 數據xmlhttp.responseText

我面臨的問題是,對於每一行im使用$('a.delete').click(function(e) {}),這刪除行jquery動畫,從數據庫刪除,但也重新計算'days_left'字段,我需要找到一種方法能夠一旦$('a.delete').click完成,刷新getlog.php中的數據。

我試圖重新繪製在阿賈克斯成功的DataTable,並使用fnReloadAjax()但既不似乎工作,所以我發現XMLHTTP設定的超時,但這並不是真正的解決方案,我是後我想運行重繪/刷新$('a.delete').click(function(e) {}

即使當我使用xmlhttp設置超時它失去了變量,所以在螢火蟲它出現'未定義'。

有誰知道我可以如何解決我的問題? 希望我已經適當解釋它,在此先感謝

FORM

<select id="employee_user"> 
<option value="">--</option> 
<option value="333">Test User</option> 
<option value="111">Testing Testing</option>  
</select> 

<select id="they" onchange="showUser(this.value, employee_user.value)"> 
<option value="">--</option> 
<option value="20120801" class="333" title="Test User">20120801</option> 
<option value="20110801" class="333" title="Test User">20110801</option> 
<option value="20100801" class="333" title="Test User">20100801</option> 
<option value="20120801" class="111" title="Testing Testing">20120801</option> 
<option value="20110801" class="111" title="Testing Testing">20110801</option> 
</select> 

</form> 

功能

function showlog(str, username) 
    { 
    if (str=="") 
     { 
     document.getElementById("txtHint").innerHTML=""; 
     return; 
     } 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
      var $ellttable = $('#view_employee_log_table').dataTable({ 
      "iDisplayLength": 30,  
      "sDom": '<"clear">t>', 
      "aaSortingFixed": [[3,'desc']], 
      "aoColumns": [ 
       { "bSortable": false }, 
       { "bSortable": false }, 
       { "bSortable": false }, 
       { "bSortable": false } 
       ] 
     });  
     var $eltable = $('#view_employee_log_table1').dataTable({ 
      "iDisplayLength": 30,  
      "sDom": '<"clear">t>', 
      "aaSortingFixed": [[3,'desc']], 
      "aoColumns": [ 
       { "bSortable": false }, 
       { "bSortable": false }, 
       { "bSortable": false }, 
       { "bSortable": false } 
       ] 
     }); 
     $('a.delete').click(function(e) { 
     e.preventDefault(); 
     var parent = $(this).parent(); 
     $.ajax({ 
      type: 'get', 
      url: 'getuser.php', 
      data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''), 
      beforeSend: function() { 
      parent.animate({'backgroundColor':'#fb6c6c'},300); 
      }, 
      success: function() { 
      parent.slideUp(300,function() { 
      $ellttable.fnDraw(); 
      $eltable.fnDraw(); 
      }); 
      } 
     }); 
     }); 

     } 
     } 
    xmlhttp.open("GET","getlog.php?username="+username+"&year="+str,true); 
    xmlhttp.send(); 
    setTimeout(showlog, 1500); 
    } 

GETLOG.PHP

<?php 

$year = $_GET["year"]; 
$username = $_GET["username"]; 

$is_academic_result = mysql_query('SELECT * FROM holiday_entitlement_academic WHERE userid = \'' . $username . '\' AND academic_year = \'' . $year . '\' '); 
$is_business_result = mysql_query('SELECT * FROM holiday_entitlement_business_manual WHERE userid = \'' . $username . '\' AND academic_year = \'' . $year . '\' '); 

if($is_academic = mysql_fetch_array($is_academic_result)) { 

echo'<div style="float:left; width:400px;">'; 

echo'<table width="100%"> 
<tr> 
<td><strong>Name:</strong></td> 
<td>'.$is_academic['employee'].'</td> 
</tr> 
<tr> 
<td><strong>Entitlement:</strong></td> 
<td>'.$is_academic['entitlement'].' '.$is_academic['units'].'</td> 
</tr> 
<tr> 
<td><strong>Department/Division:</strong></td> 
<td>'.$is_academic['division'].'</td> 
</tr> 
<tr> 
<td><strong>Line Manager:</strong></td> 
<td>'.$is_academic['line_manager'].'</td> 
</tr> 
</table>'; 
echo'<br/>'; 

echo'</div>'; 

echo'<div style="float:right; width:400px;">'; 

echo'<table width="100%"> 
<tr> 
<td><strong>Days Left:</strong></td> 
<td>'.$is_academic['days_left'].'</td> 
</tr> 
</table>'; 
echo'<br/>'; 

echo'</div>'; 


echo'<table class="dataTable" id="academic_days_table" cellpadding="2" cellspacing="2" width="100%"> 
<thead> 
<th>Start Date</th> 
<th>End Date</th> 
<th>'.$is_academic['units'].' to be taken</th> 
<th></th> 
</thead>'; 

echo '<tr>'; 

echo '<td>-</td>'; 
echo '<td>-</td>'; 
echo '<td>-</td>'; 
echo '<td></td>'; 

echo '</tr>'; 


$input = $is_academic['entitlement']; 
} 


else if($is_business = mysql_fetch_array($is_business_result)) { 

echo'<div style="float:left; width:400px;">'; 
echo'<table width="100%"> 
<tr> 
<td><strong>Name:</strong></td> 
<td>'.$is_business['employee'].'</td> 
</tr> 
<tr> 
<td><strong>Entitlement:</strong></td> 
<td>'.$is_business['new_entitlement'].' '.$is_business['units'].'</td> 
</tr> 
<tr> 
<td><strong>Department/Division:</strong></td> 
<td>'.$is_business['division'].'</td> 
</tr> 
<tr> 
<td><strong>Line Manager:</strong></td> 
<td>'.$is_business['line_manager'].'</td> 
</tr> 
</table>'; 
echo'<br/>'; 
echo'</div>'; 


echo'<div style="float:right; width:400px;">'; 
echo'<table width="100%"> 
<tr> 
<td><strong>Days Left:</strong></td> 
<td>'.$is_business['days_left'].'</td> 
</tr> 
</table>'; 
echo'<br/>'; 
echo'</div>'; 


echo'<table class="dataTable" id="business_days_table" cellpadding="2" cellspacing="2" width="100%"> 
<thead> 
<th>Start Date</th> 
<th>End Date</th> 
<th>'.$is_business['units'].' to be taken</th> 
<th></th> 
</thead>'; 

echo '<tr>'; 

echo '<td>-</td>'; 
echo '<td>-</td>'; 
echo '<td>-</td>'; 
echo '<td></td>'; 

echo '</tr>'; 


$input = $is_business['new_entitlement']; 
} 

else {echo 'You currently dont have a record for this academic year. ';} 


//$requests_result = mysql_query(' 
//SELECT * 
//FROM holiday_entitlement_business_manual 
//LEFT JOIN requests ON holiday_entitlement_business_manual.employee = requests.employee 
//WHERE employee = \'' . $username . '\' AND academic_year = \'' . $acyear . '\' '); 


$requests_result = mysql_query('SELECT * FROM requests WHERE userid = \'' . $username . '\' AND approved = 1 AND academic_year = \'' . $year . '\' ORDER BY start_date ASC'); 

$remainder = 0; 

while($requests = mysql_fetch_array($requests_result)) { 

$start_date = new DateTime($requests['start_date']); 
$end_date = new DateTime($requests['end_date']); 

$timestamp_start_date = $start_date->getTimestamp(); 
$timestamp_end_date = $end_date->getTimestamp(); 

$formatted_start_date = date("d M Y", $timestamp_start_date);   
$formatted_end_date = date("d M Y", $timestamp_end_date); 

$remainder = ($remainder == 0) ? $input : $remainder; 
$out = $remainder - $requests['days']; 
if($out < 0){ 
     break; 
} 
$remainder = $out; 


echo'<tr class="record" id="record-',$requests['id'],'" title="',$requests['user'],'" lang="',$requests['academic_year'],'">'; 
echo'<td>'.$formatted_start_date.'</td>'; 
echo'<td>'.$formatted_end_date.'</td>'; 
echo'<td>'.$requests['days'].'</td>'; 
echo'<td><a href="?delete=',$requests['id'],'&employee=',$requests['user'],'&acyear=',$requests['academic_year'],'" class="delete"><img src="images/cross.png"></a></td>'; 
echo'</tr>'; 
} 

echo'</table>'; 

?> 
+0

發現試了一下重構,例如,移動$(「a.delete」)。單擊showLog之外的功能和使用jquery.live處理更多信息點擊事件。此外,刪除setTimeout(...)並在重構的點擊處理程序中添加對showLog的調用。 –

回答

2

您需要決定是否命名函數showUsersshowlog,因爲您的HTML引用了一個,而您的JavaScript定義了另一個。

我建議清理一下代碼。例如,你的代碼的一小部分被重新實現jQuery的$.ajax()方法。 @GregRoss在他對使用jQuery.live()jQuery.on()的評論中說得很好。

所以,作爲一個快速重構:

function showlog(str, username) 
{ 
    if (!(str)) 
    { 
     $("#txtHint").html(""); 
     return; 
    } 
    $.ajax({ 
     url: "getlog.php?username="+username+"&year="+str, 
     type: 'GET', 
     success: function (data) { 
      $('#txtHint').html(data); 
      var $ellttable = $('#view_employee_log_table').dataTable({ 
       "iDisplayLength": 30,  
       "sDom": '<"clear">t>', 
       "aaSortingFixed": [[3,'desc']], 
       "aoColumns": [ 
        { "bSortable": false }, 
        { "bSortable": false }, 
        { "bSortable": false }, 
        { "bSortable": false } 
       ] 
      }); 
      var $eltable = $('#view_employee_log_table1').dataTable({ 
       "iDisplayLength": 30,  
       "sDom": '<"clear">t>', 
       "aaSortingFixed": [[3,'desc']], 
       "aoColumns": [ 
        { "bSortable": false }, 
        { "bSortable": false }, 
        { "bSortable": false }, 
        { "bSortable": false } 
       ] 
      }); 
     } 
    }); 
} 

// Somewhere, maybe in document.ready: 
$('body').on('click', 'a.delete', function(e) { 
    e.preventDefault(); 
    var parent = $(this).parent(); 
    $.ajax({ 
     type: 'get', 
     url: 'getuser.php', 
     data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''), 
     beforeSend: function() { 
      parent.animate({'backgroundColor':'#fb6c6c'},300); 
     }, 
     success: function() { 
      parent.slideUp(300,function() { 
       $('#view_employee_log_table').dataTable('fnDraw'); 
       $('#view_employee_log_table1').dataTable('fnDraw'); 
      }); 
     } 
    }); 
}); 

我沒有測試過這一點,當然,但它應該工作至少還有之前:)

1

你可以讓你的函數$('a.delete').click(function(e, callback()) {}採取回調參數並通過它fnReloadAjax()

約回調可以在這裏(stackoverflow