0

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!

Improve this question

3 Answers 3

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

well, I want to access a specific anchor..so I specified it's ID! isn't that better and direct ?
@lKashef: You cannot use an ID multiple times. It has to be unique across the whole document. What exactly do you mean by anchor? If you have multiple ones, which one should it jump to?
@lKashef - if you don't want to delve into jQuery ATM use my code and add simple if checking the id of oLink in the loop.
forget about my implementation! =) I have a repeater that will show the name of all the items (people) in a specific db table...now, without having to refresh my page (using ajax, jquery, or similar technologies i dunno) I need to place an anchor or text button whatever that says "More.." and when it's clicked it has to show some extra data (from the db) like the address...I hope I'm clear about my goal! thanks elusive =D
@lKashef - that's cool, your initial idea should work just fine.
|
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.

Improve this answer

11 Comments

You can see live example (static HTML) here: jsfiddle.net/TEFnh and you can also mess around with the JS code in there. :)
I can't deny that this is exactly what I wanted to implement! but to be honest I don't quite get it! First, you sent the Anchor object to the function, then you used a "parentNode" property! what is this exactly ? I could have simply searched for any anchor using the getByTagName function! right ?
A BUG i just discovered!! when I click more it shows the information in all the DIVs and when I click less, it hides all the divs! but of course I hope I could hide/show the div of only the given item!
@lKashef - to fix the BUG, simply wrap each item (in the repeater) with DIV element, I've edited my code accordingly. parentNode of the clicked link will then return the new wrapper DIV element, and then you will iterate over its child DIV elements searching for the one with proper ID.
@lKashef - 1) Being inside control, the true ID will be something like MyControl1_Address so it must be covered otherwise we'll never find the control. 2) The default behavior of link is to redirect user to different page. Without returning false, the page will be reloaded and we want to avoid that. The return false; tells the browser: don't continue with your default behavior. 3) No problem. :)
|
0

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.

Improve this answer

13 Comments

By the way, using jQuery the JavaScript code can be shortened and be more "browser safe". It's your call. :)
Actually, I was researching about the difference between (Javascript, JQuery, Ajax) I know the definition for each of them but I don't know what are they exactly used for ? of course i'd consider using JQuery if you think it's better, but any guides or pointers would help (Y) !
@lKashef - jQuery is library of JavaScript - all you need to do is add reference to jQuery code file and you can use it. Think of cakes: you can bake the cake yourself (pure JavaScript) or you can buy the cake, made by someone else, in the store. (jQuery)
@Shadow Wizard: You need to mention, that this cake from the store was made by pretty skilled people, so you can be quite sure that it will taste the same across various browsers.
@elusive - good point.. and the price of the cake is ~80 kilobytes. :D
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.