1

2 番目の選択ボックスで onchange から呼び出される関数があります。次に、2 つの値が getlog.php に渡され、データベースからテーブルに値が返されます (datatables を使用)。これはすべて素晴らしいです。

私が直面している問題は、使用している行ごとに$('a.delete').click(function(e) {})、jquery animate で行を削除し、datatbase から削除するだけでなく、「days_left」フィールドを再計算することです。getlog からデータを更新できる方法を見つける必要があります。 .php$('a.delete').clickが完了したら。

ajaxの成功と使用でデータテーブルを再描画しようとしましfnReloadAjax()たが、どちらも機能していないようでしたので、xmlhttpがタイムアウトを設定していることがわかりましたが、再描画/更新を実行したいので、これは実際には私が求めていた解決策ではありません$('a.delete').click(function(e) {}

xmlhttp set timeout を使用しても変数が失われるため、firebug では「未定義」が表示されます。

私の問題を解決する方法を知っている人はいますか? 私はそれを適切に説明したことを願っています、事前に感謝します

形 

<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

HTML が 1 つを参照し、JavaScript がもう 1 つを定義しているため、関数に と のshowUsersどちらの名前を付けるかを決定する必要があります。showlog

コードを少し整理することをお勧めします。たとえば、ここにあるコードのかなりの部分は、jQuery の$.ajax()メソッドの再実装に使用されています。jQuery.live()@GregRoss は、 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 に答える