Как получить доступ к Div внутри ретранслятора с помощью JavaScript

Question

Просто у меня есть привязка внутри повторителя, который запускает функцию javascript, которая устанавливает innerHTML для Div для некоторого содержимого.

попытка этого за пределами повторителя сработала! но если я попытаюсь реализовать тот же код в шаблоне элемента повторителя, он не будет работать!

ПРИМЕЧАНИЕ: Я думаю, мне нужно сначала получить доступ к ретранслятору, а затем получить доступ к якору внутри него! но я не знаю как это сделать

Для дальнейшей иллюстрации:

Функция JavaScript:

function show(ele, content) {
    var srcElement = document.getElementById(ele);
    if (srcElement != null) {
        srcElement.innerHTML = content;
    }
}

Код ретранслятора:

<asp:Repeater ID="Repeater1" runat="server" >
    <ItemTemplate>
        Name : <%# Eval("name")%>
        <DIV ID= "PersonalInfo1" runat="server"></DIV>
        <A id="A1" href="#" runat="server" onclick="show('PersonalInfo1','Address : ')">More...</A>
    </ItemTemplate>
</asp:Repeater>

PS: ПОСТАВЛЕННЫЙ КОД НЕ РАБОТАЕТ В РЕПИТЕРЕ!

Answer 1

Это потому, что идентификаторы уникальны. Выберите элементы, используя getElementsByName или по имени их класса, например, с помощью jQuery.

Answer 2

ОК ... давайте начнем сначала.

Имеем такой код повторителя:

<asp:Repeater ID="Repeater1" runat="server" >
    <ItemTemplate>
        <div>
            Name : <%# Eval("name")%>
            <div id="Address" runat="server" style="display: none;"><%# Eval("address")%></div>
            <div id="Interests" runat="server" style="display: none;"><%# Eval("interests")%></div>
            <a id="A1" href="#" runat="server" onclick="return show(this, 'Address');">Show address</a>
            <a id="A2" href="#" runat="server" onclick="return show(this, 'Interests');">Show interests</a>
        </div>
    </ItemTemplate>
</asp:Repeater>

Тогда такой код JavaScript:

function show(oLink, targetDivID) {
    var arrDIVs = oLink.parentNode.getElementsByTagName("div");
    for (var i = 0; i < arrDIVs.length; i++) {
        var oCurDiv = arrDIVs[i];
        if (oCurDiv.id.indexOf(targetDivID) >= 0) {
            var blnHidden = (oCurDiv.style.display == "none");
            oCurDiv.style.display = (blnHidden) ? "block" : "none";
            //oLink.innerHTML = (blnHidden) ? "Less..." : "More...";
        }
    }
    return false;
}

Это будет искать "брат "элемент DIV по нажатой ссылке и показывает или скрывает его.

Код максимально прост с использованием чистого JavaScript, вы должны понимать, что делает каждая строка - не стесняйтесь спрашивать, если вынет.:)

Обратите внимание, что вы должны заранее поместить личную информацию в div PersonalInfo, а не передавать ее функции - функция получит указатель на нажатую ссылку.

Answer 3

Да, вам нужно перебрать все соответствующие ссылки. Решение, которое включает минимальное изменение кода, добавляет класс к ссылкам, а затем проверяет этот класс:

<A id="A1" href="#" runat="server" class="RepeaterLink" ...>

А потом в JavaScript:

var arrLinks = document.getElementsByTagName("a");
for (var i = 0; i < arrLinks.length; i++) {
    var oLink = arrLinks[i];
    if (oLink.className == "RepeaterLink") {
        //found link inside repeater..
        oLink.click();
    }
}

Это автоматически "щелкнет" по всем ссылкам, вы можете проверить идентификатор или что-то еще, чтобы имитировать щелчок определенной ссылки в репитере.