CODEWITHSUNDEEP
jqueryasp.netrepeater
Jamie
Jamie

Reputation: 1679

asp.net repeater using jquery

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>

Upvotes: 2

Views: 3063

Answers (1)

jiminy
jiminy

Reputation: 1618

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/

Upvotes: 3

Related Questions