javascript - 重绘/刷新/设置超时 - 数据 xmlhttp.responseText

Question

我有一个从第二个选择框上的 onchange 调用的函数。然后将这 2 个值传递给 getlog.php，后者从表中的数据库返回值(使用数据表)。这一切都很棒。

我面临的问题是，对于使用 $('a.delete').click(function(e) {}) 的每一行，这会删除带有 jquery animate 的行，删除从 datatbase 但也重新计算 'days_left' 字段，我需要找到一种方法来刷新 getlog.php 中的数据，一旦 $('a.delete').click 有完成。

我已经尝试在 ajax 成功时重绘数据表并使用 fnReloadAjax() 但似乎都不起作用所以我发现 xmlhttp set timeout 但这并不是我真正想要的解决方案在 $('a.delete').click(function(e) {}

中运行重绘/刷新

即使我使用 xmlhttp set timeout，它也会丢失变量，因此在 firebug 中它会出现“undefined”。

有人知道如何解决我的问题吗？希望我已经正确解释了，提前致谢

表格

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

?>

Answer 1

您需要决定是将函数命名为 showUsers 还是 showlog，因为您的 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');
            });
        }
    });
});

当然，我还没有测试过它，但它至少应该能像以前一样工作:)