Настройка jqueryui перед визуализацией элемента

Question

При создании ячеек таблицы с очень крутыми параметрами мне нужно сделать два шага. Сначала я создаю ячейку таблицы как объект DOM в javascript со всеми «нормальными» функциями, например, это флажок, выбор, ввод, ссылка и т. Д. Затем мне нужно поместить таблицу на страницу, чтобы сделать следующий шаг, который я рассматриваю как расширенную функциональность, такую ​​как автозаполнение jqueryui и выбор даты. Удивительно иметь эти выпадающие файлы для пользователя.

У меня есть эта работа, однако мне нужно сделать два звонка. Первый, чтобы createTableCell, затем я визуализирую, тогда мне нужно сделать еще один вызов postRenderTableFunctions, чтобы получить функциональность автозаполнения. Поэтому возникает вопрос, почему второй вызов, что это за jqueryui, который не будет работать при первом вызове. Вы можете увидеть комментарий в разделе создания ввода, где я попытался запустить автозаполнение.

function createTableCell(name, td_def) 
{   
     var cell=document.createElement('td'); 
     if(td_def['type'] == 'date') 
     { 
      var element = document.createElement('input'); 
      element.name = name; 
      element.id = name;    
      cell.appendChild(element); 

      $('#' + element.id).datepicker(     
      { 
       dateFormat: 'yy-mm-dd', 
       onSelect: function() 
       { 
        $(this).focus(); 
       }, 
       onClose: function (dateText, inst) 
       { 
        $(this).select(); 
       } 
      }); 

     } 
     else if(td_def['type'] == 'checkbox') 
     { 


      element = document.createElement('input'); 
      element.type = 'checkbox'; 
      element.name = name; 
      element.id = name; 
      /*if(this.tdo[r][td_def['db_field']]['data'] == 1) 
      { 
       element.checked = true; 
      }*/ 
      cell.appendChild(element);  



     } 
     else if (td_def['type'] == 'select') 
     { 
      element = document.createElement('select'); 
      element.name = name; 
      element.id = name; 
      var option = document.createElement('option'); 
      option.value = 'NULL'; 
      option.appendChild(document.createTextNode("Select...")); 
      element.appendChild(option); 
      for (var j in td_def['select_names']) 
      { 
       option = document.createElement('option'); 
       option.value = td_def['select_values'][j]; 
       option.appendChild(document.createTextNode(td_def['select_names'][j])); 
       element.appendChild(option); 
      } 
      cell.appendChild(element); 
     } 
     else if (td_def['type'] == 'tree_select') 
     { 
      element = document.createElement('select'); 
      element.id = name; 
      element.name = name; 


      var option = document.createElement('option'); 
      option.value = 'NULL'; 
      option.appendChild(document.createTextNode("Select...")); 
      element.appendChild(option); 
      var level = 0; 
      //console.log(td_def['select_array']); 
      this.addNestedSelectOptions(element, td_def['select_array'], level); 




      if (typeof td_def['properties'] !== 'undefined') 
      { 
       for (var index in td_def['properties']) 
       { 
        eval('element.' + index + '= ' + td_def['properties'][index] + ';'); 

       } 
      } 
      cell.appendChild(element); 
     }    
     else if (td_def['type'] == 'input') 
     { 
      element = document.createElement('input'); 
      element.type = 'text'; 
      element.id = name; 
      element.name = name; 
      cell.appendChild(element); 
      /*  
      if(typeof td_def['autoComplete'] != 'undefined') 
      { 

       console.log('attempting Autocomplete'); 
       $("#" + name).autocomplete({ 
        source: function(request, response) 
        { 
        $.ajax(
        { 
          url: td_def['autoComplete']['url'], 
          type: 'GET', 
          async: true, 
          data: 
          { 
           ajax_request: td_def['autoComplete']['ajax_request'], 
           featureClass: "P", 
           style: "full", 
           maxRows: 12, 
           search_terms: request.term 
          }, 
          success: function(data) 
          { 
           console.log(data); 
           parsed_autocomplete_data = parseJSONdata(data); 
           response(parsed_autocomplete_data); 
          } 
         }); 
        }, 
        search: function() 
        { 
         // custom minLength 
         var term = this.value; 
         //console.log(term); 
         if(typeof td_def['minLength'] != 'undefined') 
         { 
          var minL = td_def['minLength']; 
         } 
         else 
         { 
          var minL = 1; 
         } 
         if (term.length < minL) 
         { 
          return false; 
         } 
        }, 
        focus: function() 
        { 
        // prevent value inserted on focus 
         return false; 
        }, 
        open: function(event, ui) 
        { 
         var dialog = $(this).closest('.ui-dialog'); 
         if(dialog.length > 0){ 
          $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1); 
         } 
        }, 
        select: function(event, ui) 
        { 
         selected_autocomplete_index = $.inArray(ui.item.value, parsed_autocomplete_data); 
        } 
       }); 
      } 
      */ 

     } 
     else if (td_def['type'] == 'textarea') 
     { 
      element = document.createElement('TEXTAREA'); 
      element.id = name; 
      element.name = name; 
      cell.appendChild(element); 

     } 
     else if (td_def['type'] == 'td') 
     { 

      cell.innerHTML = 'TBD'; 
      cell.name = name; 
      cell.id = name; 

     } 
     else 
     { 
      alert(td_def['type'] + ' have not coded that.....'); 
     } 

     return cell; 

     function addNestedSelectOptions(element, category_array, level) 
     { 
      for (var key in category_array) 
      { 
       option = document.createElement('option'); 
       option.value = key; 
       name = category_array[key]['name']; 


       for(i=0;i<level;i++) 
       { 
        name = "\u00A0" + name; 
        name = "\u00A0" + name; 
       } 
       option.appendChild(document.createTextNode(name)); 
       element.appendChild(option); 
       if(!$.isEmptyObject(category_array[key]['children'])) 
       { 
        addNestedSelectOptions(element, category_array[key]['children'], level+1); 
       } 
      } 
     } 

} 
//this function needs to be called separately. 
function postRenderTableFunctions(table_div_id, table_def) 
{ 
    //extra jquery functionality -- needs to go after stuff is rendered 
    for(var i=0;i<table_def.length;i++) 
    { 
     if(typeof table_def[i]['autoComplete'] != 'undefined') 
     { 
      var id = table_div_id + '_' + table_def[i]['db_field']; 
      console.log(id); 
      //is the auto complete open? 
      /*$("#" + id).bind('autocompleteopen', function(event, ui) 
      { 
       $(this).data('is_open',true); 
      }); 

      $("#" + id).bind('autocompleteclose', function(event, ui) 
      { 
       $(this).data('is_open',false); 
      });*/ 
      /*$("#" + id).bind("keydown", function(event) 
      { 
       //what is this for ? 
       if (event.keyCode === $.ui.keyCode.TAB && $(this).data('is_open')) 
       { 
        event.preventDefault(); 
       } 
       if (event.keyCode === $.ui.keyCode.ENTER && !$(this).data('is_open')) 
       { 
        //do what? 
       } 
      });*/ 
      var i2 = i; 
      var me = table_def; 
      $("#" + id).autocomplete({ 
       source: function(request, response) 
       { 
       $.ajax(
       { 
         url: me[i2]['autoComplete']['url'], 
         type: 'GET', 
         async: true, 
         data: 
         { 
          ajax_request: me[i2]['autoComplete']['ajax_request'], 
          featureClass: "P", 
          style: "full", 
          maxRows: 12, 
          search_terms: request.term 
         }, 
         success: function(data) 
         { 
          console.log(data); 
          parsed_autocomplete_data = parseJSONdata(data); 
          response(parsed_autocomplete_data); 
         } 
        }); 
       }, 
       search: function() 
       { 
        // custom minLength 
        var term = this.value; 
        //console.log(term); 
        if(typeof table_def[i2]['minLength'] != 'undefined') 
        { 
         var minL = table_def[i2]['minLength']; 
        } 
        else 
        { 
         var minL = 1; 
        } 
        if (term.length < minL) 
        { 
         return false; 
        } 
       }, 
       focus: function() 
       { 
       // prevent value inserted on focus 
        return false; 
       }, 
       open: function(event, ui) 
       { 
        var dialog = $(this).closest('.ui-dialog'); 
        if(dialog.length > 0){ 
         $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1); 
        } 
       }, 
       select: function(event, ui) 
       { 
        selected_autocomplete_index = $.inArray(ui.item.value, parsed_autocomplete_data); 
       } 
      }); 
     } 
    } 
} 

Answer 1

Мой оригинальный комментарий к вашему вопросу -

Я подозреваю, что я могу работать, если заменить

$("#" + name).autocomplete({ 

с

$(element).autocomplete({ 

хотя я в настоящее время не имеют средств для Попробуй это.

Мой ответ -

В основном с помощью $("#name") ищет элемент с идентификатором name в DOM. Когда вы запускаете свой код, element еще не добавлен в DOM, поэтому автозаполнение не может быть привязано к вашему элементу.

Окружающая среда element с $() преобразует его в переменную jQuery, которую вы можете прикрепить к автозаполнению до его добавления в DOM.