Question

In my code I have that script:

<script type="text/javascript">
  var counter = 0;
  $(function () {
    $("#tags").autocomplete({
      source: "/Home/TakeSurowce",
      minLength: 0,
      select: function (event, ui) {
        if (ui.item) {
          $('input[name="Surowiec[' +counter+ '].SurowiecID"]').attr('value', ui.item.id);
        }
      }
    });
  });
</script>

It works very well, but I don’t know how to use exactly the same function in other function:

 <script type="text/javascript">
  var num = 1;
  function addRow() {
    $("#cialoTabeli")
    .append($('<tr></tr>')
    .append($('<td style="width: 100px" id="tdWithAutocomplete"></td>')
            .append($('<input type="hidden" name="Surowiec[' + num + '].SurowiecID" value=""/>'))
            .append($('<input id="tags" name="Surowiec[' + num + '].Nazwa" />').autocomplete({
                source: "/Home/TakeSurowce",    
                minLength: 0,
                select: function (event, ui) {         // this don't work !!!
                    if (ui.item) {
                        $('input[name="Surowiec[' + num + '].SurowiecID"]').attr('value', ui.item.id);
                    }
                }
            })
            ) // end of input with AUTOCOMPLETE
    ) // end of td with AUTOCOMPLETE

    .append($('<td style="width: 100px"></td>')
        .append($('<input id="SurowiecIlosc" name="SurowiecIlosc[' + num + ']" type="text" value="" />'))
    )
    .append($('<td></td>')
        .append($('<input type="button" value="+" onclick="addRow()" />'))
    )
);  // END OF TR
    num++;

};  // WHOLE FUNCTION ENDS
</script>

Select event in .autocomplete function don’t work ( inside addRow() function ). This event take id of selected item from autocomplete and put id value to value attribute in input type hidden. Does anyone know why this don’t work and how it should look to work properly?. It’s strange, because everything besides this select event works. Thank You for any help.

Answer 1

This works:

<script type="text/javascript">
var num = 1;
function addRow() {
    $("#cialoTabeli")
    .append($('<tr></tr>')
        .append($('<td style="width: 100px" id="tdWithAutocomplete"></td>')

                .append($('<input id="tags" name="Surowiec[' + num + '].Nazwa" />').autocomplete({
                    source: "/Home/TakeSurowce",
                    minLength: 0,
                    select: function (event, ui) {
                        if (ui.item) {
                            $('input[name="Surowiec[' + num + '].SurowiecID"]').attr('value', ui.item.id);
                            var hidden = $(this).parent().find('input[type="hidden"]')[0];
                            $(hidden).val(ui.item.id);
                        }
                    }
                }) // KONIEC INPUTA Z FUNKCJA jQUERY AUTOCOMPLETE

                ).append($('<input type="hidden" name="Surowiec[' + num + '].SurowiecID" value="" />'))
        ) // KONIEC TD Z jQUERY AUTOCOMPLETE

        .append($('<td style="width: 100px"></td>')
            .append($('<input id="SurowiecIlosc" name="SurowiecIlosc[' + num + ']" type="text" value="" />'))
        )
        .append($('<td></td>')
            .append($('<input type="button" value="+" onclick="addRow()" />'))
        )
    );      // KONIEC TR
        num++;

};  // KONIEC CALEJ FUNKCJI
</script>