Combobox on ajax возвратил поля

Question

Хорошо, я разрабатываю систему, в которую вы добавляете строки в таблицу, затем вводите в нее данные и сохраняете их. Я использую ajax, чтобы вернуть полную таблицу (которая имеет теги ввода). Теперь я пытаюсь использовать combobox на select (возвращается через ajax). Однако это не работает. Сопоставление не работает.

Вот изображение: -

Вот мой код, который возвращает все на запрос AJAX: -

...code removed till here (Everything works fine) 

while($details = $s->fetch(PDO::FETCH_OBJ)) 
    { 
     //first make the select 
     $selectBegin = 
     ' 
     <select id="combobox"> 
     <option value=""></option> 
     '; 
     $innerSelectString = ""; 
     $selectMain = ""; 
     while($customers = $s1->fetch(PDO::FETCH_OBJ)) 
     { 
      //fix the select thing here 
      $si = "<option value='$customers->indexid'>$customers->v1</option>"; 
      $selectMain .= $si; 
     } 
     $selectEnd = '</select>'; 
     $selectFinal = $selectBegin . $selectMain . $selectEnd; 
     //select code completed 
     $underString = " 
     <tr> 
     <td><input type='text' name='somename' value='$details->column1'></td> 
     <td>$selectFinal</td> 
     </tr> 
     "; 
     $mainString .= $underString; 
    } 
    $endString = "</tbody></table>"; 
    $finalString = $beginString . $mainString . $endString; 
    echo $finalString; 

Что может быть не так? Все файлы и код javascript правильно помещаются на страницу. Возвращаются результаты ajax.

Это Аякса, который возвращает поля: -

<script type="text/javascript"> 
//var c = $('#c').val(); 
//var cu = $('#cu').val(); 
function load_content_rows() 
{ 
$(document).ready(function() { 
     $.ajax({ //create an ajax request to load_page.php 
     type: "GET", 
     url: "ajax.php?requestid=1",    
     dataType: "html", //expect html to be returned     
     success: function(response){      
      $("#requestMaker").html(response); 
      //alert(response); 
     } 
    }); //ajax request end 
}); 
} //load_content 
load_content_rows(); 

Это код для выпадающего списка: -

<script> 
    (function($) { 
    $.widget("custom.combobox", { 
     _create: function() { 
     this.wrapper = $("<span>") 
      .addClass("custom-combobox") 
      .insertAfter(this.element); 

     this.element.hide(); 
     this._createAutocomplete(); 
     this._createShowAllButton(); 
     }, 

     _createAutocomplete: function() { 
     var selected = this.element.children(":selected"), 
      value = selected.val() ? selected.text() : ""; 

     this.input = $("<input>") 
      .appendTo(this.wrapper) 
      .val(value) 
      .attr("title", "") 
      .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
      .autocomplete({ 
      delay: 0, 
      minLength: 0, 
      source: $.proxy(this, "_source") 
      }) 
      .tooltip({ 
      tooltipClass: "ui-state-highlight" 
      }); 

     this._on(this.input, { 
      autocompleteselect: function(event, ui) { 
      ui.item.option.selected = true; 
      this._trigger("select", event, { 
       item: ui.item.option 
      }); 
      }, 

      autocompletechange: "_removeIfInvalid" 
     }); 
     }, 

     _createShowAllButton: function() { 
     var input = this.input, 
      wasOpen = false; 

     $("<a>") 
      .attr("tabIndex", -1) 
      .attr("title", "Show All Items") 
      .tooltip() 
      .appendTo(this.wrapper) 
      .button({ 
      icons: { 
       primary: "ui-icon-triangle-1-s" 
      }, 
      text: false 
      }) 
      .removeClass("ui-corner-all") 
      .addClass("custom-combobox-toggle ui-corner-right") 
      .mousedown(function() { 
      wasOpen = input.autocomplete("widget").is(":visible"); 
      }) 
      .click(function() { 
      input.focus(); 

      // Close if already visible 
      if (wasOpen) { 
       return; 
      } 

      // Pass empty string as value to search for, displaying all results 
      input.autocomplete("search", ""); 
      }); 
     }, 

     _source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response(this.element.children("option").map(function() { 
      var text = $(this).text(); 
      if (this.value && (!request.term || matcher.test(text))) 
      return { 
       label: text, 
       value: text, 
       option: this 
      }; 
     })); 
     }, 

     _removeIfInvalid: function(event, ui) { 

     // Selected an item, nothing to do 
     if (ui.item) { 
      return; 
     } 

     // Search for a match (case-insensitive) 
     var value = this.input.val(), 
      valueLowerCase = value.toLowerCase(), 
      valid = false; 
     this.element.children("option").each(function() { 
      if ($(this).text().toLowerCase() === valueLowerCase) { 
      this.selected = valid = true; 
      return false; 
      } 
     }); 

     // Found a match, nothing to do 
     if (valid) { 
      return; 
     } 

     // Remove invalid value 
     this.input 
      .val("") 
      .attr("title", value + " didn't match any item") 
      .tooltip("open"); 
     this.element.val(""); 
     this._delay(function() { 
      this.input.tooltip("close").attr("title", ""); 
     }, 2500); 
     this.input.autocomplete("instance").term = ""; 
     }, 

     _destroy: function() { 
     this.wrapper.remove(); 
     this.element.show(); 
     } 
    }); 
    })(jQuery); 

    $(function() { 
    $("#combobox").combobox(); 
    $("#toggle").click(function() { 
     $("#combobox").toggle(); 
    }); 
    }); 
</script> 

UPDATE Основная цель состоит в том, если я нажму на оных новая строка, добавляется новая строка, здесь отображается combobox, но она не ищет никакого значения. Даже если я нажму «Показать все предметы», ничего не произойдет. Это должно работать для n рядов строк.

Вот изображение:

Answer 1

Я вижу, что select вернулся в качестве ответа от сервера имеет тот же идентификатор #combobox который не подходит .. Так что просто изменить его class и как только вы получите response вы можете сделать, как показано ниже еще раз инициализировать:

изменение PHP

$selectBegin = 
' 
    <select class="combobox"> 
    <option value=""></option> 
'; 
...//Rest of the code 

изменение Аякса

.... 
success: function(response){      
    $("#requestMaker").html(response); 
    $("#requestMaker").find(".combobox").combobox(); //re-initialize 
} 
....