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

时间：2012-08-24 08:39:51

标签： javascript jquery xmlhttprequest

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

我遇到的问题是，对于使用$('a.delete').click(function(e) {})的每一行，这将删除带有jquery动画的行，从datatbase删除但是还要重新计算'days_left'字段，我需要找到一种方法$('a.delete').click完成后，能够刷新getlog.php中的数据。

我已经尝试重新绘制ajax成功并使用fnReloadAjax()的数据表，但似乎都没有工作，所以我发现xmlhttp设置超时但这不是我之后的解决方案，因为我想运行重绘/在$('a.delete').click(function(e) {}

中刷新

即使我使用xmlhttp设置超时，它也会丢失变量，所以在firebug中它会出现'undefined'。

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

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

?>

2 个答案:

答案 0 :(得分：2)

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

我建议稍微清理一下代码。例如，这里代码的相当一部分用于重新实现jQuery的$.ajax()方法。关于使用jQuery.live()或jQuery.on()的评论，@ GregRoss提出了一个很好的观点。

所以，作为快速重构：

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 :(得分：1)

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

有关回调的更多信息，请访问此处（stackoverflow）

相关问题
最新问题