How to access a Div inside a repeater using javascript

问题

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!

回答1:

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.

回答2:

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

回答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.

来源：https://stackoverflow.com/questions/4303668/how-to-access-a-div-inside-a-repeater-using-javascript

标签

javascript

ASP.NET

webforms