redraw/refresh/set timeout - data xmlhttp.responseText

Question

I have a function which is called from onchange on the second select box. The 2 values then get passed to getlog.php which returns values back from database in a table (using datatables). This is all working fantastic.

The problem I am facing is that for each row im using $('a.delete').click(function(e) {}) and this removes the row with jquery animate, deletes from datatbase but also re-calculates the 'days_left' field, I need to find a way to be able to refresh the data from getlog.php once the $('a.delete').click has completed.

I have tried redrawing the datatable on ajax success and using fnReloadAjax() but neither seemed to work so I have found xmlhttp set timeout but this is not really the solution i was after as i would like to run the redraw/refresh in $('a.delete').click(function(e) {}

Even when i use xmlhttp set timeout it loses the variables so in firebug it comes up with 'undefined'.

Does anybody know how I could solve my issue? Hope I have explained it properly, thanks in advance

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

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

?>

Try a bit of refactoring, e.g., move the $('a.delete').click function outside of showLog and use jquery.live to handle the click event. Also, drop the setTimeout(...) and add a call to showLog inside the refactored click handler. — Greg Ross, Aug 28 '12 at 05:46

score 2 · Answer 1 · answered Aug 31 '12 at 19:42

You'll need to decide whether to name the function showUsers or showlog, as your HTML references one and your JavaScript defines the other.

I would suggest cleaning up the code a bit. For instance, a fair portion of your code here is taken up re-implementing jQuery's $.ajax() method. @GregRoss makes a good point with his comment regarding using jQuery.live() or jQuery.on().

So, as a quick refactor:

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

I haven't tested this, of course, but it should work at least as well as before :)

score 1 · Answer 2 · edited May 23 '17 at 10:24

1

You could make your function $('a.delete').click(function(e, callback()) {} take a callback argument and pass it fnReloadAjax().

More information about callbacks can be found here (stackoverflow)

edited May 23 '17 at 10:24

Community

1
1

answered Sep 01 '12 at 06:08

Pablo Jomer

9,870
11
54
102

redraw/refresh/set timeout - data xmlhttp.responseText

2 Answers2