Передача переменных JavaScript для анонимной функции

Question

Я использую метод Ajax Jquery к асинхронно отправить запрос POST с пользователем "name" и "comment" значения, введенные в форму с идентификаторами name и comment соответственно и comment.php страницы возвращает сообщение HTML (успех или ошибка), которая отображается в div #info.

До сих пор все работает отлично, и комментарий добавляется в базу данных и отображается на странице обновления в таблице #comments. Теперь я просто хочу добавить имя пользователя и комментарий непосредственно в таблицу комментариев, но у меня есть проблема, я не могу получить доступ к переменным name и comment изнутри анонимной функции, которая вызывается внутри метода .done().

Вот мой код:

var name = $('#name').val(); 
var comment = $('#comment').val(); 

var data = "name="+name+"&comment="+comment; 

$.ajax(
     { 
      type: "POST", 
      url: "comment.php", 
      data: data // Provided form data 
     } 
    ).done 
    (
     function(data) // Returned data from URL endpoint 
     { 
      // Show returned message 
      $('#info').html(data); 

      var newRowContent = '<tr> <td>'+name+'</td> <td>'+comment+'</td> </tr>'; 

      $(newRowContent).appendTo($('#comments')); 
     } 
    ); 

Видимо, просто добавляя name и comment доводов анонимной функции не работает, а переменные объявляются вне сферы, поэтому я не знаю, почему они приводят в пустых строках при печати на столе. Я был бы признателен за помощь и объяснение того, чего я не получу здесь.

ОБНОВЛЕНИЕ: Вот пример JSFiddle того, что я пытаюсь сделать, и он работает здесь.

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

UPDATE: я наконец обнаружил причину, форму я использую заворачивают в div блок с display; none так, чтобы показывать только форму, когда пользователь нажимает на кнопку «Показать комментарии», и это работает. Проблема в том, что селектор значений jQuery $('').val(); обрабатывает «скрытые» входы по-разному, и я смог найти ответы от 2009-2011, которые работают для более старых версий jQuery, а не для этого.

Я надеюсь, что кто-то может ответить мне, как я могу выбрать по ID значение ввода, которое находится внутри div со стилем display: none, когда оно будет отображаться и заполняться пользователем.

Answer 1

Я установил вопрос, как указано в моем 3 обновления, проблема была входы были в div с display: none, что делает его спрятанным на загрузке страницы и отображается только позже, когда нажатие кнопки показывает ее. Проблема заключается в том, как это показано.

Мой старый подход копирования HTML, заключенный в div с display: none и идентификатором #commentForm в пустой DIV, используя append() метод, который вызвал идентификаторы ввода присутствовать 2 раза в странице и, таким образом, селектор $() возврата пустой стоимость.

То, что я сделал это изменить JQuery просто «отобразите» в HTML путем удаления style="display: none" как таковой:

$('#commentForm').removeAttr('style'); 

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

Answer 2

Это может быть вызвано «вне сферы действия». Вы можете попытаться вернуть данные (имя, комментарий), отправленные с вашей конечной точки URL, а затем получить эти значения. Что-то вроде:

function(data) // Returned data from URL endpoint 
     { 
      // First you need to parse the json data 
      data = JSON.parse(data); 
      // Show returned message 
      $('#info').html(data['info']); 

      // Then you get the data returned 
      var newRowContent = '<tr> <td>'+ data['name'] +'</td> <td>'+ data['comment'] +'</td> </tr>'; 

      $(newRowContent).appendTo($('#comments')); 
     } 

Off Конечно, это при условии, что вы возвращаете данные в формате JSON. Надеюсь, поможет! ;)