Jquery Autocomplete URL на основе выбранного значения из другого автозаполнения

Question

У меня есть форма, позволяющая пользователям отправлять расписания. Это состоит из нескольких строк таблицы для каждого дня недели. Каждая строка создается вызовом AddRow, который добавляет HTML, а также добавляет поле автозаполнения в поле JobNumber, чтобы пользователь мог найти и выбрать нужную работу.

Теперь мне нужно добавить второй автозаполнения в поле «Описание», чтобы позволить пользователю выбирать задачи, созданные для этой работы. Поэтому мне нужно передать параметр в исходном URL, задав задание, которое было выбрано в предыдущем поле.

Однако, когда я пытаюсь найти значение Job, он всегда возвращает «undefined».

Что мне не хватает?

Вот упрощенная версия того, что у меня есть:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="https://code.jquery.com/ui/1.8.7/jquery-ui.min.js"></script> 

<script> 

function AddRow(day) { 

    var count = 1; 

    var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme"]; 

    var row = "<tr>" + 
     "<td>&nbsp;</td>" + 
     "<td>" + 
      "<input type='text' style='width:100px' id='" + day + "[" + count + "].JobNumber' name='" + day + "[" + count + "].JobNumber'>" + 
      "<input type='hidden' style='width:100px' id='" + day + "[" + count + "].JobID' name='" + day + "[" + count + "].JobID'>" + 
     "</td>" + 
     "<td><input type='text' size='50' id='" + day + "[" + count + "].Description' name='" + day + "[" + count + "].Description' class='Description' data-day='" + day + "' /></td>" + 
     "<td><input type='text' size='6' id='" + day + "[" + count + "].Start' name='" + day + "[" + count + "].Start' class='numbersOnly' /></td>" + 
     "<td><input type='text' size='6' id='" + day + "[" + count + "].Finish' name='" + day + "[" + count + "].Finish' class='numbersOnly' /></td>" + 
     "<td><input type='text' size='6' id='" + day + "[" + count + "].Travel' name='" + day + "[" + count + "].Travel' class='numbersOnly' /></td>" + 
     "<td>" + 
      "<input type='hidden' id='" + day + "[" + count + "].Hrs' name='" + day + "[" + count + "].Hrs' class='Hrs' />" + 
      "<input type='text' size='6' id='" + day + "[" + count + "].Hours' name='" + day + "[" + count + "].Hours' class='Hours numbersOnly' />" + 
      "<select name='" + day + "[" + count + "].Mins'>" + 
       "<option value='0'>0</option>" + 
       "<option value='25'>0.25</option>" + 
       "<option value='5'>0.5</option>" + 
       "<option value='75'>0.75</option>" + 
      "</select>" + 
     "</td>" + 
     "</tr>"; 
    $("#Table_" + day).append(row); 

    $("input[id$='JobNumber']").autocomplete({ 
     source: availableTags, 
     select: function(event, ui) { 
      $("input[id$='JobID']", $(this).parent().parent()).val(ui.item.JobID); 
     }, 
     change: function(ev, ui) { 
      if (!ui.item) 
       $(this).val(""); 
     } 
    }); 

    $("input[id$='Description']").autocomplete({ 
     source: function (request, response) { 
      // get the selected job number 
      var jobID = $("input[id$='JobNumber']", $(this).parent().parent()).val(); 

      alert(jobID); 

      if (request.term.length > 2) { 
       $.ajax({ 
        url: "/Tasks/AJAXGetByJobNumber/" + jobID, 
        data: { Task: request.term }, 
        dataType: "json", 
        success: function (data) { 

         temp = $.map(data, function (item) { 
          return { 
           label: item.label, 
           value: item.value, 
           JobID: item.JobID 
          } 
         }); 
         temp.unshift({ label: "Non-Chargeable Work", value: "Non-Chargeable Work", JobID: null }); 
         response(temp); 
        } 
       }); 
      } 
     }, 
    }); 

} 


</script> 

<table id="Table_Monday"> 

</table> 

<a href="#" onclick="AddRow('Monday')"/>Add</a> 

Я добавил предупреждение там, чтобы проверить значение, но его возвращение «неопределенными» каждый раз. Я пробовал поля JobID и JobNumber, ни одна из которых не работает.

Answer 1

Короткий ответ: $(this) матчи ничего, замените его $(this.element)

---

Это происходит потому, что source является вариант виджета, а не событие. Таким образом, это (псевдо-) обработчик не связан с экземпляром узла

т.е. Внутри функции source, this ссылается на виджет, а не элемент, в результате чего селектор ничего

не соответствует Чтобы получить доступ к элементу, просто используйте this.element:

var jobID = $("input[id$='JobNumber']", $(this.element).parent().parent()).val(); 

Вот скрипку с кодом: https://jsfiddle.net/uxpeytxn/

Примечание: это относится только к source, в select, change и других обработчиков событий, this ссылается на элемент, как и следовало ожидать