Home > DeveloperSection > Forums > How to select a div in an asp.net repeater
Lillian Martin

Total Post:27

Points:189
Posted on    December-21-2014 10:22 PM

 ASP.Net C# 
Ratings:


 2 Reply(s)
 625  View(s)
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

};



Anurag Sharma
Anurag Sharma

Total Post:40

Points:280
Posted on    December-22-2014 5:05 AM

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

};


Monaj Singh
Monaj Singh

Total Post:41

Points:287
Posted on    December-22-2014 6:40 AM

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

Don't want to miss updates? Please click the below button!

Follow MindStick