Автозаполнение jQuery на контроллере пользователя в Repeater .NET - PullRequest
6 голосов
/ 24 февраля 2010

У меня есть функция поиска Multiview на веб-контроллере пользователя, которая вызывается в репитере, OHMY !!

У меня есть несколько учебных сессий, перечисленных на странице, каждая из которых вызывает веб-контроллер employeeSearch, чтобы люди могли искать сотрудников для добавления в учебную сессию. У меня есть имена сотрудников и идентификаторы сотрудников, перечисленные в JS на странице, и с помощью автозаполнения jQuery они выполняют поиск сотрудников и заполняют скрытое поле в пользовательском контроллере. Как только процесс завершен, у них есть возможность добавить еще одного сотрудника.

Таким образом, у меня было автозаполнение 'работа' во всех окнах поиска сотрудников, но одно, которое я выполняю при автозаполнении начального поиска (обратной передачи), больше не будет работать.

Затем я обновил $ (). Ready (function () до pageLoad (), чтобы он корректно работал при многократном поиске, но только в элементе LAST ретранслятора (jQuery загружен на пользовательский контроллер)

К вашему сведению: у меня для строки JS задано значение EMPLOYEENAME | ID, а jQuery отображает имя сотрудника, и, если они выбирают его, выбрасывает идентификатор в ASP: HIDDEN FIELD

    <script type="text/javascript">

    format_item = function(item, position, length) {
        var str = item.toString().split("|", 2);           
        return str[0];
    }

     function pageLoad() {    
        $("#<%=tb_EmployeeName.ClientID %>").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.ClientID %>").result(function(event, data, formatted) {                
            var str = data.toString().split("|", 2);
            $("#<%=hf_EmployeeID.ClientID %>").val(str[1]);
        });
    };       

    </script>

Я уже могу догадаться, что, повторяя pageLoad в пользовательском контроле, я переопределяю предыдущий pageLoad.

ВОПРОС: Есть ли способ обойти это, способ, чтобы все jQuery отображались в одной pageLoad или как-то иметь один вызов jquery для обработки всех моих окон поиска?

Я не могу переместить jQuery на страницу, вызывающую все контроллеры, потому что у меня нет возможности сослаться на конкретное tb_EmployeeName textbox AND hf_EmployeeID скрытое поле.

Большое спасибо за любую помощь или понимание, которое вы можете дать мне в этой проблеме.

Это Multiview, который на контроллере пользователя

        <asp:MultiView ID="mv_EmployeeArea" runat="server" ActiveViewIndex="0">

        <asp:View ID="vw_Search" runat="server">                  
            <asp:Panel ID="eSearch" runat="server">
                <b>Signup Employee Search</b> (<i>Last Name, First Name</i>)<br />
                <asp:TextBox ID="tb_EmployeeName" class="EmployeeSearch" runat="server"></asp:TextBox> 
                <asp:HiddenField ID="hf_EmployeeID" runat="server" />

                <asp:Button ID="btn_Search" runat="server" Text="Search" />
            </asp:Panel>                     
        </asp:View>

        <asp:View ID="vw_Confirm" runat="server">
            <b>Signup Confirmation</b>
            <asp:FormView ID="fv_EmployeeInfo" runat="server">
                <ItemTemplate> 
                    <%#(Eval("LastName"))%>, <%#(Eval("FirstName"))%><br />
                </ItemTemplate>
            </asp:FormView>    
            <asp:Button ID="btn_Confirm" runat="server" Text="Signup this employee" />  &nbsp; <asp:Button ID="btn_Reset3" runat="server" Text="Reset" />   
        </asp:View>

        <asp:View ID="vw_ThankYou" runat="server">
            <b>Thank You</b><br />
            The employee has been signed up and an email confirmation has been sent out.<br /><br />
            <asp:Button ID="btn_Reset" runat="server" Text="Reset" />
        </asp:View>              

    </asp:MultiView> 

------------ UPDATE -------------

Благодаря Nalum я смог решить проблему намного лучше, чем моя предыдущая (удаленная) попытка. Теперь у меня есть одна функция, которая обрабатывает все экземпляры для окна поиска без необходимости генерировать больше кода для каждого создаваемого окна поиска.

Следующий javascript вызывается на родительской странице, которая содержит ретранслятор.

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]);
        });


    });
};

Я ничего не изменил в Multiview, за исключением объединения двух входов в div с классом ea_Autocomplete

  <asp:Panel ID="eSearch" runat="server">
                <b>Signup Employee Search</b> (<i>Last Name, First Name</i>)<br />
                <div class="ea_Autocomplete">
                    <asp:TextBox ID="tb_EmployeeName" class="EmployeeSearch" runat="server"></asp:TextBox> 
                    <asp:HiddenField ID="hf_EmployeeID" runat="server" />
                </div>                                                                                 

                <asp:Button ID="btn_Search" runat="server" Text="Search" />
   </asp:Panel>

Еще раз спасибо, Налум!

1 Ответ

2 голосов
/ 24 февраля 2010

Я вроде как догадываюсь, я действительно не знаю asp.net, так что поправьте меня, если я ошибаюсь.

Я предполагаю, что multiview делает что-то типа ajaxy на фоне asp.net, и в этом случае, когда ваша поисковая форма перезагружается, jQuery.autocomplete не будет применяться к новой форме.

Скорее всего, я совершенно не прав в том, что я только что сказал.


Изменить для моего второго комментария.

$('.autocomplete').each(function(i,element){
    $(element).autocomplete({...});
    $(element).result(function(event, data, formatted) { 
        // Now based on you're element id you can build up an id and work with that
        var id = element.id + '-extra-stuff';               
        var str = data.toString().split("|", 2);
        $('#' + id).val(str[1]);
    });
});
...