Click here to Skip to main content
15,746,302 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
I have a asp:Textbox with autocomplete, the data comes from a webservice and returns Json data. When a item is selected it puts a value (the id) into a 'hidden' field and the price into another textbox . This all works fine. But when I put more or less the same code into a asp:repeater it doesn't do the autocomplete.

This is a graps from my asp code:
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<asp:TextBox runat="server" id="txtItem2" style="width:500px"/><br />
<asp:TextBox runat="server" ID="txtHiddenItemID2"  />  <br />
<asp:TextBox runat="server" ID="txtPrice2" />
<asp:Repeater ID="rptArtLijnen" runat="server"
    onitemcommand="rptArtLijnen_ItemCommand">
    <HeaderTemplate>
        <table border="Solid">
            <tr>....
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
            <tr>
                <div class="ItemAutoComplete" id="ItemAutoCompleteDiv">
                    <td>
                            <asp:TextBox runat="server"  ID="txtItem" Text='<%#Eval("Item") %>' class="txtItemclass" />
                            <asp:TextBox ID="txtHiddenItemID" runat="server" class="txtHiddenItemclass"/>
                    </td>
                    <td><asp:TextBox runat="server" ID="txtPrice" value='<%#Eval("Price") %>'/></td>
                </div>
            </tr>
    </ItemTemplate>
    <FooterTemplate>
     </Table>
    </FooterTemplate>
</asp:Repeater>


This is my jQuery code:
$(document).ready(function () {
		//this handles the textbox out of the repeater
		$.ajax({
			type: "POST",
			url: "AutoCompleteItems.asmx/GetItemJ",
			dataType: "json",
			data: "{ 'data': '" + document.getElementById("txtItem2").value + "' }",
			contentType: "application/json; charset=utf-8",
			success: function (data) {
				$('#txtItem2').autocomplete({
					minLength: 0,
					source: data.d,
					focus: function (event, ui) {
						$('#txtItem2').val(ui.item.value);
						return false;
					},
					select: function (event, ui) {
						$('#txtItem2').val(ui.item.ItemCode + " " + ui.item.Description);
						$('#txtHiddenItemID2').val(ui.item.ID);
						$('#txtPrice2').val(ui.item.Price);
						return false;
					}
				});
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				alert(textStatus + errorThrown);
			}
		});

		//this handles the textbox in the repeater
		$(".ItemAutoComplete").each(function (i, element) {
			var txtItem = $(this).find('input[id*=txtItem]:first')
			var txtHiddenItemID = $(this).find('input[id*=txtHiddenItemID]:first')
			var txtPrice = $(this).find('input[id*=txtPrice]:first')

			$.ajax({
				type: "POST",
				url: "AutoCompleteItems.asmx/GetItemJ",
				//async: false,
				//cache: false,
				dataType: "json",
				data: "{ 'data': '" + txtItem.val() + "' }",
				contentType: "application/json; charset=utf-8",
				success: function (data) {
					txtItem.autocomplete({
						minLength: 0,
						source: data.d,
						focus: function (event, ui) {
							txtItem.val(ui.item.value);
							return false;
						},
						select: function (event, ui) {
							txtItem.val(ui.item.ItemCode + " " + ui.item.Description);
							txtHiddenItemID.val(ui.item.ID);
							txtPrice.val(ui.item.Price);
							return false;
						}
					});
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus + errorThrown);
				}
			});

		});
	});


This is my webmethod (which works with the textbox) with the class:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<ItemJ>  GetItemJ(string data) {
   List<ItemJ> ItemJs = new List<ItemJ>();
    //if (Request.QueryString["q"] != null)
    //{
        try
        {
            DataContext d = new DataContext();
            List<string> typeList = "P R".Split(" ".ToCharArray()).ToList();
            //List<string> conditionList = "A D F".Split(" ".ToCharArray()).ToList();
            ItemJs = (from i in d.Items
                      join a in d.ItemAssortments on i.Assortment equals a.Assortment
                      where a.SecurityLevel <= 999
                      where i.SecurityLevel <= 999
                             && a.SecurityLevel <= 999
                             && i.IsSalesItem == true
                             && !typeList.Contains(i.Type.ToString())
                             && (new string[] { "A", "D", "F" }).Contains(i.Condition.ToString())
                             && (SqlMethods.Like(i.Description, "%" + data + "%") || SqlMethods.Like(i.ItemCode,  data + "%"))
                      orderby i.ItemCode
                      select new ItemJ
                      {
                          //value = i.ItemCode,// + " " + i.ItemCode + " ",
                          ItemCode = i.ItemCode,
                          Description = i.Description, //+ " " + i.ItemCode + " ",
                          ID = i.ID.ToString(),
                          Price = i.PurchasePrice.ToString()
                      }).Take(10).ToList();
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
            //return null;
        }
    //}
    return ItemJs;
}


C#
public class ItemJ //: Item
{
    //string _name;
    string _value;
    public string value
    {
        get { return _Description + " (" + _ItemCode + ")"; }
        //set { _value = value; }
    }
    string _Description;
    public string Description
    {
        get { return _Description; }
        set { _Description = value; }
    }
    string _ID;
    public string ID
    {
        get { return _ID; }
        set { _ID = value; }
    }
    string _ItemCode;
    public string ItemCode
    {
        get { return _ItemCode; }
        set { _ItemCode = value; }
    }
    string _Price;
    public string Price
    {
        get { return _Price; }
        set { _Price = value; }
    }
}


I've spent hours on this, can somebody give me a clue?
Posted
Updated 23-Mar-11 5:49am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900