Ajax - Issue through POST via

Question

Мой код работал отлично, но мне не нравилось событие ввода, которое я использовал, поскольку оно происходит каждый раз, когда нажата клавиша. Этот Ajax должен обновить базу данных, поэтому я искал способ задержаться на несколько секунд, прежде чем отправить, который показал мне еще один удивительный член. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что переменные POST больше не обрабатывают Ajax по какой-то причине, и я не могу понять, почему.

Мой вопрос: почему это происходит и как я могу настроить его, чтобы исправить это.

Ниже приведен код, который отлично работает, но использует входное событие, второе - это код, который я хочу использовать сейчас, но Ajax не пропускает переменные.

Старый Код:

  $('td').on('input',function() { 
      $.ajax({ 
       method: "POST", 
       url: "updatedatabase.php", 
       data: { 
        content: $(this).text(), 
        date: $(this).siblings().first().text(), 
        prod: $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').text(), 
        old: old 
       } 
      }) 
       .done(function(msg) { 
       alert(msg); 
      }); 

      toastr.options = { 
       "positionClass": "toast-top-center", 
       "onclick": null, 
       "timeOut": "2500", 
      } 

      toastr.info(old,'Your Previous Amount Was:'); 

     }); 

Новый код не работает правильно:

  var saveTimeout = false; 

     $('td').on('input', function() { 

      if(saveTimeout) clearTimeout(saveTimeout); 

      saveTimeout = setTimeout(function() { 
       console.log($(this)); 
       $.ajax({ 
       method: "POST", 
       url: "updatedatabase.php", 
       data: { 
        content: $(this).text(), 
        date: $(this).siblings().first().text(), 
        prod: $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').text(), 
        old: old 
       } 
      }) 
       .done(function(msg) { 
       alert(msg); 
      }); 

      toastr.options = { 
       "positionClass": "toast-top-center", 
       "onclick": null, 
       "timeOut": "2500", 
      } 

      toastr.info(old,'Your Previous Amount Was:'); 

      }, 2500); 
     }); 

Отрывок:

  var old; 
 
      
 
      $('td').click(function(){ 
 
       
 
       old=$(this).text(); 
 
       
 
       editclick="yes;" 
 
       
 
       $(this).prop('contenteditable', true); 
 
       
 
       // var days = 7; 
 
       // var result = $(this).siblings().first().text(); 
 
       // result.setDate(result.getDate() + days); 
 
       // alert(result); 
 
       
 
      }); 
 
      
 
      var saveTimeout = false; 
 
      
 
      $('td').on('input', function() { 
 
      
 
       if(saveTimeout) clearTimeout(saveTimeout); 
 
       saveTimeout = setTimeout(function() { 
 
        console.log($(this)) 
 
        $.ajax({ 
 
         method: "POST", 
 
         url: "updatedatabase.php", 
 
         data: { 
 
          content: $(this).text(), 
 
          date: $(this).siblings().first().text(), 
 
          prod: $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').text(), 
 
          old: old 
 
        } 
 
       }) 
 
        .done(function(msg) { 
 
        alert(msg); 
 
       }); 
 
       
 
       toastr.options = { 
 
        "positionClass": "toast-top-center", 
 
        "onclick": null, 
 
        "timeOut": "2500", 
 
       } 
 
       
 
       toastr.info(old,'Your Previous Amount Was:'); 
 
       
 
       }, 2500); 
 
      }); 
 
      
 
      
 
      $("td").hover(function(){ 
 
           
 
       
 
        
 
       $(this).addClass('highlight').siblings().first().addClass('highlight'); 
 

 
       $('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight'); 
 
       
 
       
 
      },function(){ 
 
       
 
       
 
        
 
       $(this).removeClass("highlight").siblings().first().removeClass('highlight'); 
 

 
       $('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight'); 
 
       
 
       
 
      });

table,th, td { 
 
    
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
     
 
} 
 

 
.highlight { 
 
    
 
    background-color:#E0E0E0; 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" rel="stylesheet"/> 
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Item #</th> 
 
    <th>1234567</th> 
 
    <th>7654321</th> 
 
    <th>5678945</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Product</th> 
 
    <th><u>22 ounce Dark</u></th> 
 
    <th><u>12count 4oz Dark</u></th> 
 
    <th><u>24count 6oz TJ</u></th> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-03</th> 
 
    <td>13587</td> 
 
    <td>2203</td> 
 
    <td>4111</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-04</th> 
 
    <td>14111</td> 
 
    <td>3247</td> 
 
    <td>4332</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-05</th> 
 
    <td>13212</td> 
 
    <td>3101</td> 
 
    <td>3911</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-06</th> 
 
    <td>16335</td> 
 
    <td>3299</td> 
 
    <td>4001</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-07</th> 
 
    <td>15421</td> 
 
    <td>3100</td> 
 
    <td>4078</td> 
 
    </tr> 
 
</table>

Answer 1

Таким образом, что $(this) не относится к полю ввода, но к объекту окна здесь проблема. Это происходит потому, что вы завернули функцию внутри обработчика события в setTimeout, что изменяет контекст выполнения функции.

Но это должно быть поправимо, если вы просто сохранить ссылку на поле ввода в локальную переменную, а затем использовать его внутри таймаута-эд функция, как это (что слово?):

$('td').on('input', function() { 

    var _this = $(this); // preserve reference to the input field here 

    if(saveTimeout) clearTimeout(saveTimeout); 

    // replace $(this) with _this everywhere inside this function 
    saveTimeout = setTimeout(function() { 
      $.ajax({ 
      method: "POST", 
      url: "updatedatabase.php", 
      data: { 
       content: _this.text(), 
       date: _this.siblings().first().text(), 
       prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(), 
       old: old 
      } 
     })