asked on

Can't access textbox for Autocomplete in repeater

tomfogarty · 2013-07-17T19:53:06Z

Hi, I'm trying to access a textbox in a repeater using a small javascript script. It's called by an ajax autocomplete when the user chooses an option from the list. It's not working because the javascript can't access the textbox (ID=ContactID). The reason is because it's in a repeater. So how do I modify the script to access that particular textbox in the repeater? Tom. (CODE)

Hi,

I'm trying to access a textbox in a repeater using a small javascript script. It's called by an ajax autocomplete when the user chooses an option from the list.

It's not working because the javascript can't access the textbox (ID=ContactID). The reason is because it's in a repeater. So how do I modify the script to access that particular textbox in the repeater?

Tom.

	<script type="text/javascript" >
	function OnContactSelected(source, eventArgs) {
	$get('<%# ContactID.ClientID %>').value = eventArgs.get_value();
	}
	</script>

Open in new window

guru_sami

Is the textbox incluced in each item or just a single item say header?

tomfogarty

ASKER

There will be one in each row. The context is that the contactid is the name of a person that's assigned to something else and the user can add multiple so there could me **many** of them.

guru_sami

When is this OnContactSelected method called and what is the source parameter?

tomfogarty

ASKER

It's called when an item on the list is selected. Specified in the ASP.NET code.

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx

tomfogarty

ASKER

Sorry- should have specified this.

We set the Javascript as a tag parameter of the ASP.NET

onclientitemselected="OnCompanySelected"

Open in new window

Full example for choosing a company...

<asp:autocompleteextender runat="server" id="AutoComplete" servicemethod="GetCompanyList" targetcontrolid="CompanyInputBox" completionlistcssclass="autotypeahead_completionListElement" onclientitemselected="OnCompanySelected" minimumprefixlength="2" completioninterval="200" completionlistitemcssclass="autotypeahead_listItem" completionlisthighlighteditemcssclass="autotypeahead_highlightedListItem"></asp:autocompleteextender>

Open in new window

guru_sami

Ok I see now...so you want to assign the selected value to some other field correct? I take ContactID is that other control.

If you can post the markup of your repeater, it would help.

tomfogarty

ASKER

Here is the code for the repeater only. You'll see the ContactID textbox and the autocomplete controls below also.

<asp:Repeater runat="server" id="CompanyContactTableControlRepeater">		<ITEMTEMPLATE>		<ICBEMS:CompanyContactTableControlRow runat="server" id="CompanyContactTableControlRow">
<tr><td class="tableCellSelectCheckbox" scope="row" style="font-size: 5px;" colspan="2">
                              <asp:CheckBox runat="server" id="CompanyContactRecordRowSelection" onclick="moveToThisTableRow(this);">	</asp:CheckBox><br /><br />
                            </td><td class="tableRowButton"><asp:ImageButton runat="server" id="CompanyContactRowDeleteButton" causesvalidation="False" commandargument="DeleteOnUpdate" commandname="Custom" cssclass="button_link" imageurl="../Images/icon_delete.gif" onmouseout="this.src='../Images/icon_delete.gif'" onmouseover="this.src='../Images/icon_delete_over.gif'" tooltip="&lt;%# GetResourceValue(&quot;Txt:DeleteRecord&quot;, &quot;ICBEMS&quot;) %>">		
	</asp:ImageButton></td><td class="tableRowButton"><asp:ImageButton runat="server" id="CompanyContactRowEditButton" causesvalidation="False" commandname="Redirect" cssclass="button_link" imageurl="../Images/icon_edit.gif" onmouseout="this.src='../Images/icon_edit.gif'" onmouseover="this.src='../Images/icon_edit_over.gif'" tooltip="&lt;%# GetResourceValue(&quot;Txt:EditRecord&quot;, &quot;ICBEMS&quot;) %>">		
	</asp:ImageButton></td><td class="tableCellValue" style="white-space:nowrap;"><div style="display:none"><span style="white-space:nowrap;">
<asp:TextBox runat="server" id="ContactID" Columns="40" MaxLength="40" cssclass="field_input" minlistitems="Default"></asp:TextBox>&nbsp;
<BaseClasses:TextBoxMaxLengthValidator runat="server" id="ContactIDTextBoxMaxLengthValidator" ControlToValidate="ContactID" ErrorMessage="&lt;%# GetResourceValue(&quot;Val:ValueTooLong&quot;, &quot;ICBEMS&quot;).Replace(&quot;{FieldName}&quot;, &quot;Contact&quot;) %>"></BaseClasses:TextBoxMaxLengthValidator></span>
</div>
<div style="position:relative;"><asp:textbox id="ContactAutoCompleteTarget" runat="server"></asp:textbox></div>
<asp:autocompleteextender runat="server" id="ContactAutoComplete" targetcontrolid="ContactAutoCompleteTarget" servicemethod="GetContactList" completionlistcssclass="autotypeahead_completionListElement" onclientitemselected="OnContactSelected" minimumprefixlength="2" completioninterval="200" completionlistitemcssclass="autotypeahead_listItem" completionlisthighlighteditemcssclass="autotypeahead_highlightedListItem"></asp:autocompleteextender></td><td class="tableCellValue" style="white-space:nowrap;"></td><td class="tableCellValue" style="white-space:nowrap;"><asp:ImageButton runat="server" id="ContactIDAddRecordLink" causesvalidation="False" commandname="Redirect" imageurl="../Images/iconNewFlat.gif" tooltip="&lt;%# GetResourceValue(&quot;Btn:Add&quot;, &quot;ICBEMS&quot;) %>">		
	</asp:ImageButton></td></tr><tr><td class="tableRowDivider" colspan="5">&nbsp;</td><td class="tableRowDivider"></td><td class="tableRowDivider"></td></tr></ICBEMS:CompanyContactTableControlRow>
</ITEMTEMPLATE>

</asp:Repeater>

Open in new window

guru_sami

ok then here's one way you can try:

function OnContactSelected(source, eventArgs) {
  var tid=source.get_element(); //grab the associated textbox
  var contact = $(tid).parent().find("input[id$='_ContactID']"); //find the contactid textbox
  contact.val(tid.value);
  alert(contact.val());
}

Open in new window

tomfogarty

ASKER

Getting an error.

tomfogarty

ASKER

Sorry - may not have attached the screenshot

guru_sami

Make sure you have added reference to jquery in the <head> section of your page.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

tomfogarty

ASKER

I'm getting a messagebox saying "undefined".

ASKER CERTIFIED SOLUTION

guru_sami

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

tomfogarty

ASKER

That's giving me a message box with the Text of the selected item of the auto complete. The ID of the ID complete is ContactAutoCompleteTarget. I need to get the value (an ID) of that item and write it into the ContactID textbox. Getting there...

guru_sami

Sorry I didn't get that last part. Didn't you want to add the selected item to the contactID?
Not sure how you are getting ID as the autocomplete will return a string[ ] only correct?

tomfogarty

ASKER

It's OK - this line finishes it.

  contact.val(eventArgs.get_value());

Open in new window

Now the autocomplete works.

Thanks a million.