2012-11-16 54 views
1

我需要初始化我的自動完成字段,每次克隆表中的一行。到目前爲止,只有在頁面加載時才初始化我的第一行。這是我的代碼http://jsfiddle.net/4XZMb/951/當克隆表中的行時初始化自動完成

function addRow(){ 

    var numberExistingRows = 1; 
    // use "ADD" button to add new row 

    $('#add_row').click(function() { 
     // keep track of number of rows for input names 
     numberExistingRows++; 

     // clone a row 
     var $row = $('.dataRow:last').clone(); 

     $row.find('.deleteRow').click(deleteRow); 

     // strip previous values and fix names of inputs 
     $row.find('input').each(function() { 
      var $input = $(this); // cache this input into jQuery object in lieu of using $(this) in below functions for clarity and performance 

      $input.val(""); // reset value to none 

      // fix names 
      var thisInputName = $input.attr('id'); 
      $input.attr('id', thisInputName); 
     }); 

     $('#tableSo').append($row); 

     return false; 

    }); 

} 
+0

您正在用'id'克隆行。這會導致一些問題。我建議將它們改爲課程。 – JoeFletch

回答

0

我已經更新您的jsFiddle

我將id的更改爲類,以便與重複的id的不存在衝突。

var autocompleteSo = function(row){ 
    var $row = $(row) 
    $row.find(".tableService").autocomplete({ 
      source: 'services/add_services.php?servtype=1', 
      select: function(event, ui) { 
      $('.id_servtype').val(ui.item.id); 

     } 
    }); 

    $row.find(".soClient").autocomplete({ 
      source: 'salesorders/add_sales_order.php?client=1', 
      select: function(event, ui) { 
      $('.id_client').val(ui.item.id); 

     } 
    }); 

    $row.find(".tableProject").autocomplete({ 
      source: 'salesorders/add_sales_order.php?project=1', 
      select: function(event, ui) { 
      $('.id_project').val(ui.item.id); 

     } 
    }); 
} 

然後就在行的追加之後,我會運行此代碼。

$('#tableSo').append($row); 
autocompleteSo($('#tableSo tr').eq(numberExistingRows - 1)); 
0

您有多個具有相同ID的元素。這不是有效的HTML。而是使用指定它是特定類型的自動完成的類,然後在新行中選擇要初始化的類。

function autocompleteSo(row){ 

    row.find(".tableService").autocomplete({ 
      source: 'services/add_services.php?servtype=1', 
      select: function(event, ui) { 
      row.find('.id_servtype').val(ui.item.id); 

     } 
    }); 

    row.find("soClient").autocomplete({ 
      source: 'salesorders/add_sales_order.php?client=1', 
      select: function(event, ui) { 
      row.find('id_client').val(ui.item.id); 

     } 
    }); 

    row.find("tableProject").autocomplete({ 
      source: 'salesorders/add_sales_order.php?project=1', 
      select: function(event, ui) { 
      row.find('id_project').val(ui.item.id); 

     } 
    }); 
} 

這樣的事情,然後調用autocompleteSo創建行時。

<tr class="dataRow soRows"> 
    <td> 
     <input type="text" class="input-medium tableService" name="tableService" /> 
     <input type="hidden" class="id_servtype" name="id_servtype[]" /> 
    </td> 
    ...