asp.net repeater using jquery

Question

I have a repeater that lists emails directly from an app tied to my Outlook. I need the repeater to list the folder name then each message in that folder. What I get, however, is the folder name getting repeated for every message in that folder.

I'm also trying to use jquery to toggle the folder name to show the messages underneath it, but when I use style="display:none;" no messages are shown. I don't think the jquery I am trying to use is right. It's called jsfiddle.

Any help would be appreciated, as I am drawing a blank. I've been staring at this for far too long and probably just need a break.

Here's my code:

<script type="text/javascript">
    $(function () {
        $('a.toggler').on('click', function () {
            $('+ div', this).toggle();
        });
    });
</script>

<asp:Repeater runat="server" ID="ListServRepeater">
            <ItemTemplate>
                <div class="dataContentSection">
                    <a href="javascript:void(0);" class="folders toggler">
                        <h4>
                            <%# Eval("FolderName") %>
                        </h4>
                    </a>
                </div>
                <div class="dataContentSection">
                    <div>
                        <%# Eval("Message") %>
                    </div>
                </div>
            </ItemTemplate>
</asp:Repeater>

EDIT: I nested the repeaters, but I must not be doing something right because all the FolderNames still show with every message.

<div runat="server">
    <ul>
        <asp:Repeater runat="server" ID="FolderRepeater">
            <ItemTemplate>
                <li class="dataContentSection">
                    <a href="javascript:void(0);" class="folders toggler">
                        <h4>
                            <%# Eval("FolderName") %>
                        </h4>
                    </a>
                </li>
                <asp:Repeater runat="server" ID="MessagesRepeater">
                    <ItemTemplate>
                        <li class="dataContentSection" >
                            <div id="messages">
                                <%# Eval("Message") %>
                            </div>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

UPDATE: I was able to get the repeaters working thanks to @rs for providing an article to help. If you look in the comments, the article should still be there. I pretty much took it word for word and replaced column names and whatever else was relevant to my code. Still looking at jquery and can't figure out why it won't work. The only thing I can think of is that it is dynamic, not static, data that I'm trying to show and hide.

<div class="dataContentSection">
    <a href="javascript:void(0);" class="folders toggler">
        <h4>
           Folder Name
        </h4>
     </a>
 </div>
 <ul>
    <div class="dataContentSection">
        <div id="message">
          Message Text
        </div>
    </div>
 </ul>
 </div>

if you want to not repeat folder for every message, Use child repeater control for messages under each folder. — rs.
– rs., Commented Feb 20, 2013 at 22:44
you need two different datasources, one for folders and one for files. Then you should add relation between two sources and bind folders source to master repeated and files to nested. You can go though this Microsoft article — rs.
– rs., Commented Feb 21, 2013 at 15:51
Thank you so much for that article @rs! I was able to get the repeaters working the way I want them to and can now focus on the jquery part of my question. THANKS! — Jamie
– Jamie, Commented Feb 21, 2013 at 16:41

jiminy · Accepted Answer · 2013-02-21 20:46:41Z

3

This question is a two part question. rs is correct regarding the child repeater control for the messages under each folder. Once that problem is solved via .Net, you can address the jquery portion that will show/hide each folder.

The jquery portion can be addressed in multiple different ways. Here is one example code that you can reference once you are ready to address the jquery portion:

<script type="text/javascript">
    $(function () {
        $('a').click(function() {
            $(this).parent().children('.dataContentSectionMessages').toggle();
        });
    });
</script>

<div class="dataContentSection">
    <a href="javascript:void(0);" class="folders toggler">
        <h4>
            Folder 1
        </h4>
    </a>
    <div class="dataContentSectionMessages">
        <div id="message1a">
            Message 1a
        </div>
        <div id="message1b">
            Message 1b
        </div>
    </div>
</div>
<div class="dataContentSection">
    <a href="javascript:void(0);" class="folders toggler">
        <h4>
            Folder 2
        </h4>
    </a>
    <div class="dataContentSectionMessages">
        <div id="message2a">
            Message 2a
        </div>
    </div>
</div>

Here is a jsfiddle demoing the above: http://jsfiddle.net/4PPdz/

edited Feb 21, 2013 at 20:46

answered Feb 20, 2013 at 23:02

jiminy

1,6203 gold badges18 silver badges21 bronze badges

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

5 Comments

Jamie Over a year ago

Is it because I have dynamic data and not static that the jsfiddle doesn't work? That is really the only difference between your code and mine, and the messages won't hide.

jiminy Over a year ago

If you have the child repeater working as you stated, then there must something going on with the output. Please provide the outputted HTML (not the .Net code that you provided above) so that we can take a look.

Jamie Over a year ago

I edited the original post and put in what I saw when looking at the source of the page. I don't see what's any different from the jdfiddle demo.

jiminy Over a year ago

I edited my response to help make it easier to show the difference. In my response, the dataContentSectionMessages divs are nested within the dataContentSection divs. In your post, the equivalent dataContentSectionMessages divs (e.g., the div containing the messages), are not nested within the parent dataContentSection divs. Nesting within the parent is a little bit easier. You can still put together a jquery that would handle it without nesting per your post, but the jquery code would look different.

Jamie Over a year ago

oh ok, I see now. The divs open and close like they were originally supposed to now. Thanks!

Collectives™ on Stack Overflow

asp.net repeater using jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related