HOW TO SELECT A DIV IN AN ASP.NET REPEATER

Lillian Martin

Total Post:27

Points:189
Posted by  Lillian Martin
C# 
 992  View(s)
Ratings:
Rate this:

I have a div inside an asp.net repeater. I would like to handle an event on the client side when a user clicks on one of the div's.

 

I've tried the onClick handler in the div (class="result"), but that doesn't seem to be firing. Is there another event I can tie this too?

 

I also try creating an event handler using jquery, but I'm not sure how to select the element that the user clicks. Right now, I seem to be tying the event to all the div's. Any idea how I can fix the jquery selector for the a single div element?

 

My repeater:

 

<div id="search-results" >

    <asp:Repeater ID="pageResults" runat="server" ItemType="ArchiveViewer.Logic.PageResult"

        SelectMethod="GetSearchResults" OnItemDataBound="pageResults_ItemDataBound" >

             <ItemTemplate>

                <div class="result" data-pageid="<%#:Item.PageId %>" data-pageNumber="<%#:Item.Number %>"

                    onclick="resultSelected"  >

                        <div>

                            Page: <%#:Item.Number %>

                        </div> 

                        <div>

                          <asp:Label ID="lblSearchResult" runat="server" ></asp:Label>

                        </div>                                       

                 </div>

             </ItemTemplate>

     </asp:Repeater>

</div>

And my jquery scripts:

 

$('#search-results div').click(function (e) {

        $(this).removeClass('active');

        $(this).addClass('active');

        // this is setting the active class for all the div's in the repeater...

});

 

var resultSelected = function () {

        // this is not working

};

  1. Anurag Sharma

    Post:40

    Points:280
    Re: How to select a div in an asp.net repeater

    Your first jQuery script actually looks OK... except all it will ever do is apply the class active to a div. So when you click a 2nd div, now you have two divs with class active, and a 3rd you have three, etc...

     

    What you want to do is clear out all the other active classes when you click:

     

    $('#search-results div').click(function (e) {

        $('#search-results div').each(function () {

            $(this).removeClass('active');

        });

        $(this).addClass('active');

    });

    This would be essentially the same as if you just applied a click event to all the divs with class="result". You'll be better off removing the inline onclick that you have in your repeater divs. Then you can call subsequent functions like:

     

    $('#search-results div.result').on('click', function () {

        var pageNumber = ($(this).attr('data-pageNumber'));

        console.log('Fetched ' + pageNumber);

        if (pageNumber != null) {

            $('#search-results div.result').each(function () {

                $(this).removeClass('active');

            });

     

            //add the active class and click handler

            $(this).addClass('active');

            getHighlightResults(pageNumber); //call getHighlightResults with pageNumber

            activeDivAction(this); // call activeDivAction passing the div that was clicked

        }

    });

     

    var getHighlightResults = function (pageNumber) {

        // Do some stuff

        console.log('inside getHighlightResults for ' + pageNumber);

    };

     

    var activeDivAction = function(activeDiv) {

       var pageNumber = ($(activeDiv).attr('data-pageNumber'));

       console.log('inside activeDivAction for ' + pageNumber);

    };

  1. Monaj Singh

    Post:41

    Points:287
    Re: How to select a div in an asp.net repeater

    There are a few things you need to change to make this work. Your repeater produces html similar to this:

     

    <div id="search-results">

        <div class="result" onclick="resultSelected();">

            <div>result</div>

            <div>some label</div>

        </div>

        <div class="result" onclick="resultSelected();">

            <div>result</div>

            <div>some label</div>

        </div>

    </div>

    You need to remove the active class on all divs, but only add it to the clicked div:

     

    $("#search-results div.result").click(function(){

        $("div").removeClass("active");

        $(this).addClass("active");

    });

     

    resultSelected = function(){

        console.log("clicked, but don't really need this...");

    }

    If you wanted to add the onclick handler to the html you need to change it to be calling a function via () at the end of the name. You also need to change the script to declare the function without defining it as a var. There is no reason to do this though if you are using jQuery.

      Modified On Apr-04-2016 07:33:52 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!