Пропускное значение проблемы через ajax

Question

У меня есть таблица HTML на моем веб-сайте, где я нажимаю на ячейку, а затем могу ее редактировать. Теперь я пытаюсь вернуть измененное значение в мою базу данных с помощью ajax. Я тестировал щелчок для правильной работы, редактируемый контент работал правильно и что ajax отправляет на правильный URL-адрес, используя простой «привет» на updatedatabase.php и видя, что он возвращается через предупреждение. Когда я пытаюсь вытащить данные из ajax в updateddatabase.php, у меня возникают проблемы. Я считаю, что, возможно, $ (this) .val() может быть не тем, что я хочу получить содержимое ячейки, которую я только что редактировал с помощью contenteditable? Причина, по которой я говорю это, состоит в том, что похоже, что пустое значение передается на вторую страницу. Вот кусок моего кода для клика/контент для редактирования/AJAX на главной странице:

$('td').click(function(){ 

     var val=($(this).siblings().first().text()); 

     var col = $(this).parent().children().index($(this)); 

     $(this).prop('contenteditable', true); 

     //var row = $(this).parent().parent().children().index($(this).parent()); 

     //alert('Date: ' + val + ', Column: ' + col); 

     $(this).bind('input propertychange', function() { 

      //On key stroke 

      $.ajax({ 
       method: "POST", 
       url: "updatedatabase.php", 
       data: { content: $(this).val() } 
      }) 
       .done(function(msg) { 
       alert("Data Saved: " + msg); 
      }); 

     }); 
    }); 

и вот что я сидел на updatedatabase.php. Я просто попробовал протестировать значение, проходящее сейчас.

<?php 
    if(array_key_exists("content", $_POST)) { 

     echo $_POST['content']; 
    } 

?> 

Надеюсь, это легко исправить, как я полагаю, все это может быть просто с $ (это) .val(), но я не уверен, что я должен изменить его? Спасибо за помощь!!

Answer 1

Часть проблемы заключается в том, что вы на самом деле не захватывая значение ячейки таблицы для редактирования. Используя новую версию JQuery в моем примере кода я заменил свой bind() с keyup() поскольку не нужно быть любой делегации:

$('td').click(function() { 
    console.log('clicked'); 
    $(this).prop('contenteditable', true); 

    $(this).keyup(function() { // get the new value as soon as the key is released 

    console.log($(this).html()); 

    }); 
}); 

https://jsfiddle.net/w9e0d5wm/

Как уже упоминалось в комментариях @adeneo, ячейки таблицы имеют нет ценности, которую вы можете получить с помощью val(). В моем примере я использовал $(this).html(), чтобы получить текст внутри измененного <td>, но вы также можете использовать .text().

Вы должны изменить data: { content: $(this).val() } на номер data: { content: $(this).html() } или data: { content: $(this).text() }, чтобы отправить переменное значение в ваш AJAX. Теперь, если вы посмотрите на консоль, вы увидите что-то в курсе, и что-то вернется.

Answer 2

Try «делегат» вместо «привязки»