forum

Home / DeveloperSection / Forums / How to select a div in an asp.net repeater

Ask Question

How to select a div in an asp.net repeater

Lillian Martin 2081 21-Dec-2014

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
};

asp.net c# 
Updated on 22-Dec-2014
Lillian Martin

Lillian Martin

Follow

Can you answer this question?

Answer

2 Answers

Anonymous User

Anonymous User

22-Dec-2014

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.

Anurag Sharma

Anurag Sharma

22-Dec-2014

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);
};

Liked By