Используя jQuery в GridView? - PullRequest
       5

Используя jQuery в GridView?

1 голос
/ 02 апреля 2010

У меня есть традиционный ASP.NET GridView. Внутри него у меня есть поле шаблона с возможностями редактирования. Мне нужно использовать плагин автозаполнения JQuery на редактировать кусок. Это работает где угодно, но внутри этого GridView. Другими словами, я знаю, что плагин работает.

Вот материал ASP.NET (да, я использую SqlDataSource):


<% # Eval ("INGREDIENT_CODE")%>

А вот jQuery в документе .ready ():

$('[id$=txtEditIngredients]').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });

Что я могу здесь делать не так?

Ответы [ 4 ]

3 голосов
/ 02 апреля 2010

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

$('.AutoCompleteField').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });

У меня были проблемы при попытке доступа к элементам управления внутри gridview с использованием идентификатора.

НТН

2 голосов
/ 02 апреля 2010

вы хотите использовать в шаблоне элемента:

<%# ((GridViewRow)Container).FindControl("txtEditIngredients").ClientID %>

Если вы посмотрите на источник вашей отрендеренной страницы, то увидите, что идентификатор элемента управления текстового поля в виде сетки - это не просто txtEditIngredients, он содержит предварительно добавленную информацию.

Другой вариант - добавить класс в текстовые поля и применить автозаполнение на основе этого класса. Таким образом, они не зависят от id

$('.ICLookup').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });

Также, если вы используете идентификатор клиента, убедитесь, что вы поместили определенный документ.ready (): в шаблон EditTemplate, чтобы убедиться, что он вызывается только тогда, когда видны элементы управления редактирования.

1 голос
/ 03 апреля 2010

Что ж, теперь, когда вы сказали, что это внутри панели обновлений, это имеет больше смысла. Код в панели обновления не обязательно будет отображаться к моменту запуска jquery. Если вы сделаете предупреждение с .size, как я предложил в другом ответе, это подтвердит.

Если вы сделали вызов .live ('autocomplete') вместо .autocomplete (), он должен работать даже с панелью обновления. Функция jQuery .live вызывает добавление события jQuery ко всем элементам управления, которые соответствуют селектору, даже если они добавляются после выполнения вызова. Подробнее см. http://api.jquery.com/live/.

1 голос
/ 02 апреля 2010

Вы можете использовать класс для выбора, если хотите (как уже упоминали другие), но для меня, если вы добавляете класс именно для этой цели и у вас есть идентификатор, который вы можете выбрать с, кажется, пустая трата.

Я создал очень простой пример, и он показывает, что способ, которым вы это делаете (с [id $ = txtField] в качестве вашего селектора, действительно работает с плагином. Вот код .aspx:

<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.autocomplete.min.js"></script>
    <link type="text/css" href="jquery.autocomplete.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function() {
            $('[id$=txtTest]').autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
                mustMatch: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView runat="server" ID="grdView" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox runat="server" ID="txtTest" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </div>
    </form>
</body>
</html>

А вот обновления кода, необходимые для запуска теста:

protected void Page_Load(object sender, EventArgs e)
{
    List<string> data = new List<string>();
    data.Add("test");
    data.Add("test2");
    this.grdView.DataSource = data;
    this.grdView.DataBind();
}

Если вы создадите тестовое веб-приложение с этим именем в качестве тестовой страницы и запустите его, автозаполнение будет работать нормально.

Поскольку это не работает для вашего приложения, вам нужно проверить, чтобы убедиться, что используемый вами селектор ([id $ = txtEditIngredients]) действительно соответствует чему-то. Чтобы проверить это, поместите этот код перед ним в событие document.ready:

alert($('[id$=txtEditIngredients]').size());

Это должно предупредить число с количеством строк в вашем GridView. Если этого не произойдет, просмотрите источник и найдите это текстовое поле в одной из строк, чтобы увидеть, что это за идентификатор, и соответствующим образом настройте селектор.

Редактировать: Я просто хотел добавить, что я все время использую [id $ = controlName] в jQuery / .Net из-за структуры имен элементов управления .Net, и она работает каждый раз, поэтому это не должно быть проблемой вообще.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...