How to select a div in an asp.net repeater

Total Post:27

Points:189
C# 
 1366  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. 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);
    };

      Modified On Apr-07-2018 05:28:42 AM
  1. 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-07-2018 05:28:01 AM

Answer