1

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

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

我曾尝试在 ajax 成功和使用时重绘数据表，fnReloadAjax()但似乎都不起作用，所以我发现 xmlhttp 设置超时，但这并不是我想要的解决方案，因为我想在其中运行重绘/刷新$('a.delete').click(function(e) {}

即使我使用 xmlhttp 设置超时，它也会丢失变量，所以在萤火虫中它会出现“未定义”。

有人知道我如何解决我的问题吗？希望我已经正确解释了，在此先感谢

形式 

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

?>
4

2 回答 2

2

您需要决定是命名函数showUsers还是showlog，因为您的 HTML 引用了一个，而您的 JavaScript 定义了另一个。

我建议稍微清理一下代码。例如，您的代码中有相当一部分用于重新实现 jQuery 的$.ajax()方法。@GregRoss 对使用jQuery.live()or的评论提出了一个很好的观点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');
            });
        }
    });
});

当然，我还没有测试过这个，但它至少应该和以前一样好:)

于 2012-08-31T19:42:41.563 回答
1

你可以让你的函数$('a.delete').click(function(e, callback()) {}接受一个回调参数并传递它fnReloadAjax()。

更多关于回调的信息可以在这里找到（stackoverflow）

于 2012-09-01T06:08:37.353 回答