Note that there are some explanatory texts on larger screens.

plurals
  1. POAutocomplete jQuery on User Controller within Repeater .NET
    primarykey
    data
    text
    <p>I have a Multiview search feature on a Web User Controller that is called within a Repeater, OHMY!!</p> <p>I have some training sessions being listed out on a page, each calling an employeeSearch Web User Controller so people can search for employees to add to the training session. I have the Employee Names and Employee IDs listed out in JS on the page and using the jQuery autocomplete i have them search for the employee and populate a hidden field in the User controller. Once the process is done they have the option of adding yet another employee. </p> <p>So i had Autocompelte 'work' in all the employee search boxes, but one i do the initial search (postback) autocomplete won't work again. </p> <p>Then i updated $().ready(function() to pageLoad() so it works correctly on multiple searches but only in the LAST item of the repeater (jQuery is loaded on the User Controller)</p> <p>FYI: I have the JS string set as EMPLOYEENAME|ID and jQuery displays the Employee Name and if they select it throws the ID in a ASP:HIDDEN FIELD</p> <pre><code> &lt;script type="text/javascript"&gt; format_item = function(item, position, length) { var str = item.toString().split("|", 2); return str[0]; } function pageLoad() { $("#&lt;%=tb_EmployeeName.ClientID %&gt;").autocomplete(EmployeeList, { minChars: 0, width: 500, matchContains: true, autoFill: false, scrollHeight: 300, scroll: true, formatItem: format_item, formatMatch: format_item, formatResult: format_item }); $("#&lt;%=tb_EmployeeName.ClientID %&gt;").result(function(event, data, formatted) { var str = data.toString().split("|", 2); $("#&lt;%=hf_EmployeeID.ClientID %&gt;").val(str[1]); }); }; &lt;/script&gt; </code></pre> <p>I can already guess that by repeating pageLoad within the User Controll i override the previous pageLoad. </p> <p><strong>THE QUESTION:</strong> Is there a way around this, a way to have all the jQuery appear in a single pageLoad or to somehow have a single jquery call to handle all my search boxes?</p> <p>I can't move the jQuery into the page calling all the controllers because i have no way of referencing the specific <em>tb_EmployeeName</em> textbox AND <em>hf_EmployeeID</em> hidden field. </p> <p><strong>Thank you so much for any help or insight you can give me into this problem.</strong> </p> <p>This is the Multiview that on the User Controller</p> <pre><code> &lt;asp:MultiView ID="mv_EmployeeArea" runat="server" ActiveViewIndex="0"&gt; &lt;asp:View ID="vw_Search" runat="server"&gt; &lt;asp:Panel ID="eSearch" runat="server"&gt; &lt;b&gt;Signup Employee Search&lt;/b&gt; (&lt;i&gt;Last Name, First Name&lt;/i&gt;)&lt;br /&gt; &lt;asp:TextBox ID="tb_EmployeeName" class="EmployeeSearch" runat="server"&gt;&lt;/asp:TextBox&gt; &lt;asp:HiddenField ID="hf_EmployeeID" runat="server" /&gt; &lt;asp:Button ID="btn_Search" runat="server" Text="Search" /&gt; &lt;/asp:Panel&gt; &lt;/asp:View&gt; &lt;asp:View ID="vw_Confirm" runat="server"&gt; &lt;b&gt;Signup Confirmation&lt;/b&gt; &lt;asp:FormView ID="fv_EmployeeInfo" runat="server"&gt; &lt;ItemTemplate&gt; &lt;%#(Eval("LastName"))%&gt;, &lt;%#(Eval("FirstName"))%&gt;&lt;br /&gt; &lt;/ItemTemplate&gt; &lt;/asp:FormView&gt; &lt;asp:Button ID="btn_Confirm" runat="server" Text="Signup this employee" /&gt; &amp;nbsp; &lt;asp:Button ID="btn_Reset3" runat="server" Text="Reset" /&gt; &lt;/asp:View&gt; &lt;asp:View ID="vw_ThankYou" runat="server"&gt; &lt;b&gt;Thank You&lt;/b&gt;&lt;br /&gt; The employee has been signed up and an email confirmation has been sent out.&lt;br /&gt;&lt;br /&gt; &lt;asp:Button ID="btn_Reset" runat="server" Text="Reset" /&gt; &lt;/asp:View&gt; &lt;/asp:MultiView&gt; </code></pre> <p><strong><em>------------UPDATE-------------</em></strong></p> <p>Thanks to Nalum i was able to solve the problem in a much better fashion then my previous (deleted) try. Now i have a single function that handles all instances for the searchbox without having to generate more code for each searchbox being created.</p> <p>The following javascript is being called on the parent page that contains the repeater. </p> <pre><code>format_item = function(item, position, length) { var str = item.toString().split("|", 2); return str[0]; } function pageLoad() { $(".ea_Autocomplete").each(function(i, element) { var tb_EmployeeName = $(this).children('input[id*=tb_EmployeeName]:first') var hf_EmployeeID = $(this).children('input[id*=hf_EmployeeID]:first') tb_EmployeeName.autocomplete(EmployeeList, { minChars: 0, width: 500, matchContains: true, autoFill: false, scrollHeight: 300, scroll: true, formatItem: format_item, formatMatch: format_item, formatResult: format_item }); tb_EmployeeName.result(function(event, data, formatted) { var str = data.toString().split("|", 2); hf_EmployeeID.val(str[1]); }); }); }; </code></pre> <p>I didn't change anything in the Multiview beyond wrapping the two inputs in a div with the class <strong>ea_Autocomplete</strong></p> <pre><code> &lt;asp:Panel ID="eSearch" runat="server"&gt; &lt;b&gt;Signup Employee Search&lt;/b&gt; (&lt;i&gt;Last Name, First Name&lt;/i&gt;)&lt;br /&gt; &lt;div class="ea_Autocomplete"&gt; &lt;asp:TextBox ID="tb_EmployeeName" class="EmployeeSearch" runat="server"&gt;&lt;/asp:TextBox&gt; &lt;asp:HiddenField ID="hf_EmployeeID" runat="server" /&gt; &lt;/div&gt; &lt;asp:Button ID="btn_Search" runat="server" Text="Search" /&gt; &lt;/asp:Panel&gt; </code></pre> <p>Thanks again Nalum!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload