如何使用JavaScript访问中继器内的Div

Question

Simply, I have an anchor inside a repeater that triggers on click a javascript function, which sets the innerHTML of a Div to some content.

trying this outside a repeater did work! but if I tried to implement the same code in the repeater's item template, it won't work!

NOTE: I think I need to access the repeater first then access the Anchor inside it! but I don't know how to do it

For further illustration:

JavaScript Function:

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

The repeater's code:

<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: THE POSTED CODE ISN'T WORKING IN THE REPEATER!

Answer 1

That is because id's are unique. Select elements using getElementsByName or by their class name with for example jQuery.

Answer 2

OK... let's start over.

Have such repeater code:

<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>

Then such JavaScript code:

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

This will search for "brother" DIV element of the clicked link, and show or hide it.

The code is as simple as possible using pure JavaScript, you should be able to understand what each line is doing - feel free to ask if you don't. :)

Note, you have to put the personal info in the PersonalInfo div in advance instead of passing it to the function - the function will get pointer to the clicked link.

Answer 3

Yes you need to iterate all the relevant links. Solution that involve minimal change of code is adding class to the links then check for this class:

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

And then in 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();
    }
}

This will "auto click" all the links, you can check ID or something else to imitate click of specific link in the repeater as well.